EXPO RN Cannot display SVG, issue with RNSVGPath

Hey,

I come to you as my last ressource. I tried everything but nothing worked for me.

I am currently using expo v49.0.21 and react-native 0.72.6, everything was working well but this morning I had the issue with icons ONLY when I am on dev-client expo go app. When running on simulator everything is fine.

I tried to pull older versions but I have the same issue.

Here is my package.json

{
  "name": "test-designed",
  "version": "1.0.2",
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "npx expo start",
    "android": "expo run:android",
    "ios": "expo run:ios",
    "web": "expo start --web",
    "lint": "npx eslint src/**",
    "lint:fix": "npx eslint ./src --fix",
    "prettier": "npx prettier src --check",
    "prettier:fix": "npx prettier src --write",
    "format": "npm run prettier:fix && npm run lint:fix"
  },
  "dependencies": {
    "@expo/vector-icons": "^13.0.0",
    "@gorhom/bottom-sheet": "^4.4.5",
    "@react-native-async-storage/async-storage": "1.18.2",
    "@react-native-community/datetimepicker": "7.2.0",
    "@react-native-community/slider": "4.4.2",
    "@react-native-masked-view/masked-view": "0.2.9",
    "@react-native-picker/picker": "2.4.10",
    "@react-native/metro-babel-transformer": "^0.74.0",
    "@react-native/metro-config": "^0.73.2",
    "@react-navigation/bottom-tabs": "^6.4.0",
    "@react-navigation/material-top-tabs": "^6.5.2",
    "@react-navigation/native": "^6.0.13",
    "@react-navigation/stack": "^6.3.4",
    "@shopify/flash-list": "1.4.3",
    "expo": "^49.0.21",
    "expo-av": "~13.4.1",
    "expo-camera": "~13.4.4",
    "expo-checkbox": "~2.4.0",
    "expo-constants": "~14.4.2",
    "expo-dev-client": "~2.4.12",
    "expo-firebase-app": "^2.0.0",
    "expo-firebase-firestore": "^2.0.0",
    "expo-image-manipulator": "~11.3.0",
    "expo-image-picker": "~14.3.2",
    "expo-linear-gradient": "~12.3.0",
    "expo-linking": "~5.0.2",
    "expo-location": "~16.1.0",
    "expo-media-library": "~15.4.1",
    "expo-screen-orientation": "~6.0.6",
    "expo-splash-screen": "~0.20.5",
    "expo-status-bar": "~1.6.0",
    "expo-updates": "~0.18.17",
    "firebase": "^10.7.1",
    "moment": "^2.29.4",
    "react": "18.2.0",
    "react-hook-form": "^7.42.0",
    "react-native": "0.72.6",
    "react-native-gesture-handler": "~2.12.0",
    "react-native-modal": "^13.0.1",
    "react-native-pager-view": "6.2.0",
    "react-native-popup-menu": "^0.16.1",
    "react-native-reanimated": "~3.3.0",
    "react-native-safe-area-context": "4.6.3",
    "react-native-screens": "~3.22.0",
    "react-native-svg": "13.9.0",
    "react-native-tab-view": "^3.3.4",
    "react-native-uuid": "^2.0.1",
    "react-redux": "^8.0.5",
    "redux": "^4.2.0",
    "redux-persist": "^6.0.0",
    "redux-thunk": "^2.4.2"
  },
  "resolutions": {
    "@expo/config-plugins": "~6.0.0",
    "@expo/prebuild-config": "~6.0.0"
  },
  "devDependencies": {
    "@babel/core": "^7.12.9",
    "concurrently": "^8.2.2",
    "eslint": "^8.55.0",
    "eslint-config-airbnb": "^19.0.4",
    "eslint-config-prettier": "^9.1.0",
    "eslint-plugin-import": "^2.29.0",
    "eslint-plugin-jsx-a11y": "^6.8.0",
    "eslint-plugin-prettier": "^5.0.1",
    "eslint-plugin-react": "^7.33.2",
    "eslint-plugin-react-hooks": "^4.6.0",
    "postcss": "^8.4.18",
    "prettier": "^3.1.0",
    "react-native-svg-transformer": "^1.2.0",
  },
  "private": true
}

I also tried all the metro.config.js possibilities

// const {getDefaultConfig, mergeConfig} = require('@react-native/metro-config')
// const defaultSourceExts = require('metro-config/src/defaults/defaults').sourceExts
// const defaultAssetExts = require('metro-config/src/defaults/defaults').assetExts
// /**
//  * Metro configuration
//  * https://facebook.github.io/metro/docs/configuration
//  *
//  * @type {import('metro-config').MetroConfig}
//  */

// module.exports = mergeConfig(getDefaultConfig(__dirname), {
//   transformer: {
//     // babelTransformerPath: require.resolve('react-native-svg-transformer'),
//     babelTransformerPath: require.resolve('@react-native/metro-babel-transformer')
//   },
//   resolver: {
//     assetExts: defaultAssetExts.filter(ext => ext !== 'svg'),
//     sourceExts: [...defaultSourceExts, 'svg'],
//   },
// })

// 
const { getDefaultConfig, mergeConfig } = require('@react-native/metro-config')

const defaultConfig = getDefaultConfig(__dirname)
const { assetExts, sourceExts } = defaultConfig.resolver

/**
 * Metro configuration
 * https://facebook.github.io/metro/docs/configuration
 *
 * @type {import('metro-config').MetroConfig}
 */
const config = {
  transformer: {
    babelTransformerPath: require.resolve('react-native-svg-transformer'), // case 1
    //babelTransformerPath: require.resolve('@react-native/metro-babel-transformer'), // case 2
    inlineRequires: true
  },
  resolver: {
    assetExts: assetExts.filter((ext) => ext !== 'svg'),
    sourceExts: [...sourceExts, 'svg'],
  },
}

module.exports = mergeConfig(defaultConfig, config)

Here I have two different case according to which transformer I am using.

In case 1 I got that in my custom expo go app Screenshot 2023-12-20 at 17 59 07

In case 2 I got that in the terminal

I tried everything, clearing cache, removing all the node_modules and package-lock between all test, it could be something stupid but I don't see it.

If you have any idea please let me know.

PS this is one of my SVG that was working before

<svg width="160" height="160" viewBox="0 0 160 160" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<circle cx="80" cy="80" r="80" fill="url(#pattern0)"/>
<defs>
<pattern id="pattern0" patternContentUnits="objectBoundingBox" width="1" height="1">
<use xlink:href="#image0_368_10793" transform="scale(0.00806452)"/>
</pattern>
<image id="image0_368_10793" width="124" height="124" xlink:href="data:image/png;base64,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"/>
</defs>
</svg>

If you need more infos let me know. Thanks

kristerkari / react-native-svg-transformer

EXPO RN Cannot display SVG, issue with RNSVGPath #327