react-native-paper
react-native-paper copied to clipboard
callstack
React Navigation and Portal
I'm working with React Native Paper and React Navigation and am attempting to display a Dialog that appears above one of my screens and provides a list of cards. Each card, when clicked on, should navigate the user to a details screen. I'm attempting to use the Portal component to render the Dialog above the current screen. However, I'm currently getting the following error when clicking on the cards: "Uncaught Error: Couldn't find a navigation object. Is your component inside NavigationContainer?"
This appears to be because, as the documentation for Portal states "Portal allows rendering a component at a different place in the parent tree", which I take to mean completely outside of the top-level App component (and therefore outside of NavigationContainer").
My question is, does React Native Paper provide any way for Portal to access the navigation object for the rest of the app, or will I need to implement a custom Component that provides the same layout as Portal (i.e. the elevated, shaded background that my Dialog is displayed in)?
So, as a workaround for this, instead of trying to access the navigation directly from within the Cards that are rendered inside Portal, I added an onPress prop to the Cards and passed down a function that performs the navigation. Since the function passed down is declared in the parent Component that contains the Portal, it has access to the app's navigation.
Make sure your react-native-paper <PaperProvider> is nested inside the react-navigation <NavigationContainer>, not the other way around.
Hi @robert-asystyou, are you able to provide the repro of your issue in form of snack or sample repo?
Hi, I get same message when I try to use Stack navigator in Poral element. When I put PaperProvider into NavigationContainer I get this message: Another navigator is already registered for this container. You likely have multiple navigators under a single "NavigationContainer" or "Screen". Make sure each navigator is under a separate "Screen" container.
This issue seems to be related to this other one #3880 .
The <Portal> component seems not to follow the React principles of inheriting the contexts upward the component tree.
React Navigation also uses Context: https://reactnavigation.org/docs/navigation-context
