callstack / callstack/react-native-paper

Icons not showing after upgrading to Expo SDK 50

Aperta
#4,295 46 commenti 17 reazioni 0 assegnatari Vedi su GitHub
bug
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
![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

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

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.