I am trying to align image on top of its container in react native, especially on landscape.
<View style={{flexDirection: 'row', justifyContent: 'center',alignItems: 'center'}}>
<View style={{flex:1,backgroundColor: 'green'}} >
<Image resizeMode='contain'style={{ flex:1,width:"100%",height:"100%"}} source={{uri:"https://www.tageblatt.lu/wp-content/uploads/2020/09/250112_cx__cy__cw__ch_-1-739x493.jpeg"}} />
</View>
<View style={{width:"15%",backgroundColor: 'blue' }}>
<Text style={{color:"white",padding:7}}>{caption}</Text>
</View>
</View>
The output of this code is :
And on landscape:
The desired output is:
Which I get on landscape orientation if I press control+s (saving) on my editor.
I follow this question, but with no solution for me .
I tried different values for resizeMode also .
Have you tried to change the resizeMode ?
<Image resizeMode='cover' ... />
Related
How can I align a column of text to the right like the image below in react native? I have tried setting the textAlign to 'right' and setting alignSelf to 'flex-end', but it doesn't seem to be working.
Image
You can do like this:
<View style={{alignItems:'flex-end'}}>
<View style={{flex:1}}>
<Text>TOTAL</Text>
</View>
<View style={{flex:1}}>
<Text>100</Text>
</View>
<View style={{flex:1}}>
<Text>200</Text>
</View>
<View style={{flex:1}}>
<Text>300</Text>
</View>
<View style={{flex:1}}>
<Text>400</Text>
</View>
<View style={{flex:1}}>
<Text>500</Text>
</View>
</View>
The alignItems property in Flexbox only works when the items has the flex property.
Check the documentation here: https://reactnative.dev/docs/flexbox#align-items
Result:
I am using scrollView component to scroll component. It works in local build. But after creating apk file it doesn't work. what can i do.
<View style={{ flex: 1 }}>
<ScrollView contentContainerStyle={{ flexGrow: 1 }} style={{ flex: 1 }}>
<View style={styles.container}>
{
submit ?
isPreview ?
<Text>Preview Page</Text> : <Text style={styles.text}>Thank you!</Text>
: <Questions />
}
<PoweredByPEX />
</View>
</ScrollView>
</View>
i have used View and scrollView component here. i can debug after APK build file. what can i do now. i have used flex layout here. is there any way to sort it out.
I am making a react native application in which i need to make design like this.In the image i have the radio buttons in row.How can i achieve similarly in react native.
https://imgur.com/a/jJ0GNTz
Currently i am using package react-native-flexi-radio-button
Here is my code.
<View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
<RadioGroup
size={24}
thickness={2}
color='#0A0A0A'
selectedIndex={0}
style={{ marginRight: '80%', marginBottom: 10 }}
onSelect = {(index, value) => this.onSelect(index, value)}>
<RadioButton value={'cash'} >
<Text style ={{ width: '100%' }}>COD</Text>
</RadioButton>
<RadioButton value={'online'}>
<Text style ={{ width: '100%' }}>Online</Text>
</RadioButton>
</RadioGroup>
</View>
I have tried may possible ways but could not achieve like in design.I have also tried setting the flexDirection to Row but that also does not works.I have also used other packages.I am new to react native application development so kindly make my concepts clear.Thanks in advance.
I dont know if it works with the package you are using but usually you can have it like this:
<View style={{flexDirection: "row", width: "100%" }} >
<View style={{flex:1}} > Your radio button </View>
<View style={{flex:1}} > Your second radio button </View>
</View>
each view takes 50% in the row. you can add some width to the inner views or play around with justifyContent: "space-between" (for example) in the top View.
Hope this helps!
Also react-native-elements have nice radio buttons too and it works like this with them 100%
Looking at the libraries source code, it looks like you need to apply you flex argument to the radio group and not the surrounding container.
Example:
<RadioGroup
style={{flexDirection: "row"}}
size={24}
thickness={2}
color='#0A0A0A'
selectedIndex={0}
/>
I have created a dropdown. Its elements appearing on top of body, however, when I press them, it actually triggers onPress on elements underneath them.
You guys can see the issue:
Code for the Dropdown is:
<View style={[styles.container]}>
<TouchableOpacity style={styles.main_container} onPress={this.animate}>
<Text style={styles.text}>{this.state.selectedCategoryText}</Text>
<Image style={styles.image}
source={require('../../assets/icons/dropdown.png')}
/>
</TouchableOpacity>
<View >
<Animated.View style={[styles.animated_container,{opacity: this.opacity, zIndex:1, elevation:1}]}>
<ScrollView style={{height:60}}>
{ this.data.map( (item, i)=>
<TouchableOpacity
style={{}}
disabled={false}
key={i}
onPress={()=>this.selectItem(i)}>
<Text style={styles.item_text}>{item} </Text>
</TouchableOpacity>
)}
</ScrollView>
</Animated.View>
</View>
</View>
I have applied absolute positioning on the animated view which displays the dropdown items.
animated_container:{
backgroundColor: colors.secondaryWhiteColor,
position: 'absolute',
top: '100%',
width: '100%', height: 70
}
I have managed to know the source of the problem, however I still don't know what exactly is the problem. DrawerNavigator from React.Navigation is doing something. If I remove the screen containing dropdown from the DrawerNavigator, then it works properly.
try to use touchable opacity from gesture handler not react native
How react native scroll text?
I have a long text in a fixed height container. I want to show a part of text in that container and scroll it when I want to see more.
I have try overflow scroll but react native seems not support overflow scroll.
Thanks.
You can use ScrollView for this case. Just put your text inside it and set height to scroll view.
I'm used the following code. Take ScrollView and put your any element inside ScrollView.
render() {
return(
<View style={styles.container}>
<ScrollView>
<Text>
Add your text
</Text>
</ScrollView>
</View>
);
}
There is currently a limitation in React Native where you can't set height directly on the ScrollView style prop. So, I suggest you do the following if you also want to set the height:
<View style={{ height: 100 }}>
<ScrollView>
<Text>
Your text goes here.
</Text>
</ScrollView>
</View>
Or alternatively using flexGrow:
<ScrollView style={{ flexGrow: 0.2 }}>
<Text>
Your text goes here.
</Text>
</ScrollView>
Relevant issue I found: https://github.com/facebook/react-native/issues/3422
<View style={{ height: hp(3)}}>
<ScrollView>
<Text style={{ fontSize: hp(2) }}>
Your text goes here
</Text>
</ScrollView>