I am learning React Native for a project at work. I Need to display something like an article and I have dummy data in a JSON object as shown in the image. How do I break it into paragraphs so that it doesn't show just one big block of text?
I have a component with the code below;
<View style={{ marginVertical: SIZES.extraLarge}}>
<Text style={{fontSize:SIZES.large, textAlign:'justify', }}>{data.description</Text>
</View>
Related
hello I am new to react native I have given a task to create an image slider as shown in the picture
I have not found any library matching this design so I want to create a custom carousel how can I create this. Any sort of help will be appreciated.
Can you provide more details as to what is the requirements of this?
Seems like you are trying to create introductory slides in the app.
This plugin is really flexible and customisable. You might want to check this one out.
https://www.npmjs.com/package/react-native-app-intro-slider
Also if you desire to make a custom slider, you can use ScrollView and use the following configuration to the scrollView
<ScrollView
style={{ flex: 1 }}
pagingEnabled={true}
horizontal={true}
scrollEventThrottle={16} >
<View>
<Text>Screen 1</Text>
</View>
<View>
<Text>Screen 2</Text>
</View>
</ScrollView>
Tag me if you have any more questions regarding this.
Give this article a read to understand it better.
https://medium.com/backticks-tildes/create-a-custom-app-intro-slider-in-react-native-4308fae83ad1
I'm new to the redux form. I try to leverage the benefit it offers for one text input field in my react native app written in Typescript, literally just one text input field.
<Field name="payoutInput" type="text" component={this.renderPayout}/>
private renderPayout = (field: any) => (
<View style={{flexDirection: "row", flex: 0.22, justifyContent: "flex-end"}}>
<Text style={{fontSize: 17}}>
$
</Text>
<TextInput style={{fontSize: 17}} defaultValue={String(this.props.balance)} autoFocus={true} keyboardType={'number-pad'} onEndEditing={this.calculatePayout}/>
</View>
)
What I notice is when I monitor the state in reactotron, I can't actually see the value in the form state. Using formValueSelector will also just give me undefined. So I'm wondering that if it's necessary to wrap the Field in a form?
Happy to provide more context on requested.
Yes; that's how it connects inputs to the redux form state.
This is noted in the redux-form docs.
The redux-form docs note on React Native also says to follow this tutorial to get started, and neither resource indicates it works differently under React Native.
Hello i'm new on react native. I am using react native elements slider in my project but want to select range with two marker. It is working with one marker.
Here is my code :
<View style={{backgroundColor: "#fff"}}>
<Slider
style={{ width: '90%',marginLeft:20,marginRight:20 }}
minimumValue={0}
maximumValue={100}
step={1}
value={this.state.cost}
onValueChange={cost => console.log(cost)}
/>
<Text style={{marginLeft:20,marginRight:20}}>{this.state.cost}</Text>
</View>
React Native Elements slider doesn't support multiple marker. However you can use this library if you need multiple markers
How to render a paragraph with image at right,
the screen design should be similar to the screenshot
React Native does not support text justification in the way you want. You could somewhat emulate this effect for one paragraph at a time by rendering each paragraph in its own Text component, then rendering the following for paragraphs that have accompanying images:
<View style={{flexDirection: 'row'}}>
<Text>Lorem ipsum dolor......</Text>
<Image source={require('./path/to/image.png')} />
</View>
You'll probably want to add some left padding to the image component so the text doesn't run right up against it.
Can you try:
let pic = {
uri: 'https://upload.wikimedia.org/wikipedia/commons/d/de/Bananavarieties.jpg'
};
return(
<View style={styles.container}>
<Image source={pic} style={{width: 360, height: 110}}/>
<Text>React Application Works fine!</Text>
</View>
);
I am working on a react native project. Where I need to implement drop-down with an input field. When I type anything in the input field it should filter the dropdown content.
I can't use react-native-dropdown on anything because it placed a mask on the whole screen and I am not able to type anything when the dropdown is open.
So I tried to implement my own drop-down.
<View style = {{position:'absolute', zIndex:5, backgroundColor:'red'}}>
<View style = {[Styles.dropdownView, {display:this.props.display}]}>
<ScrollView style={{ top:0, bottom:0}}>
{ listData.map((val, i) => <Text key = {i} > {val} </Text> )}
</ScrollView>
</View>
</View>
Every thing is working fine but I am not able to scroll it vertically. Though it's working fine with horizontal scroll.
Please help me to fix this or suggest some other way.