Swipe to close doesn't work through Pressable on Android

DazzlingFame commented 3 years ago

Environment

System: OS: macOS 11.4 CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz Memory: 496.44 MB / 16.00 GB Shell: 5.8 - /bin/zsh Binaries: Node: 12.17.0 - ~/.nvm/versions/node/v12.17.0/bin/node Yarn: 1.22.11 - /usr/local/bin/yarn npm: 6.14.4 - ~/.nvm/versions/node/v12.17.0/bin/npm Watchman: 2021.08.02.00 - /usr/local/bin/watchman Managers: CocoaPods: 1.10.0 - /usr/local/bin/pod SDKs: iOS SDK: Platforms: iOS 14.5, DriverKit 20.4, macOS 11.3, tvOS 14.5, watchOS 7.4 Android SDK: API Levels: 23, 28, 29, 30 Build Tools: 28.0.3, 29.0.2, 30.0.2 System Images: android-19 | Google APIs ARM EABI v7a, android-21 | Google APIs ARM EABI v7a, android-22 | Google APIs ARM EABI v7a, android-22 | Google APIs Intel x86 Atom, android-24 | Google APIs Intel x86 Atom, android-25 | Google APIs Intel x86 Atom, android-27 | Google Play Intel x86 Atom, android-28 | Google Play Intel x86 Atom, android-29 | Google APIs Intel x86 Atom, android-29 | Google Play Intel x86 Atom Android NDK: 23.0.7123448-beta1 IDEs: Android Studio: 2020.3 AI-203.7717.56.2031.7621141 Xcode: 12.5.1/12E507 - /usr/bin/xcodebuild Languages: Java: 1.8.0_292 - /usr/bin/javac Python: 2.7.16 - /usr/bin/python npmPackages: @react-native-community/cli: Not Found react: 16.13.1 => 16.13.1 react-native: 0.63.4 => 0.63.4 react-native-macos: Not Found npmGlobalPackages: react-native: Not Found

Platforms

Android

Versions

Android: 10.0 react-native-modal: bug on both 11.10.0 and 12.1.0 react-native: 0.63.4 react: 16.13.1

Description

Hi. I'm implementing closing the modal view by swiping it in my app. So I realized that on Android devices swipe to close is only works if I swiped non-pressable components. I have tried Pressable comonent and many kinds of Touchables such as TouchableOpacity, TouchableWithoutFeedback etc.

This is only found on Android devices, swiping through Pressable works perfectly on iOS. If I make Pressable disabled via prop it works as well.

Here is a video of demo code that I used to reproduce this issue.

https://user-images.githubusercontent.com/15292833/134353792-fcfe9440-3ad5-4a29-9b61-d2f7e70c3982.mov

Reproducible Demo

Here is some code to reproduce the issue

<Modal
        isVisible={isVisible}
        onSwipeComplete={onClose}
        onBackButtonPress={onClose}
        onBackdropPress={onClose}
        swipeDirection={'down'}
        style={{justifyContent: 'flex-end', margin: 0}}
        propagateSwipe={true}
        useNativeDriver={false}
      >
        <View>
          <View style={{height: 200, backgroundColor: 'red'}} />
          <Pressable
            onPress={() => alert('qwerty')}
            style={{height: 200, backgroundColor: 'blue'}}
          />
        </View>
</Modal>

NathanBeesley commented 3 years ago

I'm not sure that's a bug. Is the blue view a whole button? If so, the button intercepts the gesture and doesn't let the swipe propagate through. Could you try making the blue a container(View) and size the button smaller and let me know the results.

I can also create a snack for you. Let me know.

DazzlingFame commented 3 years ago

I'm not sure that's a bug. Is the blue view a whole button? If so, the button intercepts the gesture and doesn't let the swipe propagate through. Could you try making the blue a container(View) and size the button smaller and let me know the results.

I can also create a snack for you. Let me know.

Yes, the blue view is a whole button as an example for pressable element in a modal. As you can see there are View inside of View container and Button (Pressable) inside of View already. In my production case I have a multiple choise picker in my modal so pressable areas cover almost whole modal and therefore I cant close it by swiping unless i swiping unpressable header.

I expect blue view to pass gesture through it and let me close modal by swipe as it works on iOS.

Here is an example of expected behaviour.

https://user-images.githubusercontent.com/15292833/134488605-bb7be4f1-8ff1-4dd5-bfc3-5950b176fb0a.mp4

karamanliev commented 8 months ago

@DazzlingFame did you find a solution to this problem? I have a list of multiple <Pressable /> options and swipe to close on the list doesn't work. Tried to play around a bit, but weren't able to fix it.

Basically my code looks like this:

<Modal
  isVisible={isVisible}
  onSwipeComplete={onClose}
  onBackButtonPress={onClose}
  onBackdropPress={onClose}
  swipeDirection={'down'}
  propagateSwipe={true}
  scrollTo={handleScrollTo}
  scrollOffset={scrollOffset}
  scrollOffsetMax={maxScrollOffset}
>
  ...
  <ScrollView {...some props}>
    <Pressable
      onPress={handleOnPress}
      {...more props}>
        ...
     </Pressable>
  </ScrollView>
</Modal>

DazzlingFame commented 8 months ago

@karamanliev No, I still haven't found a solution. The problem is relevant

react-native-modal / react-native-modal