React-native-paper: Integration with navigation libraries

[satya164]

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.

[phantom1299]

Any news about integration with wix navigation? Its a bit ugly to have each screen wrapped with a provider :/

[thebergamo]

If we look to other libraries for example: mastermoo/react-native-action-button they basically add the button in a fixed position and the user can control it with some props.

Instead of using portal to render the FAB or FAB.Group, we can just have it on top of the screen belonging to this tree but on top of others surfaces. This for sure will solve this problems related to navigations.

[kabus202]

Any update on this?

[satya164]

As of latest version, we don't wrap anything in Portal by default. You can position them on top of everything the way you want, either by using the provided Portal component, absolute positioning or your custom portal alternative.

[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 ?

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

[ferrannp]

Stale. Feel free to re-open if you want to implement something related.