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 ?

<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>

score 76 · Answer 1 · answered Aug 20 '18 at 16:14

76

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>

answered Aug 20 '18 at 16:14

Alberto Dallaporta

1,382
1
11
23

1

Dear Alberto, I have a horizontal ScrollView which contains another horizontal scrollView, I've tried your solution but it doesn't work on android. Any idea? – Niloufar Aug 19 '19 at 13:53
2

Nested horizontal ScrollViews are confirmed to not work on Android - see https://snack.expo.io/@harrytravelchime/827f87 for an example. In fact, this is a big problem even with the native components: https://stackoverflow.com/questions/44798354/android-nestedscrollview-how-to-make-it-horizontal/44798533 – phsource Aug 31 '19 at 00:02
1

Dude, after 3 days of trying to get a scrollable drag-and-drop to work inside a ScrollView container, u just saved my life. – T. Dayya Nov 20 '19 at 13:29
1

I wish I could upvote multiple times... thank you it works – Nald Dev Jan 03 '20 at 02:05
It fixed, but I didn't understand how it worked as in doc it says by default it is true https://reactnative.dev/docs/scrollview#nestedscrollenabled-android – jeadonara Apr 12 '22 at 11:49
`nestedScrollEnabled` is veryyyy janky in my experience. It just doesn't work well. React Native does a poor job deciding which view should be scrolled when the user pans their finger, sometimes it will scroll the outer view when it feels like it shouldn't, sometimes it will scroll in the inner view. The best thing to do is import the scroll view from "react-native-gesture-handler", works wayyy better on android in my experience. – ICW Jun 01 '22 at 13:50
Doesnt work for me – Julius Goddard Feb 10 '23 at 12:28

score 18 · Answer 2 · answered Nov 27 '18 at 14:16

18

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

answered Nov 27 '18 at 14:16

Mr. Strike

229
2
5

score 3 · Answer 3 · answered May 26 '16 at 09:06

3

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.

answered May 26 '16 at 09:06

Jickson

5,133
2
27
38

3

thanks, but how to use NestedScrollView in my react native case ? – tommychoo May 26 '16 at 09:40
Sorry, i still not understand about coustom native ui for android doc, would you like to explain more about my case ? – tommychoo May 26 '16 at 11:59
Is it can solve my case with using custom native ui NestedScrollView ? I dont know where to create custom viewManager class file. – tommychoo May 26 '16 at 12:14
Try https://github.com/Neson/react-native-android-design-support/blob/master/lib/NestedScrollViewAndroid.js – Jickson May 26 '16 at 12:22
This doesn't work for me. Could you take a look here? https://stackoverflow.com/questions/63437251/unable-to-scroll-in-scrollview – Aug 19 '20 at 16:18

score 2 · Answer 4 · answered Oct 31 '17 at 14:05

2

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

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

hacky way

answered Oct 31 '17 at 14:05

Ashrith K S

490
5
13

Your way works, but there is a problem when setting the wrapper view that wraps the nested scrollview to flex view and changing the height of the nested scrollview to 700 or any height that would show in fullscreen only the nested view and scroll all the end of the scrollview you will not scroll up again. You can see edited code: https://snack.expo.io/SJYzbXGmV – 0x01Brain Jan 20 '19 at 16:27
2

@0x01Brain , use https://facebook.github.io/react-native/docs/0.57/scrollview#nestedscrollenabled supported by react-native now – Ashrith K S Jan 31 '19 at 06:20
@AshrithKS `` worked 2022 thanks – velkoon Nov 04 '22 at 18:10

score 0 · Answer 5 · answered Mar 23 '18 at 22:51

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.

This doesn't work for me. Could you take a look here? https://stackoverflow.com/questions/63437251/unable-to-scroll-in-scrollview — , Aug 19 '20 at 16:18

score 0 · Answer 6 · answered Jun 18 '23 at 10:00

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.

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>

doesn't seem to work properly when the user touch is fast – cak3_lover Aug 07 '23 at 17:23 — cak3_lover, Aug 07 '23 at 17:23

React Native Nested ScrollView Can`t Scroll on Android Device

6 Answers6

Linked