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

Expo SDK
,
1

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

2

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
3

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

4

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.

5

I have the same problem two weeks ago and it has even delayed the official launch of my project because all the icons are not displayed unless I delete the metro.config.js file or delete the resolver that processes svg except that my code party that uses svg will not work either.

I even tried to create a new project and nothing works, I think it’s a severe bug.

6

@philodi - can you share a minimal reproducible example? i’m happy to investigate if so. How to create a Minimal, Reproducible Example - Help Center - Stack Overflow

7

Thanks, I have already corrected it, the issue is that I was using metro-config instead of @expo/metro-config packages

1 Like
8

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.