Icons Not Loaded After Updating ReactNative Expo to Version 40

TL; DR: If you’re loading SVGs, check into your metro.config.js and see if you’re using the getDefaultConfig from '@expo/metro-config'. If you’re requiring it from 'metro-config', you should update your code based on the one below. More info in the readme of ‘react-native-svg-transformer‘

Recently I’ve had an issue with updating a project I was working on – after updating the Expo SDK to version 40, the icons stopped working.

The project was using react-native-elements, so this was my first guess for the cause of the issue. Digging a bit deeper, it turned out that any icon from @expo/vector-icons was shown as an X in a square.

Digging through the project (and github issues) I decided to create an empty expo project and gradually include the files. Doing so, I found out that there was a custom metro.config.js that took care for loading the SVGs. Looking into the readme of the 'react-native-svg-transformer' and Eurica 🙂 from version 40 or newer, the code in the metro.config.js should be different:

const { getDefaultConfig } = require("@expo/metro-config");

module.exports = (async () => {
  const {
    resolver: { sourceExts, assetExts }
  } = await getDefaultConfig(__dirname);
  return {
    transformer: {
      babelTransformerPath: require.resolve("react-native-svg-transformer")
    },
    resolver: {
      assetExts: assetExts.filter(ext => ext !== "svg"),
      sourceExts: [...sourceExts, "svg"]
    }
  };
})();

And don’t forget to install the '@expo/metro-config' module:

yarn add @expo/metro-config
// or
npm install @expo/metro-config

That’s it and happy hacking 🙂