react-native-paper: Icons not showing after upgrading to Expo SDK 50

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

Screenshot 2024-01-23 at 12 55 37 PM

After

Screenshot 2024-01-23 at 12 56 44 PM

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

About this issue

Original URL
State: open
Created 5 months ago
Reactions: 9
Comments: 19 (1 by maintainers)

Most upvoted comments

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 🥳

PavelPolyakov on Apr 9, 2024

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

drcodemonster on Mar 16, 2024

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)

willstepp on Mar 14, 2024