Horizontal scroll some part of ListView column

Question

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?

Caprification

Answer 1

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.

Ultramarine

this would make each row have its own horizontal scroll, I would like to horizontally scroll all the row at the same time – Caprification

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. – Ultramarine

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 – Caprification