1

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
Ardika Rifqi
  • 11
  • 1
  • 2

1 Answers1

0

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`.

Sven Lombaert
  • 85
  • 1
  • 7
  • I'd love to use Navigation.showModal(), especially in Apple devices. Apple is supporting Modal scenario, where Android just show a full-screen page – Ardika Rifqi Dec 11 '20 at 12:46