callstack / callstack/react-native-paper

Icons not showing after upgrading to Expo SDK 50

Đang mở
#4,295 46 bình luận 17 reaction 0 người được giao Xem trên GitHub
bug
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
After upgrading to Expo SDK 50, icons are not showing in Storybook (using react-native-web). Instead of icons it falls back to [this unicode square](https://github.com/callstack/react-native-paper/blob/2901378be257d147b1bb42f9e9b99fe8ea245f21/src/components/MaterialCommunityIcon.tsx#L69) and the related warning is displayed in the console.

The reason seems to be the change in `babel-preset-expo`, as lined out by [expo in their release notes](https://expo.dev/changelog/2024/01-18-sdk-50). It seems that react-native-paper uses react-native-vector-icons, but they are not aliased anymore.

### Expected behaviour
Material Icons used in react-native-paper components are displayed correctly with react-native-web using Expo SDK 50.

### How to reproduce?
- Upgrade to Expo SDK 50
- View your react-native-paper component on the web (using react-native-web)

### Preview
#### Before
![Screenshot 2024-01-23 at 12 55 37 PM](https://github.com/callstack/react-native-paper/assets/12815582/a663256a-860a-4d31-9fbc-c2b39848e7dc)

#### After
![Screenshot 2024-01-23 at 12 56 44 PM](https://github.com/callstack/react-native-paper/assets/12815582/cec9de96-80fd-4569-bf7d-18b999097c1d)

### What have you tried so far?
- Adding `react-native-vector-icons` as a dependency does not solve the problem.
- The issue is fixed by adding the following to `babel.config.js`:
```
plugins: [
[
'babel-plugin-module-resolver', {
alias: {
'react-native-vector-icons': '@expo/vector-icons',
},
}],
],
```
but ideally this would be fixed in a better way.

### Your Environment

| software | version
| --------------------- | -------
| ios | 17.2
| android | 14
| react-native | 0.73.2
| react-native-paper | 5.12.2
| node | 18.18.0
| npm or yarn | v1.22.21
| expo sdk | 50.0.2

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

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

Hướng nghiên cứu

Bắt đầu với src/components/MaterialCommunityIcon.tsx và thay đổi babel-preset của Expo SDK 50 được mô tả trong issue. So sánh workaround hiện có trong babel.config.js với thiết lập package, sau đó xác minh bản tái hiện trong Storybook react-native-web. Được xem là hoàn tất khi Material Icons hiển thị đúng và cảnh báo liên quan trong console biến mất.

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
frontend, mobile-dev
Loại issue
Lỗi
Độ khó
4/5
Thời gian dự kiến
3-5 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
42/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.