callstack / callstack/react-native-paper
Nested component in Portal not receiving state values of React Context
- 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

Main App wrapped in Provider

Portal Component

nested component of Portal

Log of initial values outside of Portal

We expect these values to be the same within the portal
However as seen the in screenshot of the logs below it is undefined:

### 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
Assessment
This issue has not been assessed yet.