React-native Listview inside Scrollview not scrolling in android

Question

In our React-native project, We have a screen which is having a parent Scrollview(with pull to refresh) and with in scrollview we have Listview (as chilld view).

In iOS we are able to scroll Scrollview(Parent) as well as Listview(child view).

But in android, We are not able to scroll the Child Listview. When we try to scroll the child Listview, The Parent view is getting scrolled. The child view is not getting the Touch.

Is this related to React-native issue? Can anyone tell me how to solve this issue?

Code snippet:

<ScrollView contentContainerStyle={styles.contentContainerStyle} refreshControl={this.getRefreshControl()}>
      <View> Some header </View>
      <MyComponent> </MyComponent>
      <ListView /* This list view is not scrolling in Android */
        dataSource={dataSource}
        initialListSize={10}
        renderRow={this.renderRow}
        renderSeparator={this.renderSeparator}/>
  </ScrollView>

Answer 1

You shouldn't put a ListView inside a ScrollView because the ListView class implements its own scrolling and it just doesn't receive gestures because they all are handled by the parent ScrollView. I strongly recommend you to simplify your layout somehow. For example you can add views you want to be scrolled to the ListView as headers or footers.

UPDATE:

Starting from API Level 21 (Lollipop) nested scroll containers are officially supported by Android SDK. There're a bunch of methods in View and ViewGroup classes which provide this functionality. To make nested scrolling work on the Lollipop you have to enable it for a child scroll view by adding android:nestedScrollingEnabled="true" to its XML declaration or by explicitly calling setNestedScrollingEnabled(true).

If you want to make nested scrolling work on pre-Lollipop devices, which you probably do, you have to use corresponding utility classes from the Support library. First you have to replace you ScrollView with NestedScrollView. The latter implements both NestedScrollingParent and NestedScrollingChild so it can be used as a parent or a child scroll container.

But ListView doesn't support nested scrolling, therefore you need to subclass it and implement NestedScrollingChild. Fortunately, the Support library provides NestedScrollingChildHelper class, so you just have to create an instance of this class and call its methods from the corresponding methods of your view class.