React-native Listview inside Scrollview, not scrolling in android

Question

In our React-native project, we have a screen that has a parent Scrollview (with pull to update), and with scrollview we have a Listview (like a chilld view).

In iOS, we can scroll through the Scrollview (Parent) as well as the Listview (child view).

But in android, we cannot scroll through the Child Listview. When we try to scroll the child listview, the Parent view gets a scroll. The child does not receive Touch.

Is this related to the React-native issue? Can someone tell me how to solve this problem?

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 should not put a ListView inside a ScrollView, because the ListView class implements its own scrolling, and it just does not accept gestures, because they are all handled by the parent ScrollView. I highly recommend that you simplify your layout somehow. For example, you can add the views that you want to scroll in the ListView as headers or footers.

UPDATE:

Starting with API Level 21 (Lollipop), nested scroll containers are officially supported by the Android SDK. There are many methods in the View and ViewGroup classes that provide this function. To do nested scrolling on Lollipop, you must enable it to view the detailed scrolling by adding android: nestedScrollingEnabled = "true" in your XML declaration or by explicitly calling setNestedScrollingEnabled (true).

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

But ListView does not support nested scrolling, so you need to subclass it and implement NestedScrollingChild. Fortunately, the support library provides the NestedScrollingChildHelper class, so you just need to instantiate this class and call its methods from the corresponding methods of your view class.

Answer 2

I made a ListView that scrolls if you want!

ListBillScreen.js

 export default class ListBillScreen extends React.Component{ /*Constructor*/ render() { return ( <ScrollView style = {styles.container}> <View style ={styles.header}> <Text style = {styles.textHeader}> Title</Text> </View> <ListView style={styles.listView} dataSource={this.state.dataSource} renderRow={(data) => <Row {...data} navigator={this.props.navigator} />} renderSeparator={(sectionId, rowId) => <View key={rowId} style= {styles.separator} />} /> <AndroidBackButton onPress={this.popIfExists.bind(this)} /> </ScrollView> ); 

}}

Styles

 import { StyleSheet } from 'react-native' import { Colors, Metrics } from '../../Themes' export default StyleSheet.create({ container: { paddingTop: 20, backgroundColor: Colors.background }, separator: { height: StyleSheet.hairlineWidth, backgroundColor: '#8E8E8E', }, textHeader: { color: Colors.steel, textAlign: 'center', }, image: { height:64, width: 64, }, listView: { paddingTop: 10, paddingBottom: 20 }, actionButtonIcon: { fontSize: 20, height: 22, color: 'white', }, }) 

It scrolls completely even if you add a few lines =) (My lines are created using a JSon file with Row.js )

Enjoy it!

Answer 3

Both listview and scrollview view events conflict.

Try using the code below in your snippet / activity

 listview.setOnTouchListener(new OnTouchListener() { @Override public boolean onTouch(View v, MotionEvent event) { v.getParent().requestDisallowInterceptTouchEvent(true); return false; } }); 

Answer 4

Try this, the scrollview inside the scroll will scroll

https://snack.expo.io/rk93R9BCW

Answer 5

I think the ur list is small. Try setting flex: 1 or height: 587 to your ListView style. -