callstack / callstack/react-native-paper

Nested component in Portal not receiving state values of React Context

未关闭
#3,880 15 条评论 15 个 reaction 已指派 0 人 在 GitHub 查看
bug Portal
主要语言
TypeScript
星标
14.5k
派生
2.2k
平均合并
5 天 23 小时
30 天内合并 PR
12

描述

### 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

贡献指南

打开贡献指南

调研方向

首先在链接的 Expo Snack 中复现该行为,然后阅读 Portal 组件的入口点,并跟踪其嵌套内容是如何渲染的。确认 context 值是否仅在 Portal 内容内部不可用。完成的标准是嵌套组件接收到与 Portal 外部组件相同的 context 状态,并且针对所报告设置具备回归覆盖。

由索引模型根据 Issue 内容生成。

评估

技术栈
react-native, typescript
领域
mobile
Issue 类型
缺陷
难度
3/5
预计耗时
1-2 天
活跃度
停滞
描述清晰度
基本清楚
新手友好度
35/100

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。