import { Text, View, Image, StyleSheet } from 'react-native';
import * as react from 'react';
export default function TabOneScreen(){
return (
<View style={styles.container}>
<Image source = {{uri:'https://notjustdev-dummy.s3.us-east-2.amazonaws.com/avatars/elon.png'}} style={styles.image} />
my task is to give space to this text which is supposed to appear in a straight line (Elon Musk
11:11AM) using justifyContent: 'space-between' but its not having any effect instead the text are still together (Elon Musk11:11AM)
<View style={styles.row}>
<Text style={styles.name}>Elon Musk</Text>
<Text style={styles.text}>11:11 AM</Text>
</View>
<Text style={styles.text}>Boi Ice for Janet</Text>
</View>
</View>
);
}
const styles = StyleSheet.create({
container:{
flexDirection:'row',
padding:10,
},
image:{
height:60,
width:60,
borderRadius:50,
marginRight:10,
},
name:{
fontSize:20,
color:'blue',
},
row:{
flexDirection:'row',
justifyContent: 'space-between',
},
text:{
fontSize:20,
color:'blue'
}
});
You would need to use a
row:{
flex:1
// other keys
}
and/or
row:{
width:'100%'
}
so that the view (row) covers the width of the screen.