callstack / callstack/react-native-paper

Nested component in Portal not receiving state values of React Context

Đang mở
#3,880 15 bình luận 15 reaction 0 người được giao Xem trên GitHub
bug Portal
Ngôn ngữ chính
TypeScript
Star
14.5k
Fork
2.2k
Merge trung bình
5 ngày 23 giờ
Pull request đã merge (30 ngày)
12

Mô tả

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

Hướng dẫn đóng góp

Mở hướng dẫn đóng góp

Hướng nghiên cứu

Bắt đầu bằng cách tái hiện hành vi trong Expo Snack được liên kết, sau đó đọc entry point của component Portal và theo dõi cách nội dung lồng nhau của nó được render. Xác nhận liệu giá trị context có chỉ không khả dụng bên trong nội dung Portal hay không. Được xem là hoàn tất khi component lồng nhau nhận cùng trạng thái context như component bên ngoài Portal, kèm theo phạm vi kiểm thử hồi quy cho thiết lập đã được báo cáo.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Đánh giá

Công nghệ
react-native, typescript
Lĩnh vực
mobile
Loại issue
Lỗi
Độ khó
3/5
Thời gian dự kiến
1-2 ngày
Mức độ hoạt động
Đình trệ
Độ rõ ràng
Khá rõ ràng
Mức phù hợp với người mới
35/100

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.