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 🙂