React-native-reanimated-bottom-sheet: Touch events on the content are not being captured on Android when zIndex is overridden

[Eyesonly88]

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

[roshangm1]

Can you make the snack out of it so that we can test this exact code easily ? Also, is this behavior working fine in iOS ?

[Eyesonly88]

@roshangm1 Yes, it's working fine on iOS. You can also see that it works with the two-finger gesture just not the usual single tap. I'll try to make a snack to repro this.

Any ideas on why it's happening though? or other things I can try?

[roshangm1]

Hmm. I am not being able to reproduce this in my implementation. I am testing on Nexus 5X simulator. I will wait for your snack to test this further. :) @Eyesonly88

[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.

[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...

[sebqq]

I have a problem using react-native-reanimated lib when I want to perfom animation based on onScroll event of horizontal Animated.ScrollView on Android. The ScrollView from Reanimated cannot be scrolled horizontally

My code looks like:

<Animated.ScrollView
    style={styles.scrollContainer}
    onScroll={onScroll({ x: sliderX })} // onScroll from react-native-redash
    horizontal
>
    {data.map(item => renderData(item))}
</Animated.ScrollView>

[sebqq]

I think I've found something. If you need to use horizontal ScrollView from Reanimated inside of BottomSheet then for me is working following code...

First I create AnimatedScrollView from RNGH ScrollView like this:

import Animated from “react-native-reanimated”;
import { ScrollView } from "react-native-gesture-handler";

const AnimatedScrollView = Animated.createAnimatedComponent(ScrollView);

Then I use it like regular Reanimated ScrollView and it is somehow working. I don't know what is going on under the hoof but it is clearly working for me.

<AnimatedScrollView
    style={styles.scrollContainer}
    onScroll={onScroll({ x: sliderX })} // onScroll from react-native-redash
    horizontal
>
    {data.map(item => renderData(item))}
</AnimatedScrollView>

I didn't use any zIndex.

Let me know if it is working for you too! O.O

[linhbt]

I have the same problem when I want a component to appear above the header bottom sheet. I need to create subView with position: 'absolute', top: -119 like this:

` style={{
position: 'absolute',
left: 12,
right: 12,
borderRadius: 8,
backgroundColor: 'green',
height: 400,
top: -119,
paddingTop: 10,
// zIndex: 115,
}}

`
Touch events on the subView are not being captured on Android (iOS ok)
I try with zIndex > 100 but still not working.
Other things I can try? Thank you!

[und3f1n3d]

I think I've found something. If you need to use horizontal ScrollView from Reanimated inside of BottomSheet then for me is working following code...

First I create AnimatedScrollView from RNGH ScrollView like this:

import Animated from “react-native-reanimated”;
import { ScrollView } from "react-native-gesture-handler";

const AnimatedScrollView = Animated.createAnimatedComponent(ScrollView);

Then I use it like regular Reanimated ScrollView and it is somehow working. I don't know what is going on under the hoof but it is clearly working for me.

<AnimatedScrollView
    style={styles.scrollContainer}
    onScroll={onScroll({ x: sliderX })} // onScroll from react-native-redash
    horizontal
>
    {data.map(item => renderData(item))}
</AnimatedScrollView>

I didn't use any zIndex.

Let me know if it is working for you too! O.O

This helped. I was trying zIndex or the position: absolute. Those didn't help. However if I use components from react-native-gesture-handler like the TouchableOpacity, Flatlist, then the events are passed down to those elements! Thank you guys!