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

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

[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

[auerl]

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

This solved the issue for me, 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

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

<View 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!