CODEWITHSUNDEEP
javascriptandroidreactjsreact-nativereact-native-gesture-handler
Amila Dulanjana
Amila Dulanjana

Reputation: 1914

react native gesture handler is not working with modal in Android

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

Upvotes: 6

Views: 13797

Answers (2)

cYee
cYee

Reputation: 2184

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

Upvotes: 15

user938363
user938363

Reputation: 10358

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.

Upvotes: 1

Related Questions