CODEWITHSUNDEEP
javascriptcssnode.jsreactjsreact-native
slowking
slowking

Reputation: 61

Arrange images in Horizontal - React Native - Flex not working

I am here trying to arrange the images horizontally next to each other and later convert it to the slider. But until I set them in a row, which is not happening for me. Need help Below is the code:

Style - 

 profileImgContainer: {

    marginLeft: 8,
    height: 80,
    width: 80,
    borderRadius: 40,
    overflow: 'hidden',
  },
  profileImg: {
    flex: 1,
    flexDirection: 'row',
    height: 80,
    width: 80,
    borderRadius: 40,
  },

Component -

<FlatList
               data={this.state.Products}
               keyExtractor={(item, index) => index.toString()} 
               renderItem= { ({item}) => (
                <TouchableHighlight
                style={[styles.profileImgContainer, { borderColor: 'green', borderWidth:1 }]}>
                <Image source={{ uri: item.url }} style={styles.profileImg} />
                </TouchableHighlight>
               )}
               />

It is currently appearing like this.

enter image description here

Upvotes: 0

Views: 1069

Answers (2)

Karan Mehta
Karan Mehta

Reputation: 1541

Try something like this : 

<FlatList
    horizontal
    data={this.props.data}
    extraData={this.state}
    keyExtractor={this._keyExtractor}
    renderItem={this._renderItem}
/>

Just add this property to your flatlist : 

horizontal

Upvotes: 3

Gaurav Roy
Gaurav Roy

Reputation: 12210

You are missing the horizontal property of Flat list , Just replace your code with this :

<FlatList
    data={this.props.data}
    extraData={this.state}
    keyExtractor={this._keyExtractor}
    renderItem={this._renderItem}
    horizontal
/>

Hope it helps .feel free for doubts

Upvotes: 2

Related Questions