In Android Modal - Wrapping Content in Gesturehandlerrootview Not Fixing React-Native-Gesture-Handler

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 -

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

I created a snack demo of issue -

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>
  );
};
3
Robert Thorne

Robert Thorne

Automotive & Future Transportation Editor

Robert Thorne covers electric vehicle innovations, autonomous driving systems, global mobility trends, and automotive engineering developments.

Share this article