14

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?

SooCheng Koh
  • 2,271
  • 3
  • 21
  • 34

1 Answers1

3

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.

vijayst
  • 20,359
  • 18
  • 69
  • 113
  • 1
    this would make each row have its own horizontal scroll, I would like to horizontally scroll all the row at the same time – SooCheng Koh Aug 24 '16 at 06:30
  • 1
    Might have to split into two ListViews and adjust row height appropriately. The second ListView should be embedded in a horizontal ScrollView. If the component needs to be reusable, should be building a NativeModule. – vijayst Aug 24 '16 at 09:03
  • I tried to split into two ListView, but the onScrollChange event of the ListView is throttled causing the scroll of both ListView is not synced – SooCheng Koh Aug 29 '16 at 05:42