CODEWITHSUNDEEP
javascriptreactjsreact-native
tommychoo
tommychoo

Reputation: 663

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>

Upvotes: 28

Views: 50627

Answers (6)

Bilal Yaqoob
Bilal Yaqoob

Reputation: 1007

I was also facing the same issue, I had verticle scroll and inside verticle scroll. I made a state and give the scrollEnabled to the outer scrollview and inside added the onTouchStart,onTouchEnd and onTouchCancel functions and change the state of the outer scroll to false so I can easily scroll. you can also try the same approach with ref

const [scroll, setScroll] = useState(true);

<ScrollView scrollEnabled={scroll}>
  ... other components
 <ScrollView 
  onTouchStart={ => setScroll(false)}
  onTouchEnd={ => setScroll(true)}
  onTouchCancel={ => setScroll(true)}
 >
 ... inside other components
 </ScrollView>
 ... other components 
</ScrollView>

Upvotes: 0

Mr. Strike
Mr. Strike

Reputation: 239

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

Upvotes: 18

39otrebla
39otrebla

Reputation: 1452

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>

Upvotes: 82

Noitidart
Noitidart

Reputation: 37328

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.

Upvotes: 0

Ashrith K S
Ashrith K S

Reputation: 490

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

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

hacky way

Upvotes: 2

Jickson
Jickson

Reputation: 5193

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.

Upvotes: 3

Related Questions