I am having an issue in using PanGestureHandler from react-native-gesture-handler with Modal. This is perfectly working in iOS but not in android. And Moreover when I changed Modal in to View component it is working in Android as well. Please any one can suggest me a solution for this problem.

class Circle extends Component {
  _touchX = new Animated.Value(windowWidth / 2 - circleRadius);
  _onPanGestureEvent = Animated.event([{ nativeEvent: { x: this._touchX } }], { useNativeDriver: true });
  render() {
    return (
      <Modal
        isVisible={true}
      >
        <PanGestureHandler
          onGestureEvent={this._onPanGestureEvent}>
          <Animated.View style={{
            height: 150,
            justifyContent: 'center',
          }}>
            <Animated.View
              style={[{
                backgroundColor: '#42a5f5', borderRadius: circleRadius, height: circleRadius * 2, width: circleRadius * 2,
              }, {
                transform: [{ translateX: Animated.add(this._touchX, new Animated.Value(-circleRadius)) }]
              }]}
            />
          </Animated.View>
        </PanGestureHandler>
      </Modal>
    );
  }
}

I am having an issue in using PanGestureHandler from react-native-gesture-handler with Modal. This is perfectly working in iOS but not in android. And Moreover when I changed Modal in to View component it is working in Android as well. Please any one can suggest me a solution for this problem.

class Circle extends Component {
  _touchX = new Animated.Value(windowWidth / 2 - circleRadius);
  _onPanGestureEvent = Animated.event([{ nativeEvent: { x: this._touchX } }], { useNativeDriver: true });
  render() {
    return (
      <Modal
        isVisible={true}
      >
        <PanGestureHandler
          onGestureEvent={this._onPanGestureEvent}>
          <Animated.View style={{
            height: 150,
            justifyContent: 'center',
          }}>
            <Animated.View
              style={[{
                backgroundColor: '#42a5f5', borderRadius: circleRadius, height: circleRadius * 2, width: circleRadius * 2,
              }, {
                transform: [{ translateX: Animated.add(this._touchX, new Animated.Value(-circleRadius)) }]
              }]}
            />
          </Animated.View>
        </PanGestureHandler>
      </Modal>
    );
  }
}

• javascript
• android
• reactjs
• react-native
• react-native-gesture-handler

• Did you manage to solve this? – D10S Commented Jul 20, 2020 at 17:34
• No, didn't found a solution – Amila Dulanjana Commented Jul 20, 2020 at 18:05
• It's a known issue. There are multiple tickets about it, the main one github.com/software-mansion/react-native-gesture-handler/issues/… – Petr Bela Commented Sep 1, 2020 at 0:34

2 Answers 2

You can use GestureHandlerRootView

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

 <Modal>
    <GestureHandlerRootView style={{flex:1}}>
        <myGestureEnabledComponent/>
    </GestureHandlerRootView>
</Modal>

If you're using gesture handler in your component library, you may want to wrap your library's code in the GestureHandlerRootView component. This will avoid extra configuration in MainActivity.java for the user. Source

Related issue in react-native-modal

Here is a quote from the doc of react-native-gesture-handler about Modal and gesture handler together on Android:

Usage with modals on Android#
On Android RNGH does not work by default because modals are not located under React Native Root view in native hierarchy. In order to make it workable, components need to be wrapped with gestureHandlerRootHOC (it's no-op on iOS and web).

E.g.

const ExampleWithHoc = gestureHandlerRootHOC(function GestureExample() {
  return (
    <View>
      <DraggableBox />
    </View>
  );
});

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

But I didn't try the code above.