Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

React Native Nested ScrollView Can`t Scroll on Android Device

I have the problem about nested scrollview on Android Device, but IOS OK

How to fix the issue about B scrollview cant scrolling ?

<ScrollView>  // A ScrollView
    <View><Text>Hello</Text></View> 
    <View><Text>Hello</Text></View> 
    <View><Text>Hello</Text></View> 
    <View><Text>Hello</Text></View> 
    <View>       
        <ScrollView> // B ScrollView
            <View><Text>Hello</Text></View>         
            <View><Text>Hello</Text></View>         
            <View><Text>Hello</Text></View>          
            <View><Text>Hello</Text></View>      
        </ScrollView> 
    </View>
</ScrollView>
like image 283
tommychoo Avatar asked May 26 '16 08:05

tommychoo


People also ask

Why ScrollView is not scrolling in Android react native?

To fix ScrollView Not scrolling with React Native, we wrap the content of the ScrollView with the ScrollView. to wrap ScrollView around the Text components that we render inside. As a result, we should see text inside and we can scroll up and down.

How do I enable nested ScrollView in react native?

Add "nestedScrollEnabled={true}" property to the internal ScrollView and it will work as expected.

What is nestedScrollEnabled?

Nested scrolling is enabled by default. Wich means: NestedScrollView is when you need a scrollView inside another scrollView. This is enable by default on newer versions of android, and all IOS versions, but you can set this to true and it will works on everything.


1 Answers

If API 21 as minimum target is an option, you could upgrade to react-native 0.56.x and try the new prop nestedScrollEnabled.

Note: it is meant to be used in the child scrollview, i.e.

<ScrollView {...parentProps}>
  <ScrollView {...childProps} nestedScrollEnabled={true}>
  </ScrollView>
</ScrollView>
like image 94
Alberto Dallaporta Avatar answered Sep 28 '22 04:09

Alberto Dallaporta