CODEWITHSUNDEEP
cssreact-nativereact-native-flatlist
sejn
sejn

Reputation: 2644

How to align the image and its text (character more than a line) below in a grid layout using react-native-flatlist

How to align the text below an image in a grid. I have shown the grid using react-native-flatlist. But the text below the image which is small in length is aligned center and working expected. But if the length is too long it shows in the entire grid and it hidden the next image to the right of the grid. How to show if the length is too long with in a line.

I used the below snippet and I need to show the text below the image as Contrary to popular belief, Lorem..

renderGridView(){
return (
    <View style={{flex:1}}>
          <FlatList
            ref={(ref) => { this.flatListRef = ref; }}
            data={data}
            renderItem={({ item }) => this.renderGrid(item)}
            numColumns={2}
            extraData={data}
            keyExtractor={item => item.id}
            onEndReached={this._handleMore}
            onEndReachedThreshold={0.001}
            ListFooterComponent={this._renderFooter}
          />
     </View>
    )
 }


renderGrid(item) {
    return(
      <TouchableOpacity activeOpacity = { .5 } >
        <View style={{backgroundColor: 'white', alignItems: 'center'}}>
          <Image style={{width: gridWidth, height: gridHeight}}
            resizeMode={'contain'}
            source={item.uri}/>
            <Text numberOfLines={1}style={{fontSize: 12,textAlign: 'center'}} ellipsizeMode="tail">Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words</Text>
          <Text numberOfLines={1}style={{fontSize: 12,textAlign: 'center'}} ellipsizeMode="tail">Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words</Text>
        </View>
      </TouchableOpacity>
    );
  }

Here If add like the above for the long number of character description it shows in center and the right hand side image get hidden in the right.

Any solution for this?

Upvotes: 0

Views: 325

Answers (1)

Raj Gohel
Raj Gohel

Reputation: 1102

Try this in your map or any loop for the grid:-

<View style={{alignItems: 'center'}}>

 <Image source={require('your path')} />

 <Text numberOfLines={1}style={{fontSize: 12}} 
 ellipsizeMode="tail">Contrary to popular belief, Lorem Ipsum is not simply 
 random text. It has roots in a piece of classical Latin literature from 45 
 BC, making it over 2000 years old. Richard McClintock, a Latin professor at 
 Hampden-Sydney College in Virginia, looked up one of the more obscure Latin 
 words</Text>

</View>

Upvotes: 2

Related Questions