Problem with custom fonts after adding metro.config.js in React Native

user_14867797 0
Viewed 810

I use custom fonts in my React Native App, and it goes perfect. But i need to add SVG files in it, so i added metro.config.js file with following code. After that i have an error: Unrecognized font family 'NunitoSemiBold' Does anybody know how that file metro.config.js can conflict with custom fonts?

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

I had the exact same issue and I found a fix. My guess is that there is an issue when merging (probably not merging in that case) the metro-config written from react-native-svg-transformer and the default one from expo.

Anyway, after reading the expo doc page regarding customizing the metro config, I just changed the metro config package default config

yarn add -D @expo/metro-config

then I update the metro.config.js:

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

const {
    resolver: { sourceExts, assetExts },
} = getDefaultConfig(__dirname);

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

Enjoy!

user_148934160

Try changing the source file for getDefaultConfig from metro-config to @expo/metro-config. Works well for me.

Ref: Expo doc

user_160241620
Related