Using react-native-gesture-handler (RNGH) inside a modal with wix/react-native-navigation

Question

I'm trying to use RNGH components like TouchableOpacity inside a react-native-modal combined with wix/react-native-navigation. It doesn't work. When I tap it, no interaction happened.

Importing TouchableOpacity from react-native seems to be working. The problem is, I want to use import {TouchableOpacity} from 'react-native-navigation'; because it is more responsive compared to the original.

Could anyone explain why, or a workaround maybe?

Here is my app structure:

Wix react-native-navigation
|
|-- gestureHandlerRootHOC( Component (The Screen) )
      |
      |----- <Modal />
      |         |
      |         |------ TouchableOpacity <-- I cannot press this
      |
      |----- TouchableOpacity <-- But I can press this

Answer 1

From what I understand, react-native's Modal component creates a native ViewController that's not managed by react-native-navigation, thus not wrapped with the gestureHandlerRootHOC.

I'd suggest showing a RNN modal via Navigation.showModal(). That way your modal is also a registered screen wrapped with the gestureHandlerRootHOC`.