react native gesture handler is not working with modal in Android

Question

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

Answer 1

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