Search code examples
react-nativeflexboxreact-native-flexbox

Align list with image and two text components

I want to use a FlatList that will display an image and text that includes a name, a date, and a varying section of text. The simplified extracted code below will put the picture on the left like I want, and display the lines of text all conjoined to the right. That is mostly what I want, but I want one line with the name and date and another wrapping line with the text. Nothing I've tried works. How do I do this?

<View style={{flex:1, paddingTop:100}}>
  <View style={{flexDirection:'row', flexWrap:'wrap', alignItems:'flex-start'}}>
    <Image style={{width: 50, height: 50}} source={require('./assets/default.jpg')} />
    <Text style={{flex:1}}>
      <Text style={{fontWeight: "bold", fontSize: 16}}>Steve C</Text>
      <Text style={{color: 'grey', fontSize: 10}}>Dec 30 10:25 PM</Text>
      <Text style={{fontSize: 16}}>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</Text>
    </Text>           
  </View>
</View>

This results in the below.

enter image description here

Solution

  • You can do this in following way

    <View style={{ flex: 1, paddingTop: 100 }}>
    <View style={{ flexDirection: 'row'}}>
      <Image style={{ width: 50, height: 50 }} source={{ uri:'https://img12.androidappsapk.co/300/7/3/a/com.profile.admires_stalkers_unknown.png'}}/>
      <View style={{ flex: 1 }}>
        <View style={{ flexDirection: 'row' }}>
          <Text style={{ fontWeight: "bold", fontSize: 16 }}>Steve C</Text>
          <Text style={{ color: 'grey', fontSize: 10}}>Dec 30 10:25 PM</Text>
        </View>
        <View>
          <Text style={{ fontSize: 16, flexWrap: 'wrap' }}>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</Text>
        </View>
      </View>
    </View>
  </View>

    Working example : https://codesandbox.io/embed/6nwv118zz3