withReactModal and Android

[hirbod]

Hi,

i just found out that "withReactModal" will break swipe to dismiss on android. What can I do to achieve a full screen modal which works as intended on iOS and Android? Without the use of "withReactModal" my modal gets rendered inside my childrens component and has wrong positioning and wrong height @jeremybarbet.

Using "withReactModal" is exactly what I need, a fullscreen modal which perfectly works with my slideshow (which btw was the first and only modal I found which did what I need, because every other lib with flick to dismiss didn't work with slideshows/scrollviews) and swipes up form bottom to top + overlapping the tab bar perfectly. You mentioned to have a look at react-navigation example but there isn't even a stackNavigator or anything else inside of it.

I use react-navigation but your examples didn't help me here. Any help here is appreciated.

[jeremybarbet]

Hi!

As I commented on another issue, your best solution would be to create a Modal provider at the root of your app and control the modal toggling with the context. You would need to have a bit of logic inside the provider, if you have, for example, different modals, contents across your app.

I also want to create a ModalizeProvider that would help to achieve this, but I don't have time for now. Feel free to open a PR and/or show your code if you make any progress!

[hirbod]

So you don’t have a solution / example currently? I was fine to break gesture on Android so far, but since TouchableOpacity also breaks on Android, I don’t even have a workaround for closing it on Android (using an absolute header). I’m not a real react native pro, could need a little help on this.

[rafaelmotta]

I was also using withReactModal before, but after struggling a bit, I could manage to make it work in Android Devices as well, without using withReactModal, and for that reason, dragging now works as expected.

Here is a demo, using react-navigation:

video.mov.zip

I just did what @jeremybarbet said: Wrap your component using modalize within a Portal / Provider. As RN does not offer Portals out of the box, I have used react-native-portal.

In my Root component, I have declared my portal:

<AppRouterStack  />
<MyPortal name="some-bottom-sheet" />

[hirbod]

@rafaelmotta could you please explain a bit more for us noobs out there how you open the modal now etc? And how you got the content there? Just a simple example please.

Thanks

[rafaelmotta]

@Hirbod Yes, II will try to create an example and submit a MR to examples

[hirbod]

Thanks, I am still stuck on this issue and would love to fix it

[jeremybarbet]

@rafaelmotta This is sweet! You could even open a PR to introduce a ModalizeProvider that would be shipped by default in the library

[hirbod]

@rafaelmotta friendly ping

[hirbod]

@rafaelmotta sorry for being so stressful, but is there any chance you could show us your example? If you don't have time for a PR, could you at least paste some snippets here?

I really need to get this thing work and due to lack of knowledge, I am really stuck on this last issue.

[rafaelmotta]

I will do it by the end of the week. So sorry, crazy week.

[hirbod]

@rafaelmotta I don't need your help anymore, I managed to get it to work myself.

It was pretty easy, since I was already using "react-native-paper" inside my App, which has a DEAD simple and easy Portal.

https://callstack.github.io/react-native-paper/portal-host.html https://callstack.github.io/react-native-paper/portal.html#Host

Inside my App.js, I wrapped a <Portal.Host> around my <AppNavigator {...{onNavigationStateChange}} /> and in my Component, I removed withReactModal and wrapped a <Portal> around the modalize. At the end, it was 60 seconds of work.

[jeremybarbet]

I will close that since you found a workaround. If anyone wants to contribute and open a PR to include a provider to this package, I would appreciate!

[asadbjs]

Thnx me later..!!! after spending hours....

import { GestureHandlerRootView } from "react-native-gesture-handler";

"react-native-gesture-handler": "^2.6.0", add this line in package.json