Doesn't work in a modal

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

+1
any workaround?

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

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

+1

@martinezguillaume

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.

@osdnk

@osdnk is this fixable?

+1 gesture does not work on modal

I also ran into this bug today.

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?

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.

@martinezguillaume

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

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?

Fix modals (software-mansion#1603)

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. :)

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

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>
  )

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.

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).

Still not working on Android 👎

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>
  );
}

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!

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

@Goowwy

Thanks its working for me

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

"react": "18.2.0",
"react-native": "0.72.5",
"react-native-gesture-handler": "^2.13.1"

Wrapping the components that uses the RNGH stuff still works like a charm!

Thank you so much everyone!

fix (RNGH): BottomSheet buttons are not working

fix (RNGH): BottomSheet buttons are not working (#1056)

Navigation Menu

Repository navigation

Doesn't work in a modal #139

89 remaining items

Examples

React navigation

How to fix

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Doesn't work in a modal #139

Description

Activity

mordaha commented on Jun 8, 2018

martinezguillaume commented on Jun 8, 2018

mordaha commented on Jun 8, 2018

csto commented on Jun 20, 2018

osdnk commented on Jul 10, 2018

mars-lan commented on Jul 14, 2018

ParhamZare commented on Dec 11, 2018

ewendel commented on Jan 28, 2019

Dmitrylolo commented on Feb 26, 2019

samzmann commented on Mar 26, 2019

osdnk commented on Mar 26, 2019

89 remaining items

eduardorfreitas93 commented on Jan 19, 2022

thahermps commented on May 2, 2022

prasanthmurugasamy commented on Jul 4, 2022

zhaiyjgithub commented on Jul 7, 2022

hugoh59 commented on Aug 3, 2022

first-dev commented on Aug 30, 2022

ser-emejia commented on Jan 26, 2023

usedlife commented on Apr 18, 2023

Martijncvv commented on Jul 7, 2023

Examples

React navigation

How to fix

Goowwy commented on Aug 25, 2023

ammarfaris commented on Sep 14, 2023

steniowagner commented on Oct 13, 2023

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions