callstack / callstack/react-native-paper
Icons not showing after upgrading to Expo SDK 50
- 主要语言
- TypeScript
- 星标
- 14.5k
- 派生
- 2.2k
- 平均合并
- 5 天 23 小时
- 30 天内合并 PR
- 12
描述
### 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

#### After

### 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
贡献指南
调研方向
从 src/components/MaterialCommunityIcon.tsx 以及 issue 中描述的 Expo SDK 50 babel-preset 更改开始。将现有的 babel.config.js workaround 与 package 设置进行比较,然后验证 Storybook react-native-web 中的复现。Material Icons 能够正确渲染且相关的控制台警告消失,即表示完成。
由索引模型根据 Issue 内容生成。
评估
- 技术栈
- react-native, typescript
- 领域
- frontend, mobile-dev
- Issue 类型
- 缺陷
- 难度
- 4/5
- 预计耗时
- 3-5 天
- 活跃度
- 停滞
- 描述清晰度
- 基本清楚
- 新手友好度
- 42/100