search

callstack / react-native-paper

Material Design for React Native (Android & iOS)
https://reactnativepaper.com
MIT License
12.51k stars 2.05k forks source link

React Navigation and Portal #4022

Open robert-asystyou opened 11 months ago

robert-asystyou commented 11 months ago

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

robert-asystyou commented 11 months ago

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.

DoctorJohn commented 10 months ago

Make sure your react-native-paper <PaperProvider> is nested inside the react-navigation <NavigationContainer>, not the other way around.

lukewalczak commented 10 months ago

Hi @robert-asystyou, are you able to provide the repro of your issue in form of snack or sample repo?

vlkpa commented 7 months ago

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.

danb4r commented 7 months ago

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