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>

i think ur listview is small . Try setting flex: 1 or height: 587 on your ListView's style property. — Prashant pattar, Apr 28 '17 at 10:14
Check out this response: [Make Nested ScrollViews Scrollable](https://stackoverflow.com/a/53501692/10371717) — Mr. Strike, Dec 07 '18 at 09:50

score 0 · Answer 1 · answered Apr 28 '17 at 09:58

I've done a ListView which is scrollable 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's fully scrollable even if you add some rows =) (My rows are created with a JSon File, with the Row.js)

Enjoy !

I have also same code almost. But it is working only on iOS. Did you check the code in Android? — Tutu, Apr 28 '17 at 10:10
If i remove refreshControl property from the scrollview. It is working form me also. But it is not working with RefreshControl which is used for pull to refresh functionality. The one missing in ur code RefreshControl. — Tutu, Apr 28 '17 at 11:55

score -1 · Answer 2 · answered Apr 28 '17 at 10:18

-1

i think ur listview is small . Try setting flex: 1 or height: 587 on your ListView's style property. –

answered Apr 28 '17 at 10:18

Prashant pattar

29
9

score -1 · Answer 3 · answered Apr 28 '17 at 10:34

-1

Both listview and scrollview touch events are conflicting.

Try using below code in your fragment/activity

listview.setOnTouchListener(new OnTouchListener() {

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

answered Apr 28 '17 at 10:34

Raghu Nagaraju

3,278
1
18
25

This is what happening exactly. But where we need to add this code in react-native android project ? – Tutu Apr 28 '17 at 11:27
Dear Tutu, did you find out where to put this code in react native? – Niloufar Aug 19 '19 at 12:34

score -1 · Answer 4 · answered Sep 27 '21 at 07:02

-1

You need to set nestedScrollEnabled = true for ListView.

answered Sep 27 '21 at 07:02

thieumao

9
3

React-native Listview inside Scrollview not scrolling in android

4 Answers4