CODEWITHSUNDEEP
react-nativereact-native-listviewreact-native-scrollview
SooCheng Koh
SooCheng Koh

Reputation: 2312

Horizontal scroll some part of ListView column

I want to horizontally scroll some part of a ListView in React Native.

How can I fix the position of first column and make other column horizontally scrollable?

Upvotes: 14

Views: 2060

Answers (1)

vijayst
vijayst

Reputation: 21826

The renderRow of ListView should have a Text followed by a horizontal ScrollView.

<ListView
dataSource={this.state.dataSource}
renderRow={this.renderRow}
/>

renderRow (rowData) {
  return (
  <View>
    <Text>rowData.field1</Text>
    <ScrollView horizontal={true}>
      <Text>rowData.field2</Text>
      <Text>rowData.field3</Text>
      <Text>rowData.field4</Text>
    </ScrollView>
  </View>
}

Note the horizontal=true prop in ScrollView which will make it happen.

Upvotes: 3

Related Questions