Integration with navigation libraries

The behavior of components with Portal can be unintuitive in various navigation libraries such as React Navigation and Wix navigation, and even our own BottomNavigation component.

• With React Navigation’s Tab Navigator and our Bottom Navigator, screens don’t unmount after navigating away. This means a component using portals such as FAB will stay rendered when the screen is not active
• In navigation libraries like Wix, you need to wrap each screen in provider since there’s no single root

We need to document these scenarios and provide instructions on how to tackle them.

For React Navigation, the easiest solution could’ve been to wrap each screen in its own Provider like Wix, but that wouldn’t work well since the navigation bar, tab bar etc. are rendered outside the screen and things rendered in Portal won’t be able to cover the navigation bar and access theme from context. We would probably need to hook into react-navigation’s focus events to automatically manage visibility of items. So we would probably need to provide a custom Portal for React Navigation users.

[eightyfive]

Side note, I can report at least one problem using react-native-paper with Wix Navigation (RNN).

Context: I am showing a small Toast/Snackbar at the bottom of the screen inside a RNN overlay.

But when using RNN interceptTouchOutside = false Overlay option, it seems like some component added by <PaperProvider /> is intercepting the taps, and not letting them through.

Navigation,showOverlay({
  component: {
    name: 'Toast',
    options: {
      overlay: {
        interceptTouchOutside: false
      }
    }
  }
})

I initially thought it was a RNN bug, but I can confirm it is not, removing <PaperProvider /> from my code made the RNN Overlay behave as expected.

UPDATE Using ThemeProvider directly solves the problem.

[cassioseffrin]

Hello @satya164. I consider wix navigation v2 one of the best options for navigation. And react-native-paper is another good option for UI. Could you please give me one information about these two libraries. Both can work together or may they have some kind of incompatibility ?