Doesn't work in a modal

Question

Doesn't work in a modal

martinezguillaume opened this issue 7 years ago · 101 comments

Hi !
I have a little issue on Android, onGestureEvent is not trigger when GestureHandler components is on a modal on Android. When I change the modal to a View, it works perfectly 👌

No problem on iOS

csto commented 7 years ago

+1

osdnk commented 5 years ago

whop #937

❤️8
🚀6

Answer 1 · 2018-06-08T13:03:08.000Z

+1
any workaround?

Answer 2 · 2018-06-08T14:37:17.000Z

I don’t use Modal for now, I just re-create it with a View in absolute position

Answer 3 · 2018-06-08T22:23:36.000Z

using modal screen for now, after googling and chats Modal from RN considered too much buggy thing

Answer 4 · 2018-07-10T12:39:22.000Z

Hi, @martinezguillaume, @mordaha, @csto
I did take a look on this issue and I suppose it's not a matter of our library, but RN Core.

Answer 5 · 2018-07-14T06:04:08.000Z

@osdnk is this fixable?

Answer 6 · 2018-12-11T15:21:25.000Z

+1 gesture does not work on modal

Answer 7 · 2019-01-28T11:07:30.000Z

I also ran into this bug today.

Answer 8 · 2019-02-01T08:31:44.000Z

Same problem. Gesture does not work on modal on Android.
Expo for example

Answer 9 · 2019-02-26T17:14:18.000Z

Same for me. Tested react-native's PanResponder handlers on modal - works fine.

I have a thoughts about this: when we are linking this library to android project, we are doing next step

@Override
            protected ReactRootView createRootView() {
                return new RNGestureHandlerEnabledRootView(MainActivity.this);
            }

And we know that modal is separate package. May be theres sense to do something same with it?

Answer 10 · 2019-03-26T17:42:04.000Z

I was using a standard React Native Modal and was experiencing this issue.
I worked around the problem by creating a new screen and displaying it as a modal. I'm using react-native-navigation, so:

Navigation.showModal({
    component: {
      name: navRoutes.ImageModal,
      passProps: { image },
    },
  })

Gestures are working as expected on both iOS and Android, and I still get transparent background that I wanted from my original modal.

Answer 11 · 2019-03-26T18:31:11.000Z

I have dug into it for a while.

It's a problem of RNGH. Sorry 😒
It happens bc modals are not rendered below an RN root view.
It's fixable by replacing modals' mechanism in a similar way as we do with an RNRootView by wrapping it with some extra logic. See https://github.com/kmagiera/react-native-gesture-handler/blob/master/android/src/main/java/com/swmansion/gesturehandler/react/RNGestureHandlerRootViewManager.java
I have no time to do it now, it's time-consuming work and probably requires copying some code in an RNGH core on Android native side.

If someone wants and has time to do it, I'll happily review it and merge immediately if it would be workable and not too hacky.

@martinezguillaume @mordaha @csto @mars-lan @ParhamZare @ewendel @via-profit @Dmitrylolo @Lavielle

Answer 12 · 2019-03-26T18:32:48.000Z

Also, I've made a try two months ago.

139da18

Maybe it could be an inspiration for someone 🤷‍♂️

Answer 13 · 2019-04-04T14:08:18.000Z

Hey @osdnk I need this feature for my app, so I was thinking I could give it a try, but I don't have a lot of experience with RNGestureHandler, or with Android. Could you give me some more insight on what I would need to do to make it work ?
Also I was looking at your previous try, and I would like to know what's missing for it to be finished, and if it could be used as a starting point.

Answer 14 · 2019-04-24T11:55:54.000Z

same error.

Answer 15 · 2019-05-09T08:50:50.000Z

@kmagiera @osdnk any update on this?
even Touchable*'s don't work inside the modal and this is frustrating

Answer 16 · 2019-05-24T07:43:27.000Z

+1. i use reanimated-bottom-sheet with modal

Answer 17 · 2019-05-30T17:09:57.000Z

Any updates? Or perhaps, any other modal component that does not suffer from this issue? RN's modal honestly works like quite bad and is full of bugs (such as getting stuck if combined with an alert)

Answer 18 · 2019-05-30T17:38:29.000Z

@cristianoccazinsp I ended up using https://github.com/react-native-community/react-native-modal

Answer 19 · 2019-05-31T09:50:55.000Z

Odd. That component is supposed to use react's modal internally. Did it make a difference to you? El jue., 30 de mayo de 2019 14:38, Mars Lan <notifications@github.com> escribió:

…

@cristianoccazinsp <https://github.com/cristianoccazinsp> I ended up using https://github.com/react-native-community/react-native-modal — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#139>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ALU263GRH2KHBXUZBGHNKA3PYAGJTANCNFSM4EZ6UZLQ> .

Answer 20 · 2019-06-04T05:35:37.000Z

@cristianoccazinsp It only uses RN's modal to cover the screen, which can be disabled by setting coverScreen to false

Answer 21 · 2019-06-04T13:58:45.000Z

@cristianoccazinsp It only uses RN's modal to cover the screen, which can be disabled by setting coverScreen to false

But is there a way how to show fullscreen modal with this prop which is not rendered in root component of the app?

Answer 22 · 2019-06-04T21:10:09.000Z

@jvaclavik I used it in conjunction with https://github.com/callstack/react-native-paper, which has a component called Portal designed specifically for this purpose.

Answer 23 · 2019-06-14T13:10:06.000Z

This may not resolve all use cases but you can enable gestures in react native modal when setting the prop propagateSwipe to true.

Answer 24 · 2019-07-11T14:44:44.000Z

This issue seems to be related to software-mansion/react-native-screens#61

Don't use react native screens in android. Tested and working fine with 'reanimated-bottom-sheet'

if (Platform.OS === 'ios') {
useScreens();
}

This React Navigation Modal config for transparent bg is

ScreenOne: {
screen: ScreenOne,
navigationOptions: {
gesturesEnabled: false
},
}
{
mode: 'modal',
transparentCard: true,
headerMode: 'none',
cardStyle: {
backgroundColor: 'transparent',
opacity: 1
},
transitionConfig: () => ({
containerStyle: {
backgroundColor: 'transparent',
}
})
}

Answer 25 · 2019-08-20T15:40:51.000Z

@osdnk fixed it?

Answer 26 · 2019-08-30T05:46:57.000Z

This one is was so much pain.
I've spend some time before resolving to google it, pull my hairs out trying to figure out why on earth same component works on iOS and on android but only in some places inside application

Answer 27 · 2019-10-09T05:25:20.000Z

we have the same issue - it doesn't work on modal.
i wonder if anyone is working on this or know of any status update ?
do we need to drop this library and switch to RN pan handlers ?
any suggestion ?

Answer 28 · 2019-10-10T17:20:43.000Z

https://github.com/react-native-community/react-native-modal doesn't work too

Answer 29 · 2019-10-11T21:45:42.000Z

Same here. RectButton doesn't work inside https://github.com/react-native-community/react-native-modal

Answer 30 · 2019-10-16T06:18:23.000Z

@deflorilemarului @kesha-antonov @fauker
Will spare you some time, neither Modal, nor Modal-based packages (if they don't require you to link native dependencies - they are based on react-native's Modal) will help you (I've tried all of them, basically).
All of gesture- related components (bottomsheet-behaviour for us) will not register any touches/swipes etc when rendered inside <Modal>...</Modal> on android;
There is 3 solutions I can think of:

Use any other library if you are using modals. You may require rewrite some swipe-based components to PanResponder; this on is pain, but pretty straightforward;
Use modals that are portals. They are not actually portals nor modals- portals are not supported by react-native because there is single application host - but they are working by placing Host Component somewhere up your application and renders Modal content in absolute view above app stack; this one is working solution, but you will loose any useContext() calls due to children being rendered above context providers; does not work for us, since navigation context is lost;
Use modals provided by navigation library (react-navigation); this one works, but API is... not good - for one you could not make a single screen a modal, only a stack can be in modal mode; this one is solution I stick with.

Well, there is final solution - patch native android implementation (not possible if you are using expo) or wait for patch in a library and then wait until it merged into expo.

p.s.
Don't get me wrong, this library is amazing, and I cannot stress enough how much I appreciate work being poured into this and how much better the experience for end user, but bugs like this one make me want to pull my hairs out.

Answer 31 · 2019-11-30T05:26:57.000Z

Few libraries requires us to deal with native context, if so:

For android, we will need a special care as stated in RNGH document:

Update your MainActivity.java file

Hope it helps

Answer 32 · 2019-12-11T20:04:41.000Z

Few libraries requires us to deal with native context, if so:

For android, we will need a special care as stated in RNGH document:

Update your MainActivity.java file

Hope it helps

Yes, this worked perfectly for me. I almost got frustrated looking for solutions on making my android app swippable.

Answer 33 · 2019-12-28T13:50:29.000Z

still not working
if change modal to view everything work just fine...

Answer 34 · 2020-01-05T15:52:49.000Z

Hi @romanonthego ,

Well, there is final solution - patch native android implementation (not possible if you are using expo) or wait for patch in a library and then wait until it merged into expo.

Can you please tell me what to patch in side my native android code?

Answer 35 · 2020-01-30T00:33:28.000Z

@osdnk That's exciting. Will it work with a DialogFragment as well?

Answer 36 · 2020-02-04T15:33:30.000Z

After trying #937 I found out it didn't work for me...

Maybe it's because I'm using wix's react-native-navigation? As far as I know each and every screen is registered with the gestureHandlerRootHOC (the library works perfectly with normal, non modal views).

This is a fragment of the screen in which I tried the RectButton in a Modal (basically as it is in the doc update)

  renderSearchScreen = () => {
    const { showSearchHistory } = this.state;
    const ExampleWithHoc = gestureHandlerRootHOC(() => {
      return (
        <View style={genericStyles.container}>
          <SearchScreen
            searchBar={{
              ...this.searchBar,
              searchQuery: this.props.searchQuery,
            }}
            onBackPress={() => {
              this.setState({ showSearchHistory: false });
            }}
          />
        </View>
      );
    });

    if (showSearchHistory) {
      return (
        <RNModal
          animationType="fade"
          transparent
          visible={this.state.showSearchHistory}
          onRequestClose={() => {}}>
          <ExampleWithHoc />
        </RNModal>
      );
    }

    return null;
  };

The modal loads when it's supposed to, but the RectButton does not fire the onPress event. I tried making a minimum reproducible demo with a brand new app but then I ran into #848 #676 #835 (possible duplicates of one another).

Answer 37 · 2020-02-18T09:27:35.000Z

whop #937

That's amazing! It still doesn't work with react-native-modal for me, though!

// edit: Actually, default modal doesn't work either, but it should, starting from 1.6.0 if I am not mistaken? Will try to find out what's going wrong

Answer 38 · 2020-03-03T17:56:57.000Z

I've played around a bit and was able to find the issue. However, I am not sure what's causing it and how to fix it.

The problem in my case is, that I react-native-gesture-handler will not work inside a @react-navigation/stack, if placed inside a modal (so basically Stack.Navigator > SomeScreenComponent > Modal > gestureHandlerRootHOC(PanGestureHandler) fails).

If I cut the Stack Navigator out or use the Tab Navigator instead, it works like a charm, so I am pretty sure it's the Stack Navigators' fault.

Relevant package versions:

react-native@0.61.5
@react-navigation/native@5.0.9
@react-navigation/stack@5.1.1

I'll try to setup a demo repo ASAP, let me know if I can provide any more helpful info.

Answer 39 · 2020-03-04T20:38:57.000Z

Here is a demo app to (almost blank from npx react-native init), that will show the issue. You can toggle the stack navigator inside the app and see how the PanGestureHandler becomes functional and unfunctional.

https://github.com/mxmzb/react-native-breakable-app

Answer 40 · 2020-03-20T15:38:57.000Z

I have a similar issue. It seems that the Stack.Navigator doesn't work well on Android. It doesn't matter if I use a mode="modal" or "card".

So i was playing around and had the following code

import { SafeAreaView, Button } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack'

import { enableScreens } from 'react-native-screens';
enableScreens(); // <-- this fucked it up

const Screen1 = ({ navigation }) => {
    return (
      <SafeAreaView style={{ flex: 1 }}>
        <Button title="Open Modal" onPress={() => navigation.push('Modal')} />
      </SafeAreaView>
    )
  }

  const Screen2 = ({ navigation }) => {
    return (
      <SafeAreaView style={{ flex: 1 }}>
        <Button title="Close Modal" onPress={() => navigation.goBack()} />
      </SafeAreaView>
    )
  }

const App = () => {

return (
        <NavigationContainer>
          <Stack.Navigator headerMode="none">
            <Stack.Screen name="Main" component={Screen1} />
            <Stack.Screen name="Modal" component={Screen2} />
          </Stack.Navigator>
        </NavigationContainer>
  )

}

Then I removed this line;
enableScreens();

And then it worked correctly on Android.

Answer 41 · 2020-04-04T17:51:26.000Z

A little trick to solve it inside a modal:

import { TouchableWithoutFeedback } from 'react-native';
import { RectButton } from 'react-native-gesture-handler';

<TouchableWithoutFeedback onPress={...}
    <RectButton>
         ...
    </RectButton>
</TouchableWithoutFeedback>

Answer 42 · 2020-04-11T17:43:16.000Z

I am having similar issue. Any work around ?

Answer 43 · 2020-04-15T22:02:53.000Z

I was trying to use https://github.com/osdnk/react-native-reanimated-bottom-sheet inside a modal, and it's not possible, I finally solved with react-navigation screen animation:

osdnk/react-native-reanimated-bottom-sheet#143 (comment)

Answer 44 · 2020-05-28T13:54:15.000Z

A little trick to solve it inside a modal:

import { TouchableWithoutFeedback } from 'react-native';
import { RectButton } from 'react-native-gesture-handler';

<TouchableWithoutFeedback onPress={...}
    <RectButton>
         ...
    </RectButton>
</TouchableWithoutFeedback>

Hey @gideaoms . I wonder how did your comment went unnoticed here. It definitely does the trick. Thanks man!

Answer 45 · 2020-06-14T15:10:40.000Z

Here is a demo app to (almost blank from npx react-native init), that will show the issue. You can toggle the stack navigator inside the app and see how the PanGestureHandler becomes functional and unfunctional.

https://github.com/mxmzb/react-native-breakable-app

then, what is the solution?

Answer 46 · 2020-06-16T03:18:35.000Z

I'm still having the same problem....
Any solution ou nothing yet ?

Answer 47 · 2020-06-19T15:07:24.000Z

This is still a problem on 1.6.0

Answer 48 · 2020-07-22T17:15:23.000Z

Tried every suggestions mentioned above but still no luck yet. Please help its really frustrating.
My react native version in 0.62.2 tried with both /react-native-gesture-handler 1.5.6 & 1.6.0.

Answer 49 · 2020-07-23T03:15:00.000Z

still an issue on ^1.7.0

Answer 50 · 2020-07-23T14:54:57.000Z

Is still not working 👎

We use wix-navigation. Maybe something related?

Answer 51 · 2020-07-24T03:19:13.000Z

Well, I found a possible workaround, it does exactly what we want and work for both iOS and Android.

https://www.youtube.com/watch?v=tLQjGHDiRkM

Answer 52 · 2020-07-24T03:21:44.000Z

@steniowagner is that like a custom modal ? I wouldn't recommend it
just go with react-navigations or native-stack modal, it does work with it fine.

Answer 53 · 2020-07-24T20:20:45.000Z

hmm, didn't test with react-navigations (sounded like too much for my case), but maybe it's the best way at the moment.

Thank you @a-eid !

Answer 54 · 2020-08-28T08:36:57.000Z

According to the docs
https://docs.swmansion.com/react-native-gesture-handler/docs/#usage-with-modals-on-android

but still didn't work for me.

Answer 55 · 2020-08-28T08:41:57.000Z

@gideaoms that tricks may works for button but my use case is to use PinchGestureHandler inside the modal.

A little trick to solve it inside a modal:

import { TouchableWithoutFeedback } from 'react-native';
import { RectButton } from 'react-native-gesture-handler';

<TouchableWithoutFeedback onPress={...}
    <RectButton>
         ...
    </RectButton>
</TouchableWithoutFeedback>

Answer 56 · 2020-09-02T10:16:59.000Z

This issue is more than 2 years old, are there any plans to fix this?

I've created custom Slider components for my app and can't use them at all on Android, since a lot of views in my app are Modals

I've wrapped every screen and Modal component in a gestureHandlerRootHoC (using wix/react-native-navigation)

Answer 57 · 2020-09-10T11:28:32.000Z

I've tried wrapping both the screen and the component with gestureHandlerRootHoc without success. I didn't try the RectButton approach because I need a PanGestureHandler in order to implement swipe-down-to-dismiss behaviour on the modal. It is frustrating because it works perfectly on iOS and, since I'm using react-native-modal, which actually comes with swipe-to-dismiss out-of-the-box, I've even tried using that approach instead and it works as long as you don't have scrollable content inside the modal because then it's buggy both on iOS and Android, so I'm kind of stuck...

Answer 58 · 2020-10-01T09:58:59.000Z

To sum up:

❌ RNGH does not work in react-native's <Modal> component (even though the Component is wrapped in a gestureHandlerRootHOC)
✅ RNGH does work in a screen from wix/react-native-navigation's which is shown using Navigation.showModal (even though the Screen is wrapped in a gestureHandlerRootHOC)
✅ RNGH apparently does work if shown using react-navigation's push function with modal: true, but only when not using the native stack (enableScreens()/createNativeStackNavigator()).

I can provide more details if required.

Answer 59 · 2020-11-05T01:13:07.000Z

react-native-modal-animated works with react-native-gesture-handler, because react-native-modal-animated creating a Modal just using a View.

Answer 60 · 2020-11-05T06:33:43.000Z

@flyskywhy if react-native-modal-animated doesn't use a separate activity like react-native-modal then how it's render on top of everything? If it's using an absolute position then it could make a problem in some cases.

Answer 61 · 2020-11-05T07:09:28.000Z

@waheedakhtar694 , it's using absolute. At least in my case, no problem 😝

Answer 62 · 2020-11-30T10:14:44.000Z

@jvaclavik I used it in conjunction with https://github.com/callstack/react-native-paper, which has a component called Portal designed specifically for this purpose.

Solved using Portal from react-native-paper as @jvaclavik said.
I wrapped my App with PaperProvider, then changed Modals to Views and wrapped them with gestureHandlerRootHOC and Portal.
Now bottom-sheet works on Android 😍

EDIT: for some reason pan gestures are working but onPress events are not working (but ripple is shown)...
EDIT 2: that was a problem with the library I used, I fixed it changing touchable imports from "react-native" to "react-native-gesture-handler"

Here's some code you can try

/*
 App.js:
 - import { Provider as PaperProvider } from "react-native-paper";
 - wrap your App with PaperProvider
*/

// ModalFixed.js
import { Portal } from 'react-native-paper';
import { gestureHandlerRootHOC } from 'react-native-gesture-handler';

const ModalFixed = (props) => {
  <View style={styles.modal}>
    <View style={styles.shadow} />
    {/* MODAL CONTENT HERE, you can put props.children to reuse this component */}
  </View>
}

const styles = StyleSheet.create({
  modal: {
    width: "100%",
    height: "100%"
  },
  shadow: {
    position: "absolute",
    width: "100%",
    height: "100%",
    backgroundColor: "rgba(0,0,0,0.3)",
  }
})

const _ModalFixed = gestureHandlerRootHOC(SheetPopup)
export default (props) => {
  return (
    <Portal>
      <_ModalFixed {...props} />
    </Portal>
  )
}

Answer 63 · 2020-12-11T14:32:03.000Z

Its working for me:
<TouchableWithoutFeedback onPress={() => { console.log("press"); }} > <Text> <RectButton> ... </RectButton> </Text> </TouchableWithoutFeedback>

Answer 64 · 2020-12-18T10:10:31.000Z

Any update on this? We have two projects where iOS is working as expected but Android modals are proving a headache. We'd rather not have to remove modals from the projects...that is a big design overhaul. :/

Answer 65 · 2020-12-18T10:15:51.000Z

@DavidAPears have you tried wrapping you modals in gestureHandlerRootHOC ?

something like this ?

const ModalInner = gestureHandlerRootHOC(function GestureExample() {
  return (
    <View>
      { RNGH components . }
    </View>
  );
});

export default function ModalForX() {
  return (
    <Modal animationType="slide" transparent={false}>
      <ModalInner />
    </Modal>
  );
}

Answer 66 · 2020-12-27T12:40:31.000Z

Combination of Portal from react-native-portalize and gestureHandlerRootHOC works for me. Something like that:

<Portal>
   <Modal>
      <GestureHandlerRootHOCWrappedComponent />
   </Modal>
</Portal>

Answer 67 · 2021-01-14T14:49:23.000Z

setting coverSreen={false} on modal works. But need my modal cover the screen

Answer 68 · 2021-01-22T12:56:37.000Z

import {Platform, Modal} from 'react-native';
import {gestureHandlerRootHOC} from 'react-native-gesture-handler';
import {AnimatedBottomSheet} from '../AnimatedBottomSheet';

const AnimatedBottomSheetWrapper = Platform.OS === 'android' ? gestureHandlerRootHOC(AnimatedBottomSheet) : AnimatedBottomSheet;

Answer 69 · 2021-01-23T00:58:18.000Z

Not sure if this is going to help someone, i also had issues using this library with react-native-modal, but beside wrapping children of modal gestureHandlerRootHOC (this is working fine for buttons, but i had issues having text input in modal + avoidKeyboard = true and on every press of key, keyboard was closing ) So only thing i did, is made modal children wrapper, something like this:

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

const GestureHandlerWrapper = gestureHandlerRootHOC(
  ({ children }) => <View>{children}</View>,
  { flex: 0 }
);

export const CustomModal: React.FC<Props> = ({
  children,
...rest
}) => {
  return (
    <Modal
      {...rest}
    >
      <GestureHandlerWrapper>    
          {children} 
      </GestureHandlerWrapper>
    </Modal>
  );
};

Answer 70 · 2021-02-25T07:52:32.000Z

No, not fixes the issues by react-native-gesture-handler@1.10.2 And #1323 just modify ios? My problem related android :P Wojciech Lewicki <notifications@github.com> 于2021年2月18日周四下午9:55写道：

…

Can you check if applying #1323 <#1323> fixes the issues? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#139 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAK7QZWAYA7A2YRVHKWFUI3S7UL3TANCNFSM4EZ6UZLQ> .

Answer 71 · 2021-02-25T11:00:39.000Z

Yes, I saw that it is issue of Android after commenting, my bad 😅

Answer 72 · 2021-03-02T03:38:08.000Z

setting coverSreen={false} on modal works. But need my modal cover the screen

It works for me, thanks.
If you want to cover the screen , you can make a customed modal componnet and put it at the top level of component tree, then set style to cover screen, you can set children component (modal content) by Ref.

Answer 73 · 2021-03-04T06:21:47.000Z

I got this working using the suggestion for Library authors

<Modal>
    <GestureHandlerRootView style={{width:'100%', height:'100%'}}>
        <myGestureEnabledComponent/>
    </GestureHandlerRootView>
</Modal>

Only tested on my Pixel 5 so far, but things are looking good so far 😃

Answer 74 · 2021-03-07T11:30:04.000Z

I got this working using the suggestion for Library authors
<Modal>
    <GestureHandlerRootView style={{width:'100%', height:'100%'}}>
        <myGestureEnabledComponent/>
    </GestureHandlerRootView>
</Modal>
Only tested on my Pixel 5 so far, but things are looking good so far

Works for nexus5x emulator.

Answer 75 · 2021-03-26T19:38:47.000Z

Wrapping your component in worked for me seamlessly!

Answer 76 · 2021-04-05T01:54:31.000Z

After a whole day of debugging

You need to wrap you RNGH components in gestureHandlerRootHOC
Upgrade from v1.8.0 to v1.10.3
Wrap the modal in react-native-paper's <Portal>
Make sure the react native paper provider is the first component to render

When I did this it did not work:

However this worked:

if i skip any one of these steps it does not work

Answer 77 · 2021-04-24T09:54:52.000Z

No at first I thought I use portal from paper and everything gets magically solved.
But use a textview in your modal now :)
It starts sucking.

Answer 78 · 2021-04-24T10:03:56.000Z

To sum up:

❌ RNGH does not work in react-native's <Modal> component (even though the Component is wrapped in a gestureHandlerRootHOC)

✅ RNGH does work in a screen from wix/react-native-navigation's which is shown using Navigation.showModal (even though the Screen is wrapped in a gestureHandlerRootHOC)

✅ RNGH apparently does work if shown using react-navigation's push function with modal: true, but only when not using the native stack (enableScreens()/createNativeStackNavigator()).

I can provide more details if required.

if you had examples it would be great.

Answer 79 · 2021-06-04T08:34:03.000Z

setting coverSreen={false} on modal works. But need my modal cover the screen

It works for me, thanks.
If you want to cover the screen , you can make a customed modal componnet and put it at the top level of component tree, then set style to cover screen, you can set children component (modal content) by Ref.

not worked when using stack of react-navigation

Answer 80 · 2021-06-04T08:35:37.000Z

I got this working using the suggestion for Library authors
<Modal>
    <GestureHandlerRootView style={{width:'100%', height:'100%'}}>
        <myGestureEnabledComponent/>
    </GestureHandlerRootView>
</Modal>
Only tested on my Pixel 5 so far, but things are looking good so far
Works for nexus5x emulator.

not worked when using stack of react-navigation

Answer 81 · 2021-06-04T08:35:56.000Z

After a whole day of debugging

You need to wrap you RNGH components in gestureHandlerRootHOC

Upgrade from v1.8.0 to v1.10.3

Wrap the modal in react-native-paper's <Portal>

Make sure the react native paper provider is the first component to render

When I did this it did not work:

However this worked:

if i skip any one of these steps it does not work

not worked when using stack of react-navigation

Answer 82 · 2021-06-09T07:54:01.000Z

Months passed, I can't wait any more, to use react-native-gesture-handler in a modal when using stack of react-navigation, now I publish an @flyskywhy/react-native-modal-animated to npmjs.org, which is forked from rafalkaczynsky/react-native-modal-animated, and replaced componentWillReceiveProps by React Hooks to support latest React.

Answer 83 · 2021-06-29T12:24:43.000Z

RNGH works in a react native Modal if you wrap ONLY the content of the Modal in the GestureHandlerRootView component (see RNGH docs, this comment and this pull request).

But if you wrap the whole app (or a screen that contains the Modal) in GestureHandlerRootView too, RNGH buttons stops working inside the Modal (see why below).

Examples

Example of GestureHandlerRootView used only inside a Modal:

const GHRVInsideModal: React.FC = () => {
  const [visible, setVisible] = useState(false);

  return (
    <>
      <TouchableOpacity onPress={() => setVisible(true)}>
        <Text>Open (it's RN button) - it works</Text>
      </TouchableOpacity>

      <Modal
        animationType="slide"
        transparent
        visible={visible}
      >
        <View style={styles.modal}>
          <RectButton onPress={() => setVisible(false)}>
            <Text>Close (it's RNGH button outside GestureHandlerRootView) - it does not work</Text>
          </RectButton>

          <GestureHandlerRootView>
            <RectButton onPress={() => setVisible(false)}>
              <Text>Close (it's RNGH button inside GestureHandlerRootView) - it works</Text>
            </RectButton>
          </GestureHandlerRootView>
        </View>
      </Modal>
    </>
  );
};

Example of nested GestureHandlerRootView:

const NestedGHRV: React.FC = () => {
  const [visible, setVisible] = useState(false);

  return (
    <GestureHandlerRootView>
      <RectButton onPress={() => setVisible(true)}>
        <Text>Open (it's RNGH button) - it works</Text>
      </RectButton>

      <Modal
        animationType="slide"
        transparent
        visible={visible}
      >
        <View style={styles.modal}>
          <GestureHandlerRootView>
            <RectButton onPress={() => setVisible(false)}>
              <Text>Close (it's RNGH button inside GestureHandlerRootView) - it does not work</Text>
            </RectButton>

            <TouchableOpacity onPress={() => setVisible(false)}>
              <Text>Close (it's RN button) - it works</Text>
            </TouchableOpacity>
          </GestureHandlerRootView>
        </View>
      </Modal>
    </GestureHandlerRootView>
  );
};

Video with two examples:

Screen.Recording.2021-06-29.at.15.06.01.mov

See this repo with two examples.

React navigation

If you create a Modal inside react-navigation's stack and wrap the content of the Modal in GestureHandlerRootView as the documentation says, it reproduces the second example and RNGH buttons in a Modal will not work.

This is happening because react-navigation wraps the stack content in GestureHandlerRootView and your GH root view in a Modal renders as a simple View.

How to fix

Why does the button in the Modal work in the first case, but not in the second?

If we look at the 17th line of the GestureHandlerRootView.android.tsx file we see, that nested gesture handler root views renders as View. If you try to delete 17-22 lines from the GestureHandlerRootView.android.tsx file the second example will start working.

Video reproduced what will be if you delete 17-22 lines from the GestureHandlerRootView.android.tsx file (uploaded to YouTube, because GitHub does not allow uploading large files):

As a result, if the nested GestureHandlerRootView is NOT rendered as a simple View, RNGH buttons in a Modal in Android will work. I created a pull request #1493 that fixes it.

Answer 84 · 2021-07-11T16:56:17.000Z

After a whole day of debugging

You need to wrap you RNGH components in gestureHandlerRootHOC

Upgrade from v1.8.0 to v1.10.3

Wrap the modal in react-native-paper's <Portal>

Make sure the react native paper provider is the first component to render

When I did this it did not work:

However this worked:

if i skip any one of these steps it does not work

not worked when using stack of react-navigation

I got this to work! Using react-navigation and react-native-paper. Amazing, thank you @mfy5013

Answer 85 · 2021-07-31T14:14:05.000Z

The use of react-native-portalize fixed this perfectly for me while using React Navigation - here is a fully working Expo Snack for anyone that wants a minimal example of how to get this working in their own project:
https://snack.expo.dev/@thomascoldwell/react-navigation---rngh-root-view-bug-android---portal-fix

Answer 86 · 2021-10-04T10:21:38.000Z

@jakub-gonet When are you planning the next release with #1603 changes?

Answer 87 · 2021-10-04T10:55:38.000Z

We're planning on releasing the next version in a month or so. This is a transition from 1.x to 2.x so it may take a bit longer than usual.

Answer 88 · 2022-01-19T22:40:13.000Z

I'm trying to call the RectButton inside a modal of createStackNavigator(@react-navigation/stack), on android the RectButton doesn't trigger onPress, IOS works perfectly

react-native-gesture-handler: 2.1.1
@react-navigation/native: ^6.0.6
@react-navigation/stack: ^6.0.11

Any solution?

Answer 89 · 2022-05-02T11:09:04.000Z

The use of react-native-portalize fixed this perfectly for me while using React Navigation - here is a fully working Expo Snack for anyone that wants a minimal example of how to get this working in their own project:
https://snack.expo.dev/@thomascoldwell/react-navigation---rngh-root-view-bug-android---portal-fix

Thanks a lot finally this solution worked for me. :)

Answer 90 · 2022-07-04T07:28:42.000Z

need more assistance.! can you please help me with this?

Answer 91 · 2022-07-07T05:54:38.000Z

For me, I just installed the newest version 2.4.0. And then I use GestureHandlerRootView to wrapper the PanGestureHandler. It works. Remember that don't wrapper the view or others components. Wrapper thePanGestureHandler like below:

 const $panelView = (
    <GestureHandlerRootView>
      <PanGestureHandler onGestureEvent={onGestureEvent}>
        <Animated.View style={[styles.panelView, panelStyle]}>
          {$contentView}
        </Animated.View>
      </PanGestureHandler>
    </GestureHandlerRootView>
  )

Answer 92 · 2022-08-03T09:39:47.000Z

For me, I just installed the newest version 2.4.0. And then I use GestureHandlerRootView to wrapper the PanGestureHandler. It works. Remember that don't wrapper the view or others components. Wrapper thePanGestureHandler like below:
 const $panelView = (
    <GestureHandlerRootView>
      <PanGestureHandler onGestureEvent={onGestureEvent}>
        <Animated.View style={[styles.panelView, panelStyle]}>
          {$contentView}
        </Animated.View>
      </PanGestureHandler>
    </GestureHandlerRootView>
  )

This fix does make the component scrollable but it's still super glitchy on android compared to when using the same component outside of a modal.

Answer 93 · 2022-08-30T18:44:16.000Z

This happened to me too and belive it or not I solved it by setting backgroundColor of the GesturHandler content (the inner View) to transparent (or any value)
I'm guessing because react-native optimizes views only used for positioning their children and removes them or something and having a backgroundColor forces it to keep the view (please correct me if I'm wrong).

Answer 94 · 2023-01-26T20:18:35.000Z

Still not working on Android 👎

Answer 95 · 2023-04-18T08:49:16.000Z

Try this: https://docs.swmansion.com/react-native-gesture-handler/docs/installation/#usage-with-modals-on-android

const ExampleWithHoc = gestureHandlerRootHOC(() => (
    <View>
      <DraggableBox />
    </View>
  );
);

export default function Example() {
  return (
    <Modal>
      <ExampleWithHoc />
    </Modal>
  );
}

Answer 96 · 2023-07-07T21:26:02.000Z

RNGH works in a react native Modal if you wrap ONLY the content of the Modal in the GestureHandlerRootView component (see RNGH docs, this comment and this pull request).

But if you wrap the whole app (or a screen that contains the Modal) in GestureHandlerRootView too, RNGH buttons stops working inside the Modal (see why below).

Examples

Example of GestureHandlerRootView used only inside a Modal:
const GHRVInsideModal: React.FC = () => {
  const [visible, setVisible] = useState(false);

  return (
    <>
      <TouchableOpacity onPress={() => setVisible(true)}>
        <Text>Open (it's RN button) - it works</Text>
      </TouchableOpacity>

      <Modal
        animationType="slide"
        transparent
        visible={visible}
      >
        <View style={styles.modal}>
          <RectButton onPress={() => setVisible(false)}>
            <Text>Close (it's RNGH button outside GestureHandlerRootView) - it does not work</Text>
          </RectButton>

          <GestureHandlerRootView>
            <RectButton onPress={() => setVisible(false)}>
              <Text>Close (it's RNGH button inside GestureHandlerRootView) - it works</Text>
            </RectButton>
          </GestureHandlerRootView>
        </View>
      </Modal>
    </>
  );
};
Example of nested GestureHandlerRootView:
const NestedGHRV: React.FC = () => {
  const [visible, setVisible] = useState(false);

  return (
    <GestureHandlerRootView>
      <RectButton onPress={() => setVisible(true)}>
        <Text>Open (it's RNGH button) - it works</Text>
      </RectButton>

      <Modal
        animationType="slide"
        transparent
        visible={visible}
      >
        <View style={styles.modal}>
          <GestureHandlerRootView>
            <RectButton onPress={() => setVisible(false)}>
              <Text>Close (it's RNGH button inside GestureHandlerRootView) - it does not work</Text>
            </RectButton>

            <TouchableOpacity onPress={() => setVisible(false)}>
              <Text>Close (it's RN button) - it works</Text>
            </TouchableOpacity>
          </GestureHandlerRootView>
        </View>
      </Modal>
    </GestureHandlerRootView>
  );
};
Video with two examples:

Screen.Recording.2021-06-29.at.15.06.01.mov
See this repo with two examples.

React navigation

If you create a Modal inside react-navigation's stack and wrap the content of the Modal in GestureHandlerRootView as the documentation says, it reproduces the second example and RNGH buttons in a Modal will not work.

This is happening because react-navigation wraps the stack content in GestureHandlerRootView and your GH root view in a Modal renders as a simple View.

How to fix

Why does the button in the Modal work in the first case, but not in the second?

If we look at the 17th line of the GestureHandlerRootView.android.tsx file we see, that nested gesture handler root views renders as View. If you try to delete 17-22 lines from the GestureHandlerRootView.android.tsx file the second example will start working.

Video reproduced what will be if you delete 17-22 lines from the GestureHandlerRootView.android.tsx file (uploaded to YouTube, because GitHub does not allow uploading large files):

As a result, if the nested GestureHandlerRootView is NOT rendered as a simple View, RNGH buttons in a Modal in Android will work. I created a pull request #1493 that fixes it.

2023, problem is still there, but this worked. Thanks!

Answer 97 · 2023-08-25T05:11:19.000Z

I got this working using the suggestion for Library authors
<Modal>
    <GestureHandlerRootView style={{width:'100%', height:'100%'}}>
        <myGestureEnabledComponent/>
    </GestureHandlerRootView>
</Modal>
Only tested on my Pixel 5 so far, but things are looking good so far
Works for nexus5x emulator.
not worked when using stack of react-navigation

Thanks its working for me

Answer 98 · 2023-09-14T07:32:40.000Z

Thanks its working for me

Thanks for summarising @Goowwy . Works like a charm in Android modal! You all are life savers!