callstack / callstack/react-native-paper

Nested component in Portal not receiving state values of React Context

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

Description

### Current behaviour
When using Portal component you are not given the context of the state in the wrapping/global React Context Provider

### Expected behaviour
You should be able to access the state values of the Context Provider

### How to reproduce?
- create a new expo app
- install react-native-paper
- create a context using createContext from react and give it an initial state/default value
- wrap the entire app in your named context.Provider
- create any component (text, view, snackbar etc.)
- using the Portal component wrap the created component
- inside the created component call the useContext() with your created context as the parameter
- expect the state to be defined/a value, but it is undefined

https://snack.expo.dev/184285Vsi - here is a simple snack to what the issue is, with some logs

### Preview
The Context and Provider
![image](https://github.com/callstack/react-native-paper/assets/41947220/5933da12-2b5a-47bd-9a25-25865a78395f)

Main App wrapped in Provider
![image](https://github.com/callstack/react-native-paper/assets/41947220/99e54a63-a8e9-4328-8b0e-fa7a32a800cd)

Portal Component
![image](https://github.com/callstack/react-native-paper/assets/41947220/9fcec0b7-cade-495a-827b-d100b6ea7669)

nested component of Portal
![image](https://github.com/callstack/react-native-paper/assets/41947220/448ca2be-8994-42d8-aa35-3a96f030e232)

Log of initial values outside of Portal
![image](https://github.com/callstack/react-native-paper/assets/41947220/20138a2e-4135-4bbc-bd71-aded9b800829)

We expect these values to be the same within the portal

However as seen the in screenshot of the logs below it is undefined:
![image](https://github.com/callstack/react-native-paper/assets/41947220/8428389e-e1c9-4966-8acf-a2437ae09499)

### What have you tried so far?
To fix this I have passed in the state values as props to the nested component - this seems to work, however it is defeating the purpose of using Context Providers of react

### Your Environment

| software | version
| ----------------------- | -------
| react-native | 0.71.7
| react-native-paper | ^5.7.0
| node | 16.19.0
| npm | 8.19.3
| expo sdk | ^48.0.11

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.