callstack / callstack/react-native-paper
Icons not showing after upgrading to Expo SDK 50
- Lingua principale
- TypeScript
- Stelle
- 14.5k
- Fork
- 2.2k
- Merge medio
- 5g 23h
- PR unite (30g)
- 12
Descrizione
### 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
Guida per i contributori
Apri la guida per i contributori
Direzione di ricerca
Start with src/components/MaterialCommunityIcon.tsx and the Expo SDK 50 babel-preset change described in the issue. Compare the existing babel.config.js workaround with the package setup, then verify the Storybook react-native-web reproduction. Done means Material Icons render correctly and the related console warning is gone.
Scritto dal modello di indicizzazione a partire dal testo della issue.
Valutazione
- Stack tecnologico
- react-native, typescript
- Ambito
- frontend, mobile-dev
- Tipo di issue
- Bug
- Difficoltà
- 4/5
- Tempo stimato
- 3-5 giorni
- Stato di attività
- Ferma
- Chiarezza
- Abbastanza chiara
- Idoneità per principianti
- 42/100