callstack / callstack/react-native-paper

React Navigation and Portal

Open
#4,022 8 comments 3 reactions 0 assignees View on GitHub
Portal question
Dominant language
TypeScript
Stars
14.5k
Forks
2.2k
Avg merge
5d 23h
Merged PRs (30d)
12

Description

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

Contributor guide

Open the contributing guide

Research direction

Start by reproducing the error with React Native Paper's Portal and Dialog inside a React Navigation NavigationContainer. Trace how the Portal relocates the Dialog and how the card's navigation call resolves its navigation object. Done means documenting a supported navigation approach or clearly describing the limitation and required integration boundary.

Written by the indexing model from the issue text.

Assessment

Tech stack
react-native
Domain
mobile
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.