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

https://snack.expo.dev/3enX3_UHW

About this issue

Original URL
State: open
Created a year ago
Reactions: 5
Comments: 17 (2 by maintainers)

Most upvoted comments

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

+46

SorenHK on Aug 28, 2023

I’m still not able to fix please someone help.

Dhiraj-j on Nov 3, 2023

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.

HarwinBorger on Jan 30, 2024

@SorenHK this actually solves the problem, thank you ❤️

Nsquik on Jan 2, 2024

I think in absolute scrollView you can scroll only in the part that is in overflow: “hidden” this will work

<View style={{ position: 'absolute', top: 0, right: 0, overflow: "hidden", width: 100, maxHeight: 50 }}>
    <ScrollView>{list}</ScrollView>
</View>

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

ovgamesdev on Aug 9, 2023

Can you make sure that you are importing ScrollView from react native and not from react-native-gesture-handler?

ponikar on Aug 8, 2023