spacejustify

Give space between <text> components which is a child in a view component


    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'
}
});

Solution

  • 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.