react-native: ScrollView does not work inside position: absolute on Android.
Description
ScrollView does not work inside position: absolute on Android. Scrolling works on iOS.
React Native Version
0.71.11
Output of npx react-native info
System: OS: macOS 12.6.4 CPU: (12) x64 Intel® Core™ i7-9750H CPU @ 2.60GHz Memory: 131.35 MB / 16.00 GB Shell: 5.8.1 - /bin/zsh Binaries: Node: 16.14.0 - ~/.nvm/versions/node/v16.14.0/bin/node Yarn: 1.22.17 - /usr/local/bin/yarn npm: 8.5.0 - ~/.nvm/versions/node/v16.14.0/bin/npm Watchman: 2023.04.03.00 - /usr/local/bin/watchman Managers: CocoaPods: 1.12.1 - /usr/local/bin/pod SDKs: iOS SDK: Platforms: DriverKit 22.2, iOS 16.2, macOS 13.1, tvOS 16.1, watchOS 9.1 Android SDK: Not Found IDEs: Android Studio: 2022.1 AI-221.6008.13.2211.9514443 Xcode: 14.2/14C18 - /usr/bin/xcodebuild Languages: Java: 19.0.2 - /usr/bin/javac npmPackages: @react-native-community/cli: Not Found react: 18.2.0 => 18.2.0 react-native: 0.71.11 => 0.71.11 react-native-macos: Not Found npmGlobalPackages: react-native: Not Found
Steps to reproduce
ScrollView does not work inside position: absolute on Android. Scrolling works on iOS.
<View style={{ height: 300, paddingTop: 100 }}>
<View
style={{
position: 'relative',
height: 40,
borderColor: 'red',
borderWidth: 1,
}}>
<View
style={{
height: 60,
position: 'absolute',
width: '100%',
borderColor: 'green',
borderWidth: 1,
zIndex: 1000,
elevation: 1000,
}}>
<ScrollView>
<Text>1</Text>
<Text>2</Text>
<Text>3</Text>
<Text>4</Text>
<Text>5</Text>
<Text>6</Text>
</ScrollView>
</View>
</View>
</View>
Snack, screenshot, or link to a repository
About this issue
- Original URL
- State: open
- Created a year ago
- Reactions: 5
- Comments: 17 (2 by maintainers)
If anyone else is having this issue (like me), then using react-native-gesture-handler instead actually seems to fix the issue.
In your imports remove ScrollView and instead import:
import { ScrollView } from 'react-native-gesture-handler';
I’m still not able to fix please someone help.
The solution provided by @SorenHK (
import { ScrollView } from 'react-native-gesture-handler';
) is working as a work-around, but it doesn’t solve the original problem. A fix is still required to solve this problem.@SorenHK this actually solves the problem, thank you ❤️
I think in absolute scrollView you can scroll only in the part that is in overflow: “hidden” this will work
but it takes away the advantage of absolute.
I fixed this for my project via Modal here is an example https://snack.expo.dev/@eristoddle/react-native-select-dropdown
Can you make sure that you are importing
ScrollView
from react native and not from react-native-gesture-handler?