React Native Nested ScrollView Can`t Scroll on Android Device

Question

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

How to fix the issue about B scrollview cant scrolling ?

Answer 1

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

Answer 2

React-native ScrollView component uses Android ScrollView when you run app in android.

Android ScrollView doesn't support nested scrolling by default. You need to use NestedScrollView to achieve nested scrolling in android.

Answer 3

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>

Answer 4

In ScrollView, set style of contentContainerStyle to flex: 1:

<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 contentContainerStyle={{flex:1}}> // 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>

It worked for me on android. Let me know if it works for you please.

Answer 5

https://gist.github.com/ashrithks/8d97f928d92643468a26e29c4d2dbb67

try the above , expo link:- https://snack.expo.io/S11vIpHA-

hacky way