callstack / callstack/react-native-paper
Icons not showing after upgrading to Expo SDK 50
- Dominant language
- TypeScript
- Stars
- 14.5k
- Forks
- 2.2k
- Avg merge
- 5d 23h
- Merged PRs (30d)
- 12
Description
### 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
Contributor guide
Assessment
This issue has not been assessed yet.