react-native: nestedScrollEnabled prop not working in ScrollView (Android) with horizontal direction
- Review the documentation: https://facebook.github.io/react-native
- Search for existing issues: https://github.com/facebook/react-native/issues
- Use the latest React Native release: https://github.com/facebook/react-native/releases
Environment
Binaries: npm: 5.6.0 - C:\Program Files\nodejs\npm.CMD IDEs: Android Studio: Version 3.1.0.0 AI-173.4907809 Package: “react”: “16.5.0”, “react-native”: “0.57.1”, Device Info: Android Version: 5.0.2 LRX22G
Description
I think nestedScrollEnabled prop for ScrollView only work in vertical. I don’t know what’s wrong in my code or something else. Just change little bit in height and width length and add/remove nestedScrollEnabled. Could anyone help me in this issue.
Reproducible Demo
VERTICAL
<ScrollView >
<View style={{ backgroundColor: 'red', borderRightColor: 'white', borderWidth: 3, width: 500, height: 500 }}>
<View style={{ borderWidth: 2, borderColor: 'blue', backgroundColor: 'yellow', width: 100, height: 300 }}>
<ScrollView nestedScrollEnabled>
<View style={{ borderWidth: 3, borderColor: 'black', backgroundColor: 'purple', width: 100, height: 100 }} />
<View style={{ borderWidth: 3, borderColor: 'black', backgroundColor: 'purple', width: 100, height: 100 }} />
<View style={{ borderWidth: 3, borderColor: 'black', backgroundColor: 'purple', width: 100, height: 100 }} />
<View style={{ borderWidth: 3, borderColor: 'black', backgroundColor: 'purple', width: 100, height: 100 }} />
<View style={{ borderWidth: 3, borderColor: 'black', backgroundColor: 'purple', width: 100, height: 100 }} />
</ScrollView>
</View>
</View>
<View style={{ backgroundColor: 'red', borderRightColor: 'white', borderWidth: 3, width: 500, height: 500 }}>
<View style={{ borderWidth: 2, borderColor: 'blue', backgroundColor: 'yellow', width: 100, height: 300 }}>
<ScrollView nestedScrollEnabled>
<View style={{ borderWidth: 3, borderColor: 'black', backgroundColor: 'purple', width: 100, height: 100 }} />
<View style={{ borderWidth: 3, borderColor: 'black', backgroundColor: 'purple', width: 100, height: 100 }} />
<View style={{ borderWidth: 3, borderColor: 'black', backgroundColor: 'purple', width: 100, height: 100 }} />
<View style={{ borderWidth: 3, borderColor: 'black', backgroundColor: 'purple', width: 100, height: 100 }} />
<View style={{ borderWidth: 3, borderColor: 'black', backgroundColor: 'purple', width: 100, height: 100 }} />
</ScrollView>
</View>
</View>
</ScrollView>
HORIZONTAL
<ScrollView horizontal>
<View style={{backgroundColor: 'red',borderRightColor: 'white', borderWidth: 3, width: 500, height: 500}}>
<View style={{ borderWidth: 2, borderColor: 'blue', backgroundColor: 'yellow', width: 300, height: 100 }}>
<ScrollView horizontal nestedScrollEnabled>
<View style={{ borderWidth: 3, borderColor: 'black', backgroundColor: 'purple', width: 100, height: 100 }} />
<View style={{ borderWidth: 3, borderColor: 'black', backgroundColor: 'purple', width: 100, height: 100 }} />
<View style={{ borderWidth: 3, borderColor: 'black', backgroundColor: 'purple', width: 100, height: 100 }} />
<View style={{ borderWidth: 3, borderColor: 'black', backgroundColor: 'purple', width: 100, height: 100 }} />
<View style={{ borderWidth: 3, borderColor: 'black', backgroundColor: 'purple', width: 100, height: 100 }} />
</ScrollView>
</View>
</View>
<View style={{backgroundColor: 'red',borderRightColor: 'white', borderWidth: 3, width: 500, height: 500}}>
<View style={{ borderWidth: 2, borderColor: 'blue', backgroundColor: 'yellow', width: 300, height: 100 }}>
<ScrollView horizontal nestedScrollEnabled>
<View style={{ borderWidth: 3, borderColor: 'black', backgroundColor: 'purple', width: 100, height: 100 }} />
<View style={{ borderWidth: 3, borderColor: 'black', backgroundColor: 'purple', width: 100, height: 100 }} />
<View style={{ borderWidth: 3, borderColor: 'black', backgroundColor: 'purple', width: 100, height: 100 }} />
<View style={{ borderWidth: 3, borderColor: 'black', backgroundColor: 'purple', width: 100, height: 100 }} />
<View style={{ borderWidth: 3, borderColor: 'black', backgroundColor: 'purple', width: 100, height: 100 }} />
</ScrollView>
</View>
</View>
</ScrollView>
About this issue
- Original URL
- State: open
- Created 6 years ago
- Reactions: 15
- Comments: 67 (12 by maintainers)
Commits related to this issue
- [Android] Fix nested horizontal scroll not working https://github.com/facebook/react-native/issues/21436\#issuecomment-539415308 — committed to khadorkin/devhub by brunolemos 5 years ago
- fix: android nested scrollview Resolves #21436 — committed to dincozdemir/react-native by dincozdemir 3 years ago
I found an easy workaround!
If we use the
ScrollView
fromreact-native-gesture-handler
everything works as expected.You can have nested horizontal
FlatList
s like this:Updated the snack with this workaround: https://snack.expo.io/@brunolemos/nested-scrollview
</div>Maybe someone can check what
react-native-gesture-handle
is doing and bring the same workaround to the core ofreact-native
.Just bumping in here to show people are still waiting for this fix. Can we get some maintainers to review this PR and get the fix in already.
Confirm, I have the same issue with nested horizontal scrolling. Please reopen, environment info added.
Anyone? I believe it’s a bug.
on all the scrollviews add prop nestedScrollEnabled, including the nested scrollview!
I mean shouldn’t this issue be fixed in react-native core? The solution can’t be just use a ScrollView from a different library.
Oh No. I’m facing this as well. Nested horizontal scrollviews doesn’t work on Android.
nestedScrollEnabled
has no effect in this case. Still happening on react-native 0.61.I made this Snack with a reproduction: https://snack.expo.io/@brunolemos/nested-scrollview
<div> </div>See full code
Having the same issue. nestedScrollEnabled property works fine for vertical/vertical or vertical/horizontal (and vice versa) but seems to have no effect for nested horizontal scrollviews inside of another horizontal scrollview. However, i found some kind of workaround for this. This is a bit hacky and does not work perfectly, as you have to actually drag the inner view, but it works. You can capture the onTouchStart, onTouchEnd and onTouchCancel Events of the inner scrollview and set scrollEnabled on the outer scrollview to true or false correspondingly.
@smm76 i tried, but the problem persists.
I have the same problem. This has been tested both on Expo and a standalone React Native app, both in appetize emulator and on a Xiaomi Pocophone F1. Same behavior, no horizontal nested scrolling on Android, but works great on iOS
Code here https://snack.expo.io/@esbenvb/scrollview-tests
Android behavior https://vimeo.com/322265966
iOS behavior https://vimeo.com/322266040
@fabriziobertoglio1987 there was no problem, I just closed it as there was no interest from maintainers 😄 Feel free to resurrect the PR on your own if you think it’s worth the effort.
@scousino relooking at this 100% agree. Thanks for flagging. It should be fixed in core.
For the brave hearts who fight with this issue, here’s my workaround.
I have a horizontal
<FlatList />
(parent) and a horizontal<ScrollView />
(child).On my inner
ScrollView
(child) I am disabling the<FlatList />
(parent) scrollonTouchStart
and I am enabling it backonScrollEndDrag
, similarly like @smm76 suggested. But additionally, I’m doing this throttle magic, which kind of solves all the little edge cases when the user doesn’t immediately start dragging.@zhongwuzw , can you please re-open this issue or please tell any other collaborator to re-open it, since the @react-native-bot closed it.
For the ScrollViews to work as expected, nested or otherwise, you need to specify their boundaries. Boundaries are set in “style” property of the ScrollViews.
I re-opened the PR with the permission of @isnotgood
I have tried to use ScrollView from
react-native-gesture-handler
and adddisableIntervalMomentum
props, then it worked!Encountering the same problem in react native 0.66.4. Any fix planned?
Need to fix nested horizontal scroll on Android in the core.
ScrollView
fromreact-native-gesture-handler
works perfect!Appreciate the solution! This issue is a bit dated, if anyone still has this issue and none of these solutions work, feel free to open a new issue.
same here
@brunolemos the scroll is working but when the child’s scrollview reach end the parent’s scroll will not fire. You can see it in your expo example also!
Same problem for me, with:
And when you try to scroll the child horizontally it scrolls the parent 😦
I just upgrade RN version to 0.73.1 and checked, but still horizontal doesn’t work for the nested ScrollView in my code. Anyone has found it works horizontally?
i found this problem when we use nested scrollView to prevent horizontal or vertical scroll error but its doesnt work in android .so i make it like this (sry for my english )
Same here, this worked for me.
@brunolemos your solution is working on snack but it is not working on emulator or real devices
.
@andreicoman11 @makovkastar @aamalric @astreet I checked the file blame and noticed you contributed a lot to the ReactHorizontalScrollView.java file. I was wondering (hoping) if you have any insight of what could be causing the issue above and what the fix could look like?