Please provide the following:
- SDK Version 40
- Platforms(all)
- 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!