React Native Component Style

October 26, 2022

Hi I’m trying to build a chat item component but I’m having problems with the style I can’t get it to work the way I want I would like the profile picture to be on the left but the text in the middle and the username on top where the time is on the far right what am I doing wrong?

const ChatItem = () => {
return (
<View>
  <View style={styles.card}>
    <Image
      style={styles.profileImage}
      source={{
        uri: 'https://reactnative.dev/img/logo-og.png',
      }}
    />
    <Text style={styles.name}>Username</Text>
    <Text style={styles.time}>01:00 AM</Text>
  </View>

  <Text>Hello World</Text>
</View>
 );

};

const styles = StyleSheet.create({
 imageWrapper: {},
  card: {
   flexDirection: 'row',
   },
    name: {
    fontWeight: 'bold',
    color: '#000',
     },
     time: {},
      profileImage: {
       width: 50,
      height: 50,
      borderRadius: 90,
   },
  });

>Solution :

🟢 Problem solved!

You need better understanding about react native styling, you can achive what you want with the following code fragment.

const ChatItem =  () => {
  return (<View style={{flexDirection: "row", width: '100%', backgroundColor: "lightgrey", padding: 8}}>
  <View style={{justifyContent:"center"}}>
    <Image style={{ width: 50, height: 50, borderRadius: 25 }} source={{uri:'https://reactnative.dev/img/logo-og.png'}} />
  </View>
  <View style={{flexDirection: "column", marginLeft: 8, flex: 1}}>
  <Text style={{ fontWeight: 700 }}>Username</Text>
  <Text style={{ fontWeight: 300 }}>Hello, Good Morning! This is the message sent by the user </Text>
  <Text style={{textAlign:"right", color: "grey", fontSize: 12}}>10:20 PM, Today</Text>
  </View>
  </View>);
};

This will look like,