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

[PavelPolyakov]

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.

[simonmaquilon]

Same issue here, any fix?... I had to revert to SDK 49.

[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'],
      },
    },
  }
}

[pedrolmsin]

I'm experiencing this problem with all the react-native-paper components, when I generate my iOS build with the EAS CLI all the icons are a square in place, I've tried the solutions presented above and nothing has worked, has anyone found another solution?

[pedrolmsin]

For those who are experiencing the same issue, my icons didn't appear when I used EAS to generate my iOS build, I had to change api.cache(true) to api.cache(false), then the icons started to appear in the iOS build, my babel.conf was as follows:

module.exports = function(api) {
api.cache(false);
return {
presets: ['babel-preset-expo'],
plugins: [
[
'babel-plugin-module-resolver', {
alias: {
'react-native-vector-icons': '@expo/vector-icons',
},
}
],
],
env: {
production: {
plugins: ['react-native-paper/babel'],
},
},
};
};

[kevinstevanus]

any update on this?

[PavelPolyakov]

babel-plugin-module-resolver does not work for me and I still can not upgrade to v50.
In addition, when I open the screen with icons I see the next warning.

I'm confused. This issue has some regular upvotes, but it does seem that for the majority of people icons are working. How is our case different then? 🤔

[PavelPolyakov]

I did another test — created a clean app with npx create-expo-app StickerSmash and there icons were doing fine ✅

Which made me think that this bug is only present for those who upgrades.

This is what helped me at the end:

rm package-lock.json
rm bun.lockb
rm -rf node_modules
npm i 
bun i

Icons are there — back in place 🥳

[Victor-Varghese]

Any updates?

I tried removing package-lock, and added the mentioned fix in babel.config.js. nothing works in iOS. Icons are visible on android.

upgrading from SDK 49 to 50, followed by expo install --fix

[butri71]

Has anyone managed to get a working workaround after upgrading to v50? I see icons in iOs but nothing in Android

[Victor-Varghese]

UPDATE

I started the upgrade process from scratch and it worked. Icons was working on ios and android without any workarounds.

Link: https://docs.expo.dev/workflow/upgrading-expo-sdk-walkthrough/

npm install expo@latest
npx expo install --fix

Related: expo/expo#27602

[JPStrydom]

Any updates?

I tried removing package-lock, and added the mentioned fix in babel.config.js. nothing works in iOS. Icons are visible on android.

upgrading from SDK 49 to 50, followed by expo install --fix

Unfortunately Expo 51 (current latest) requires moving away from React Navigation in favor of Expo Router in order to support web apps, which is quite a big architectural change. It would be ideal if this fix could work on Expo 50 as well, or if there could be a way to still use Expo 51 with React Navigation.

[raajnadar]

@JPStrydom expo router under the hood uses react-navigation, make sure you guys clear the cache after the upgrade process

https://stackoverflow.com/a/72332470/5519872

[Victor-Varghese]

Any updates?
I tried removing package-lock, and added the mentioned fix in babel.config.js. nothing works in iOS. Icons are visible on android.
upgrading from SDK 49 to 50, followed by expo install --fix

Unfortunately Expo 51 (current latest) requires moving away from React Navigation in favor of Expo Router in order to support web apps, which is quite a big architectural change. It would be ideal if this fix could work on Expo 50 as well, or if there could be a way to still use Expo 51 with React Navigation.

@JPStrydom it worked for me in SDK 50 not 51

[JPStrydom]

We build without cache in our pipelines and still had the same issues with icons on web. At least the babel plugin fix works for us as an interim solution:

module.exports = api => {
  api.cache(true);
  return {
    env: { production: { plugins: ['react-native-paper/babel'] } },
    plugins: [
      ['module:react-native-dotenv', { moduleName: '@env' }],
      [
        // TODO: [Expo 50] Once the web icon issue on RNP has been fixed, this alias override can be removed and babel-plugin-module-resolver can be uninstalled (https://github.com/callstack/react-native-paper/issues/4295)
        'babel-plugin-module-resolver',
        { alias: { 'react-native-vector-icons': '@expo/vector-icons' } }
      ]
    ],
    presets: ['babel-preset-expo']
  };
};

I understand that expo-router uses react-navigation under the hood, but, as far as I understand, one cannot build for web using the Metro bundler (as opposed to the old @expo/webpack-config bundler) without using Expo router.

Is this understanding correct, or can one build for web with Metro without migrating to expo-router?

[chriscoomber]

To anyone (like me) with this issue who is still using @expo/webpack-config for web builds (i.e. you have a webpack.config.js file) (i.e. you've not migrated to Expo Router after upgrading to Expo SDK 50), a quick fix is to add:

config.resolve.alias['react-native-vector-icons'] = '@expo/vector-icons';

to your webpack config. This seems to work for me. (Naturally, this only affects issues seen on web.)

[cbrusca]

I tried everything suggested here and nothing worked. It's still broken on SDK51. I ended up replacing the icons manually in my navigators with expo/vector-icons

example...

export const DrawerIcon= props =>
<Icon
onPress={() => props.navigation.toggleDrawer()}
name={useDrawerStatus() === 'open' ? 'chevron-back-outline' : 'menu-outline'}
/>

then in my navigation options...

headerLeft: () => (

)

hope this helps someone, I know this issue drove me crazy