Icons not showing after upgrading to Expo SDK 50 about react-native-paper HOT 25 OPEN

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

from react-native-paper.

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

from react-native-paper.

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 🥳

from react-native-paper.

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)

from react-native-paper.

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

from react-native-paper.

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.

from react-native-paper.

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?

from react-native-paper.

Same issue here

from react-native-paper.

Experiencing the same issue

from react-native-paper.

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

from react-native-paper.

same here.

from react-native-paper.

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

from react-native-paper.

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

from react-native-paper.

I'm experiencing this on iOS too.

from react-native-paper.

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

from react-native-paper.

i am experiencing on android..

from react-native-paper.

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?

from react-native-paper.

any update on this?

from react-native-paper.

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? 🤔

from react-native-paper.

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

from react-native-paper.

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

from react-native-paper.

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.

from react-native-paper.

@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

from react-native-paper.

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

from react-native-paper.

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?

from react-native-paper.