jeremybarbet / react-native-modalize

A highly customizable modal/bottom sheet that loves scrolling content.
https://jeremybarbet.github.io/react-native-modalize
MIT License
2.82k stars 299 forks source link

No gestures detected on Android with react-native-gesture-handler 2.x #380

Closed giacomoarienti closed 1 year ago

giacomoarienti commented 2 years ago

Describe the bug On Android is not possible to close the modal by swiping or tapping outside the modal.

Reproduce

Dependencies:

alexissanchezsequal commented 2 years ago

Same problem only on android, on ios it closes when pressing outside the modal.

TPausL commented 2 years ago

same here

petervistyan commented 2 years ago

Does anyone find a workaround for this issue so far?

giacomoarienti commented 2 years ago

Does anyone find a workaround for this issue so far?

To close the modal I’ve added a cancel button that calls the close method of the modal ref

Cmoen11 commented 2 years ago

Is there any news on this?

jeremybarbet commented 2 years ago

Hi, I haven't been able to look at it yet, but in the meantime I would recommend downgrading to RNGH v1.x.

I will eventually upgrade RNGH on my projects so I will need to fix it on Modalize. If anyone has a fix and want to open a PR before that, feel free, otherwise, please be patient, it might take a while

perroudsky commented 2 years ago

Hi Jeremy ! thanks again for that awesome package ! Just wondering, is there a timeline for the fix ?

jeremybarbet commented 2 years ago

I don't want to make false promise so I don't have any timeline. I started working on it here https://github.com/jeremybarbet/react-native-modalize/pull/227. It will be released as major with breaking changes once done

perroudsky commented 2 years ago

ok cool, thanks for the update !

BloodyMonkey commented 2 years ago

I'm very interested knowing that most of my projects are using Modalize

edi commented 2 years ago

Hi ... I decided to port all my modals to this project, just to find out it ain't working on Android .. damn. Guess I need to revert everything until this gets fixed ..

Hopefully it's sorted soon.

BloodyMonkey commented 2 years ago

Hi @jeremybarbet I see you updated reanimated branch with REANIMATED 2 and RNGH 2, and React Native >= 0.65 Unfortunately, i'm using expo 44 (latest) who use React Native 0.64.3 What's the part of Modalize who need React Native 0.65 ?

edi commented 2 years ago

@BloodyMonkey you can just use https://github.com/gorhom/react-native-bottom-sheet meanwhile.

Nice keyboard support, expo supported, reanimated 2, swipe to dismiss, snap points, etc.

BloodyMonkey commented 2 years ago

@edi Thanks, I was just thinking of using it but I was still hesitating. But at this point of my project i cannot wait longer...

BloodyMonkey commented 2 years ago

@edi @jeremybarbet I found a solution. Wrapping your root view inside <GestureHandlerRootView> fix the problem and the modal is swipeable again BUT doesn't work with withReactModal SO wrapping Modalize inside a Portal works great !

Mcebrera commented 2 years ago

@BloodyMonkey but is the modal content scrollable on Android? My modal is swipable when I wrapped it in GestureHandlerRootView but the inner content isn't scrollable.

Also getting a warning message: Warning: Cannot record touch end without a touch start. Touch End: %s Touch Bank: %s {"identifier":0,"pageX":0,"pageY":0,"timestamp":443417329} [null,{"touchActive":true,"startPageX":164.71102905273438,"startPageY":473.07342529296875,"startTimeStamp":443417215,"currentPageX":163.62037658691406,"currentPageY":500.80157470703125,"currentTimeStamp":443417328,"previousPageX":163.62037658691406,"previousPageY":475.9500732421875,"previousTimeStamp":443417312}]

jobberma commented 2 years ago

Any update for this please ? I updated to expo 44 and it uses RNGH 2. The modal opens but we can't swipe to close it on ANDROID, it works fine on IOS.

dylvaz commented 2 years ago

If anyone is still having issues with this I wrapped my root view (everything in my App.js return) in a <GestureHandlerRootView style={{ flex: 1 }}> and the modals swipe down on android AND the inner content is scrollable.

I am using RNGH v2.2 and tested it on my Samsung s10 with one ui v4.1.

Hope this helps 🙏

abbas321 commented 2 years ago

Does anyone find a workaround? its not working on android.

perroudsky commented 2 years ago

@abbas321

@dylvaz solution does work !

frankelly001 commented 2 years ago

Describe the bug On Android is not possible to close the modal by swiping or tapping outside the modal.

Reproduce

  • Android emulator
  • Create a Modalize instance inside a View or SafeAreaView

Dependencies:

  • react-native-gesture-handler: ~2.1.0
  • react-native-modalize: ^2.0.13
  • react-native: 0.64.3
  • expo: ^44.0.0
  • react-navigation/native: ^6.0.2,

import gestureHandlerRootHOC from react-native-gesture-handler in your App.js then wrap ur App.js export with gestureHandlerRootHOC for example

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

const App = () => {
    return (
       // your code to render your layout
     )
}

export default gestureHandlerRootHOC(App)
luccameds commented 2 years ago

@frankelly001 Thank you so much! You're a legend!

frankelly001 commented 2 years ago

@frankelly001 Thank you so much! You're a legend!

You are welcome. 😎

sarnakov commented 1 year ago

When using with native-base: <GestureHandlerRootView style={{ flex: 1 }}> works just fine

giacomoarienti commented 1 year ago

Solution: wrap your root view in <GestureHandlerRootView style={{ flex: 1 }}>

abeeku commented 1 year ago

Still not working for me

AmirSedaqat commented 1 year ago

@BloodyMonkey

Thanks, fixed

vaibhavshah0201 commented 1 year ago

Describe the bug On Android is not possible to close the modal by swiping or tapping outside the modal. Reproduce

  • Android emulator
  • Create a Modalize instance inside a View or SafeAreaView

Dependencies:

  • react-native-gesture-handler: ~2.1.0
  • react-native-modalize: ^2.0.13
  • react-native: 0.64.3
  • expo: ^44.0.0
  • react-navigation/native: ^6.0.2,

import gestureHandlerRootHOC from react-native-gesture-handler in your App.js then wrap ur App.js export with gestureHandlerRootHOC for example

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

const App = () => {
    return (
       // your code to render your layout
     )
}

export default gestureHandlerRootHOC(App)

Hey, dude, this is actually working, one thing can you please help me with if I use this then it will not create an issue for another library in future ?

Thanks for your suggestion, really appreciate :)