ScrollView does not work inside position: absolute on Android.

[mirekuhlir]

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(R) Core(TM) 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

[github-actions[bot]]

:warning:

Newer Version of React Native is Available!

:information_source:

You are on a supported minor version, but it looks like there's a newer patch available - 0.71.12. Please upgrade to the highest patch for your minor or latest and verify if the issue persists (alternatively, create a new project and repro the issue in it). If it does not repro, please let us know so we can close out this issue. This helps us ensure we are looking at issues that still exist in the most recent releases.

[mirekuhlir]

Is this a bug or do I need to adjust something else?

[ponikar]

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

[ovgamesdev]

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

[SorenHK]

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

[Dhiraj-j]

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

[caioedut]

+1

[TierryBr]

The problem remains whether importing from react-native-gesture-handler or react native. Does anyone have any solution?

[Nsquik]

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

[Meegan]

Can also report this problem, same issue with react-native-gesture-handler and react-native. Wondering if it's related to https://github.com/facebook/react-native/issues/27333 ?

[fabOnReact]

I'm organizing my next tasks. Are you still interested in adopting a fix for this issue? Or have you already implemented a workaround? If you are interested, I will work on a solution. Thanks

[fabOnReact]

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

it will not work on gesture handler on iOS

[HarwinBorger]

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.

[hlspablo]

having the same issue on the react 0.73.4 too

[prometixX]

I have the same issue on Expo 50.0 and React Native 0.73.4 too.

[endrits079]

Same issue on react native 0.72.3, importing from gesture handler fixes the issue if using outside of modal, but not inside modal

[yehonadav]

"react-native": "0.73.6",
"expo": "~50.0.14",

i have an absolute component that takes the entire screen, inside it there's a working scrollview, in one of the scrollview's children, there's another component thats absolute and needs a scrollview, but scrollview does not work

[OscarMpy]

After messing around with different combinations, it seems like position absolute does work with both ScrollView and FlatList on Android, what was causing issues for me were the following reasons:

1. A higher parent view of the component had a higher zIndex/elevation than the parent view of the scroll view.

2. Using Animated.View on a parent component.

3. Having nested ScrollViews and not using nestedScrollEnabled={true}.

https://snack.expo.dev/@oscar3812/dropdownlist

Notice how if you remove the position: absolute styles from the list none of these affect the scrolling of the list.

Now for the issue that @mirekuhlir posted, I think it's not the position: absolute what is directly causing the problem but rather the way the two parent views are being used along with the heights, but I am not sure.