Eyesonly88 commented 5 years ago

Preview

bottomsheetandroidbuglow

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 commented 5 years ago

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 commented 5 years ago

@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 commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

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 commented 4 years ago

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!

auerl commented 3 years ago

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!

osdnk / react-native-reanimated-bottom-sheet

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

Preview

What I tried but didn't work

Example Code

Environments

Dependencies