In Android Modal - wrapping content in GestureHandlerRootView not fixing react-native-gesture-handler

Please provide the following:

  1. SDK Version: 40.0.0
  2. Platforms(Android/iOS/web/all): Android
  3. Add the appropriate “Tag” based on what Expo library you have a question on.

I am using expo ^40.0.0.

I am trying to get react-native-gesture-handler components to work in a <Modal> from react-native in Android. I followed docs here - Getting Started | React Native Gesture Handler

It stays to wrap in <GestureHandlerRootView>, I did this but it doesn’t fix the issue.

I created a snack demo of issue - frisky carrot - Snack

Here you see a “Tapped here count: 0”. Please try tapping it, you will see it doesn’t increment the counter.

You will see a “RN BUTTON” this works but it is not from react-native-gesture-handler.

Here is my code from the snack:

import * as React from 'react';
import { Text, View, Modal, Button as RNButton } from 'react-native';
import {
  BaseButton,
  GestureHandlerRootView
} from 'react-native-gesture-handler';


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

const Example = function () {
  const [cnt, setCnt] = React.useState(0);
  return (
    <View style={{ justifyContent: 'center', flex: 1 }}>
      <RNButton title="rn button" onPress={() => alert('hi')} />
      <GestureHandlerRootView>
        <BaseButton
          onPress={() => {
            // alert('pressed');
            setCnt(cnt + 1);
          }}
        >
          <View style={{ backgroundColor: 'steelblue', height: 100 }}>
            <Text>Tapped here count: {cnt}</Text>
          </View>
        </BaseButton>
      </GestureHandlerRootView>
    </View>
  );
};

Wow weird, I fixed it. Apparently Expo is not properly exporting the file improperly. I think I have to file a bug.

Here is working file - Fixed gesture-handler components in Modal in expo - Snack

Instead of GestureHandlerRootView we have to create our own like this:

const GestureHandlerRootViewNative = Platform.OS === 'android'
  ? requireNativeComponent(
      'GestureHandlerRootView',
      // @ts-note: TS is saying only one arg supported. I tested one arg, and it
      // works. But I copied this from
      // `node_modules/react-native-gesture-handler/GestureHandlerRootView.android.js`
      // and they use this 2nd argument, so I'm keeping it.
      { name: 'GestureHandlerRootView', propTypes: { ...ViewPropTypes } }
    )
  : View;

Hey @noitidart, thanks for following up with what worked for you. If you wouldn’t mind, creating a github issue would be most appreciated.

Cheers,
Adam

1 Like

Totally thanks for asking! :slight_smile:

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.