How to do an Horizontal ListView, or FlatList in react-native

G Clovs picture G Clovs · Feb 15, 2017 · Viewed 31.3k times · Source

I'm searching a way to make an horizontal ListView or FlatList In React-native. like the image below: https://i.stack.imgur.com/D4RA5.jpg

I tried to managed it with Flex but it's make me stranges results, and always with a vertical ListView

If you got any idea, let me know.

Regards,

Answer

G Clovs picture G Clovs · Feb 15, 2017

The answer is to add the horizontal property set to true.

Yeah it's not described in the doc: https://facebook.github.io/react-native/docs/listview.html

So obviously a ListView is a Child of a ScrollView so he got the Horizontal Bool.

<ListView
    horizontal={true}
    style={{flex:1}}
    dataSource={this.state.dataSource}
    renderRow={(data) => <Row {...data} />}
/>

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

Ciao