Requirement:
I want to create the link badge.
Here's my code:
import React from 'react';
import EStyleSheet from 'react-native-extended-stylesheet';
import {Text, View} from 'react-native';
import HyperLinkIcon from '../../icons/hyperlink-icon';
import RemoveBadgeItemIcon from '../../icons/remove-item-badge-icon';
import {Colors, Typography, Fonts} from '../../theme';
const ItemBadge = ({
url = 'http://www.koovs.com/itemhttp://www.koovs.com/item',
}) => {
return (
<View style={styles.badgeContainer}>
<HyperLinkIcon />
<View style={styles.urlContainerStyle}>
<Text style={styles.urlStyle} numberOfLines={1}>
{url}
</Text>
</View>
<RemoveBadgeItemIcon />
</View>
);
};
export default ItemBadge;
const styles = EStyleSheet.create({
badgeContainer: {
padding: 14,
borderRadius: 12,
backgroundColor: '#F0EFFF',
flexDirection: 'row',
alignItems: 'center',
overflow: 'hidden',
},
urlContainerStyle: {
flexGrow: 1,
paddingHorizontal: 14,
},
urlStyle: {
color: Colors.LABEL,
fontSize: Typography._14,
fontFamily: Fonts.ROMAN,
},
});
But this gives me this:
I am trying to make Text component's maxWidth equal to that of its parent View and also if the url is long then it gets ellipsis.
Responsiveness should also be taken into consideration.
Related
i am new to react native with typescript and i have a problem
i want to get the text from the Text component so it mean when i press the Text i will console log it
i cant get the target value
i try also currentTarget
but it will give me a huge array of object with ton of keys without any target value
import { GestureResponderEvent, StyleSheet, Text, View } from "react-native";
import React, { useState } from "react";
import Card from "../../components/card/Card";
import ChooseLotteryNumber from "../../components/choose_lottery_number/ChooseLotteryNumber";
const CreateUser = () => {
const [selectedNumbers, setSelectedNumbers] = useState<number[]>([]);
const onSelectNumbers = (e: GestureResponderEvent )=>{
console.log(e.currentTarget)
};
return (
<View>
<Card>
<View>
<Text onPress={onSelectNumbers}>choose numbers!</Text>
</View>
<View style={styles.number_container}>
</View>
</Card>
</View>
);
};
export default CreateUser;
const styles = StyleSheet.create({
number_container: {
flexDirection: "row",
flexWrap: "wrap",
justifyContent: "center",
backgroundColor: "white",
borderRadius: 10,
},
number: {
fontSize: 24,
margin: 6,
borderWidth: 1,
borderRadius: 5,
textAlign: "center",
width: 35,
},
});
I am new to react native and need help. I created two components one
is for TextInput and another for button, I imported the Button
component in textInput and it show error. can someone help me figure
out the error I made here. I am getting error undefined is not an
object(evalutaing;?_reactnative,stylesheet.create')*
and folder structure in the picture attached
this is button Component
import React from 'react';
import { TouchableOpacity, Text, Stylesheet } from 'react-native';
export const Button = ({
style = {},
textStyle = {},
size = 125,
...props
}) => {
return (
<TouchableOpacity style={\[styles(size).radius, style\]}>
<Text style={\[styles.text, textStyle\]}>{props.title}</Text>
</TouchableOpacity>
);
};
**error is likely to be here**
const styles = (size) => Stylesheet.create({
radius: {
borderRadius: size / 3,
width: size,
hieght: size,
alignItems: 'center',
borderColor: 'white',
},
text: {
color: '#fff',
fontSize: 20,
},
});
this is textInput component
import * as React from 'react';
import { Text, View, StyleSheet } from 'react-native';
import Constants from 'expo-constants';
import { TextInput } from 'react-native-paper';
import { Card } from 'react-native-paper';
import {Button} from '../components/Button';
// You can import from local files
// or any pure javascript modules available in npm
export const Something = () => {
return (
<View style={styles.container}>
<View style={styles.titleContainer}>
<Text style={styles.title}> input something here</Text>
<TextInput />
<Button title="+" />
</View>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
},
titleContainer: {
flex: 0.5,
padding: 20,
justifyContent: 'center',
},
title: {
fontWeight: 'bold',
color: 'white',
fontSize: 30,
},
});
Mispelled height maybe?
const styles = (size) => Stylesheet.create({
radius: {
borderRadius: size / 3,
width: size,
hieght: size, <-------------------- hieght
alignItems: 'center',
borderColor: 'white',
},
text: {
color: '#fff',
fontSize: 20,
},
});
In my app, I have a screen that shows three rows that contain some text and a background image.
I used to only put the image, but I want to be able to press on the images to execute an action. This was my code before and it worked properly :
import React, { Component } from 'react'
import { ScrollView, View } from 'react-native'
import { useTranslation } from 'react-i18next';
import { TouchableOpacity } from 'react-native-gesture-handler';
import { useNavigation } from '#react-navigation/native';
import SelectorBox from '../../components/workout/SelectorBox';
const EXERCISE = require('../../assets/workout/exercise.jpg');
const MUSCLES = require('../../assets/workout/muscles.jpg');
const ROUTINE = require('../../assets/workout/routine.jpg');
export default function SelectorScreen() {
const {t} = useTranslation();
const navigation = useNavigation();
return (
<View style={{flex: 1, flexDirection: 'column', backgroundColor: "blue"}}>
<SelectorBox image={MUSCLES} title={t('workout.muscleGroups')} />
<SelectorBox image={EXERCISE} title={t('workout.exercises')} />
<SelectorBox image={ROUTINE} title={t('workout.routines')} />
</View>
)
}
import React from 'react'
import {Text, View, ImageBackground, StyleSheet, Dimensions} from 'react-native'
import { TouchableWithoutFeedback } from 'react-native-gesture-handler'
export default function SelectorBox(props) {
return (
<ImageBackground source={props.image} style={styles.background}>
<View style={styles.titleBar}>
<Text style={styles.title}>{props.title}</Text>
</View>
</ImageBackground>
)
}
const styles = StyleSheet.create({
background: {
flexDirection: "column",
alignItems: 'center',
justifyContent: 'center',
flex: 1,
width: Dimensions.get('window').width,
},
titleBar : {
width: Dimensions.get('window').width,
height: 60,
backgroundColor: '#ffb623',
justifyContent: 'center'
},
title: {
fontWeight: "900",
fontSize: 32,
alignSelf: 'center',
}
})
However, when I change the code, all my SelectorBox disappear...
export default function SelectorBox(props) {
return (
<TouchableWithoutFeedback style={styles.option}>
<ImageBackground source={props.image} style={styles.background}>
<View style={styles.titleBar}>
<Text style={styles.title}>{props.title}</Text>
</View>
</ImageBackground>
</TouchableWithoutFeedback>
)
}
const styles = StyleSheet.create({
option: {
flex: 1,
width: Dimensions.get('window').width,
// backgroundColor: 'red'
},
background: {
flexDirection: "column",
alignItems: 'center',
justifyContent: 'center',
flex: 1,
width: Dimensions.get('window').width,
},
titleBar : {
width: Dimensions.get('window').width,
height: 60,
backgroundColor: '#ffb623',
justifyContent: 'center'
},
title: {
fontWeight: "900",
fontSize: 32,
alignSelf: 'center',
}
})
I would like to be able to keep it like this screenshot everywhere. Right now, the screen is empty. (blue background, this is what i set it to)
Can you guide me ?
Try to debug the issue by steps.
Try and and import TouchableOpacity from react-native instead of react-native-gesture-handler. Does the backgroundColor: 'red' color works if uncomment it from the option style?
Change this:
import { TouchableWithoutFeedback } from 'react-native-gesture-handler'
to import from RN:
import { TouchableWithoutFeedback } from 'react-native'
You should consider of using TouchableOpacity instead of TouchableWithoutFeedback:
TouchableWithoutFeedback
Do not use unless you have a very good
reason. All elements that respond to press should have a visual
feedback when touched.
TouchableWithoutFeedback supports only one child. If you wish to have
several child components, wrap them in a View. Importantly,
TouchableWithoutFeedback works by cloning its child and applying
responder props to it. It is therefore required that any intermediary
components pass through those props to the underlying React Native
component.
Current behavior
When I attempt to invoke the Video library (import { Video } from 'react-native-video') my application breaks with the error of Module AppRegistry is not a registered callable module (calling runApplication)
Reproduction steps
My Video component is as follows:
import React, { Component } from 'react';
import { Video } from 'react-native-video';
import {
View,
Dimensions,
TouchableOpacity,
TouchableWithoutFeedback,
Animated,
Text,
Slider,
NetInfo,
StyleSheet
} from 'react-native';
class VideoPlayer extends Component {
state = {
paused: true
};
render() {
const videoWidth = Dimensions.get('window').width;
const videoHeight = videoWidth * (9 / 16);
const styles = StyleSheet.create({
videoContainer: {
width: videoWidth,
height: videoHeight,
backgroundColor: 'rgb(255,255,255)',
paddingTop: 0
}
})
return (
<Video
source={{ uri: 'https://www.youtube.com/embed/3NhHqPA8nIs?rel=0&autoplay=0&showinfo=0&controls=0' }}
paused={this.state.pause}
style={styles.videoContainer}
/>
)
}
}
export default VideoPlayer;
and App.js
import React, {Component} from 'react';
import {StyleSheet, Text, View} from 'react-native';
import Header from './components/Header';
import VideoPlayer from './components/Video';
export default class App extends Component {
render () {
return (
<View style={styles.container}>
<View style={styles.headerContainer}>
<Header />
</View>
<View style={styles.videoContainer}>
<VideoPlayer />
</View>
<Text style={{color: 'white'}}>Hello Wilbur!</Text>
<Text style={{color: 'white'}}>Some text</Text>
<Text style={{color: 'white'}}>some other text</Text>
</View>
)
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: 'rgb(4,4,4)',
alignItems: 'center',
justifyContent: 'center',
},
headerContainer: {
position: 'absolute',
flex: 1,
top: 0,
height: 72,
alignSelf: 'stretch',
paddingTop: 20,
paddingLeft: 12,
paddingRight: 12,
flexDirection: 'row',
backgroundColor: 'white'
},
videoContainer: {
flex: 0,
backgroundColor: 'rgb(4,4,4)',
alignItems: 'center',
justifyContent: 'center',
paddingTop: 0
}
});
If I do not instantiate the component I can render the application fine, and even make it work with a WebView, however when I attempt to import my VideoPlayer component I receive the aforementioned error.
Expected behavior
A functional video component, or at least an error related to the video player.
Platform
iOS
Video sample
https://www.youtube.com/embed/3NhHqPA8nIs?rel=0&autoplay=0&showinfo=0&controls=0
Does anyone see what I'm doing wrong?
Thank you.
react-native-video does not currently support youtube...
https://github.com/react-native-community/react-native-video/issues/1147
I am developing a react-native application. One of the app screens contains a list of albums. I have divided each album container into components which are Card and CardSection.
A Card can contain many CardSections. The CardSection will contain an image and 2 Text titles. The problem I am facing is with the positioning of the content in the CardSection as flexDirection:'row' is not working.
Here is the CardSection.js
import React from 'react';
import {View, Text, Image} from 'react-native';
import Card from './Card';
import CardSection from "./CardSection";
const AlbumDetail = ({album}) => {
// destructing the props
const {title, artist, thumbnail_image} = album;
return (
<Card>
<CardSection>
<View style={styles.thumbnailContainerStyle}>
<Image style={styles.thumbnailStyle} source={{uri: thumbnail_image}} />
</View>
<View style={styles.headerContentStyle} >
<Text style={styles.headerTextStyle}>{title}</Text>
<Text>{artist}</Text>
</View>
</CardSection>
</Card>
);
};
const styles = {
headerContentStyle: {
flexDirection: 'column',
justifyContent: 'space-around'
},
headerTextStyle:{
fontSize:18
},
thumbnailStyle: {
height: 50,
width: 50
},
thumbnailContainerStyle: {
justifyContent: 'center',
alignItems: 'center',
margin: 10,
marginRight: 10
}
};
export default AlbumDetail;
Here is the CardSection.js
import React from 'react';
import {View} from 'react-native';
const CardSection = (props) => {
return (
<View styles={styles.containerStyle}>
{props.children}
</View>
);
};
const styles = {
containerStyle: {
borderBottomWidth: 1,
padding: 5,
backgroundColor: '#fff',
justifyContent: 'flex-start',
flexDirection: "row",
borderColor: '#ddd',
position: 'relative'
}
};
export default CardSection;
The resultant should that the Image placed towards the left and on the right side of the image there will be 2 Text titles and their flexDirection will be column
<View styles={styles.containerStyle}> you have typo, it is styles, the prop should be style.
use this
headerContentStyle: {
flexDirection: 'row',
justifyContent: 'space-around'
}
instead of
headerContentStyle: {
flexDirection: 'column',
justifyContent: 'space-around'
}
You have to use card containerStyle props in CardSection.js file.
there you should have to use flexDirection :'row' .
Hope it will work.
I had a similar problem where flexDirection: 'row' was not working in one of my components that I was importing in App.js.
What was causing this was the alignItems: 'center' in the stylesheet for the main container in my App.js file.
I hope this helps someone.
You can check this.
import { TouchableOpacity } from 'react-native'