Metro/expo config makes google fonts stop working

[aas395]

I installed the react-native-svg-transformer package according to the directions. My app is also using these three packages:

"@expo-google-fonts/nunito-sans": "^0.1.0",
"@expo-google-fonts/roboto": "^0.1.0",
"@expo-google-fonts/source-sans-pro": "^0.1.0",

After creating the metro.config.js file and updating app.json, my app crashes on reload with this error: 'Unrecognized font family 'NunitoSans_900Black'. This font resolved fine before adding the transformer package.

It looks like the issue has something to do with the new metro config settings. Any thoughts on what could be going on? Thank you for any help you can provide!

[aas395]

Seems to be related to this issue: expo/expo#11333

This config works for me:

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

const defaultConfig = getDefaultConfig(__dirname);

module.exports = {
  transformer: {
    babelTransformerPath: require.resolve('react-native-svg-transformer')
  },
  resolver: {
    assetExts: [
      ...defaultConfig.resolver.assetExts.filter((ext) => ext !== 'svg')
    ],
    sourceExts: [...defaultConfig.resolver.sourceExts, 'svg']
  }
};

Suggest updating the docs at some point to reflect the new config requirements.