Icons not showing after upgrading to Expo SDK 50

[benjaminkomen]

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 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. 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

[PavloPoliakov]

Thank you for creating the issue. I experience the same with import Ionicons from "@expo/vector-icons/Ionicons"; and iOS. Icons just gone, I don't see any squares even. The suggested fix did not work for me, so I had to revert to @49.

[velusoft]

Team, We are also facing same issue in React Native using Vector icons. The suggested fix did not work for us. could you please help us?

[Eliost]

Same issue here

[mattThousand]

Experiencing the same issue

[mathias-berg]

I also had issue but it was solved by setting containerColor="transparent on the IconButton component. I have only tried web.

[karimessouabni]

same here.

[WillSmithTE]

Is this only on web everyone is experiencing this? or ios/android too?

[mazshakibaii]

I'm experiencing this on iOS too.

[FloKla]

I'm experiencing this on Web too since updating to expo 50

[AnjanaDhakal]

i am experiencing on android..

[willstepp]

We just upgraded our app from Expo 49 to Expo 50, encountered this issue on web, but the tempfix proposed by @benjaminkomen did work 👍 (if relevant, we are using Material Theme version 2)

[drcodemonster]

@benjaminkomen thanks for the clue.. I slightly changed your code and it works!!
For those having similar issue edit your babel.congif.js file as this one:

module.exports = function (api) {
  api.cache(true)
  return {
    presets: ['babel-preset-expo'],
    plugins: [
      'nativewind/babel',
      'react-native-reanimated/plugin',
      'transform-inline-environment-variables',
      [
        'module-resolver',
        {
          alias: {
            '@': './src',
            'react-native-vector-icons': '@expo/vector-icons',
          },
        },
      ],
    ],
    env: {
      production: {
        plugins: ['react-native-paper/babel'],
      },
    },
  }
}