Issues with imported Fonts with react-native-svg-transformer in Expo SDK v40.0

Please provide the following:

  1. SDK Version 40
  2. Platforms(all)
  3. Add the appropriate “Tag” based on what Expo library you have a question on.

I recently began development on a React Native/Expo project and had been making use of custom fonts and expo icons just fine up until I changed my metro.config.js settings to allow for the import of SVG files as React Native components.

SVGs are working fine now with react-native-svg-transformer but the custom fonts are no longer being recognized, I’m receiving the error:

"Unrecognized font family "Maquette400" "

My current metro config settings are as follows:

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

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

module.exports = {
  transformer: {
    assetPlugins: ['expo-asset/tools/hashAssetFiles'],
    getTransformOptions: async () => ({
      transform: {
        experimentalImportSupport: false,
        inlineRequires: false,
      },
    }),
    babelTransformerPath: require.resolve('react-native-svg-transformer'),
  },
  resolver: {
    assetExts: assetExts.filter((ext) => ext !== 'svg'),
    sourceExts: [...sourceExts, 'svg'],
  },
};

These are my settings prior to setting up SVG transformer

module.exports = {
  transformer: {
    assetPlugins: ['expo-asset/tools/hashAssetFiles'],
  },
};

From what research I’ve done, this seems to be a known issue when using both SVG transformer and Expo SDK 40 as I’ve encountered various developers also running into the same issue and resolving it in different ways, although none of the methods they’ve tried have resolved my problem.

If anyone has any experience with such a conflict or setting up the metro.config.js for a React Native/Expo project, it would be greatly appreciated!

SVG transformer conflicting with SASS/SCSS

SVG transformer breaking fonts/icons with SDK 40

start a new project, try to reproduce it there with no superfluous code, if you are unable to reproduce it there then you can compare your project and the new project. if you can reproduce, please share a link to a github repo

1 Like

Gotcha, I’ll do that and let you know my results and if they’re reproducible

Upon starting a barebones project, the fonts and SVGs were able to work fine, so I’ll need to investigate further as to whether there’s a package conflict occurring.