i wanted to create a colored divider under the text but it does not show up on the screen and i don't know why
I'm using expo with react native
the divider should appear under text
return (
<View style={styles.container}>
<Image style={styles.img} source={logo}/>
<Text style={styles.txt}>Vos informations</Text>
<View style={styles.divider} />
</View>
and this is the Stylesheet i used:
const styles = StyleSheet.create({
container :{
flex:1,
flexDirection:'column',
alignItems:'center',
justifyContent:'center'
},
img: {
width: 300,
height:100,
resizeMode : 'contain',
},
txt : {
fontFamily: 'Cairo',
fontSize:24,
},
divider :{
backgroundColor : '#FB8703',
width:'80%',
height:29,
}
})
the desired outcome is having a wide divider under text
You can add a colored underline to a React Native component by adding a borderBottom style property. For example:
const styles = {
underline: {
borderBottomColor: '#00FF00',
borderBottomWidth: 1,
},
};
<Text style={styles.underline}>This text has an underline</Text>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.