Touch events on the content are not being captured on Android when zIndex is overridden

Preview

As you can see, the touch event is going to the map in the background and not the bottom sheet content. I have to use two-finger gesture in order to interact with the bottom sheet content on Android.

What I tried but didn’t work

• I tried using RNGH.SrollView instead of RN ScrollView.
• I also tried using just a View.
• I’ve tried adding the following props to RNGH.ScrollView: enabled={true} and disallowInterruption={true}
• I’ve added:

onScroll={event => {
          console.log(event.nativeEvent);
        }}

and confirmed that trying to scroll with a single finger doesn’t even call this function but two-finger touch calls it sometimes.

Example Code

<View>
 	<MapView ... />
	<BottomSheet
          enabledInnerScrolling={true}
          enabledGestureInteraction={true}
          overdragResistanceFactor={0}
          snapPoints={[
            Dimensions.get('window').height / 2.275,
            Dimensions.get('window').height / 3,
            83,
          ]}
          initialSnap={1}
          renderContent={() =>
            return <View>... (doesn't matter what I put here)</View>
          }
          renderHeader={() => <View>... (doesn't matter what I put here)</View>}
        />
</View>

Environments

  React Native Environment Info:
    System:
      OS: macOS 10.14.2
      CPU: x64 Intel(R) Core(TM) i7-7820HQ CPU @ 2.90GHz
      Memory: 604.60 MB / 16.00 GB
      Shell: 5.3 - /bin/zsh
    Binaries:
      Node: 8.12.0 - ~/.nvm/versions/node/v8.12.0/bin/node
      Yarn: 1.6.0 - /usr/local/bin/yarn
      npm: 6.4.1 - ~/.nvm/versions/node/v8.12.0/bin/npm
      Watchman: 4.9.0 - /usr/local/bin/watchman
    SDKs:
      iOS SDK:
        Platforms: iOS 12.1, macOS 10.14, tvOS 12.1, watchOS 5.1
      Android SDK:
        Build Tools: 26.0.3, 27.0.3, 28.0.2, 28.0.3
        API Levels: 21, 22, 23, 24, 25, 26, 27
    IDEs:
      Android Studio: 3.1 AI-173.4907809
      Xcode: 10.1/10B61 - /usr/bin/xcodebuild
    npmPackages:
      react: 16.6.3 => 16.6.3 
      react-native: 0.57.8 => 0.57.8 
    npmGlobalPackages:
      react-native-log-ios: 1.0.1

Dependencies

Tested it on multiple Android phones/versions: Android 8.1 and Android 5.1

"react-native-gesture-handler": "^1.1.0",
"react-native-reanimated": "^1.0.0-alpha.12",
"reanimated-bottom-sheet": "^1.0.0-alpha.1",

@osdnk Any workarounds/ideas I can try?

Thanks

[cesar3030]

I’m having a lot of trouble with BottomSheet and user touch events on Android.

I’ve a BottomSheet that renders as content a ScrollView. I was able to have the vertical scroll of that ScrollView working after adding a zIndex > 100 as said in the above answers. My vertical Scrollview as multiple views as child as well as another scrollView which allows the user to scroll horizontally through a list of pictures. Even after adding a zIndex > 100 for this horizontal scrollView, i could not scroll horizontally.

In order to have both ScrollView working, I had to import them from

import { ScrollView } from 'react-native-gesture-handler';

Instead of:

import { ScrollView } from 'react-native';

Not 100% related to this issue but It might help someone…

[Eyesonly88]

Yep, so I found the root cause.

Here’s a snack to reproduce the issue: https://snack.expo.io/@mido/bottom-sheet-with-maps-android

Overriding the zIndex for bottomSheet breaks it on Android.

If someone wants a component to appear above the bottomSheet, then you must set a zIndex higher than 100 on the component.