CODEWITHSUNDEEP
react-nativesvgfontsexpometro-bundler
immxalan
immxalan

Reputation: 1

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

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 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!

Here is the link to react-native-svg-transformer and their set up instructions

SVG transformer conflicting with SASS/SCSS

SVG transformer breaking fonts/icons with SDK 40

Git issue for SVG transformer conflict with SDK 40

Upvotes: 0

Views: 740

Answers (1)

E.D
E.D

Reputation: 891

If you still need a solution, use this :https://github.com/gregberge/svgr No custom metro config needed

Upvotes: 0

Related Questions