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>

39otrebla · Accepted Answer · 2018-08-20 16:14:42Z

85

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, 2018 at 16:14

39otrebla

1,4821 gold badge14 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Niloufar Over a year ago

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?

phsource Over a year ago

Nested horizontal ScrollViews are confirmed to not work on Android - see snack.expo.io/@harrytravelchime/827f87 for an example. In fact, this is a big problem even with the native components: stackoverflow.com/questions/44798354/…

T. Dayya Over a year ago

Dude, after 3 days of trying to get a scrollable drag-and-drop to work inside a ScrollView container, u just saved my life.

Rey Over a year ago

I wish I could upvote multiple times... thank you it works

jeadonara Over a year ago

It fixed, but I didn't understand how it worked as in doc it says by default it is true reactnative.dev/docs/scrollview#nestedscrollenabled-android

|

Mr. Strike · Accepted Answer · 2018-11-27 14:16:18Z

18

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

answered Nov 27, 2018 at 14:16

Mr. Strike

2392 silver badges5 bronze badges

Comments

Jickson · Accepted Answer · 2016-05-26 09:06:42Z

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, 2016 at 9:06

Jickson

5,1932 gold badges29 silver badges38 bronze badges

5 Comments

tommychoo Over a year ago

thanks, but how to use NestedScrollView in my react native case ?

tommychoo Over a year ago

Sorry, i still not understand about coustom native ui for android doc, would you like to explain more about my case ?

tommychoo Over a year ago

Is it can solve my case with using custom native ui NestedScrollView ? I dont know where to create custom viewManager class file.

Jickson Over a year ago

Try github.com/Neson/react-native-android-design-support/blob/…

user13101751 Over a year ago

This doesn't work for me. Could you take a look here? stackoverflow.com/questions/63437251/…

Ashrith K S · Accepted Answer · 2017-10-31 14:05:50Z

2

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

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

hacky way

answered Oct 31, 2017 at 14:05

Ashrith K S

4905 silver badges13 bronze badges

3 Comments

0x01Brain Over a year ago

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: snack.expo.io/SJYzbXGmV

Ashrith K S Over a year ago

@0x01Brain , use facebook.github.io/react-native/docs/0.57/… supported by react-native now

velkoon Over a year ago

@AshrithKS <ScrollView nestedScrollEnabled> worked 2022 thanks

Noitidart · Accepted Answer · 2018-03-23 22:51:55Z

0

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.

answered Mar 23, 2018 at 22:51

Noitidart

37.6k41 gold badges182 silver badges365 bronze badges

2 Comments

user13101751 Over a year ago

This doesn't work for me. Could you take a look here? stackoverflow.com/questions/63437251/…

Riddhi Over a year ago

Same here, It's not working for me.

Bilal Yaqoob · Accepted Answer · 2023-11-15 11:07:22Z

0

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>

edited Nov 15, 2023 at 11:07

answered Jun 18, 2023 at 10:00

Bilal Yaqoob

1,0273 gold badges13 silver badges31 bronze badges

1 Comment

cak3_lover Over a year ago

doesn't seem to work properly when the user touch is fast

Collectives™ on Stack Overflow

React Native Nested ScrollView Can`t Scroll on Android Device

6 Answers 6

8 Comments

Comments

5 Comments

3 Comments

2 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

8 Comments

Comments

5 Comments

3 Comments

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related