SvgUri is not working on ios

[NISHANT061]

Description

In my react native application I am using SvgUri from react-native-svg in one of my component to render svgs from urls . The Svgs are getting rendered for andorid but not for ios .

Below are my dependencies and metro config used

{
  "name": "goalteller",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "build:ios": "react-native bundle --entry-file ./index.js --platform ios --bundle-output ios/main.jsbundle --assets-dest ios",
    "ios": "react-native run-ios --scheme 'GoalTeller'",
    "ios:debug": "react-native run-ios --scheme 'GoalTellerDebug'",
    "start": "NODE_OPTIONS=--max-old-space-size=4096 react-native start --reset-cache",
    "test": "jest",
    "lint": "eslint ."
  },
  "dependencies": {
    "@digiotech/react-native": "^2.0.4",
    "@goalteller/app-kit": "^6.59.0",
    "@google-cloud/recaptcha-enterprise-react-native": "^18.7.1",
    "@hookform/error-message": "^2.0.1",
    "@hookform/resolvers": "^5.0.1",
    "@notifee/react-native": "^9.1.8",
    "@react-native-async-storage/async-storage": "^2.1.2",
    "@react-native-clipboard/clipboard": "^1.16.2",
    "@react-native-community/slider": "^4.5.6",
    "@react-native-documents/picker": "^10.1.2",
    "@react-native-firebase/analytics": "^22.2.0",
    "@react-native-firebase/app": "^22.2.0",
    "@react-native-firebase/auth": "^22.2.0",
    "@react-native-firebase/crashlytics": "^22.2.0",
    "@react-native-firebase/messaging": "^22.2.0",
    "@react-native-picker/picker": "^2.11.0",
    "@react-native/gradle-plugin": "^0.79.1",
    "@react-navigation/bottom-tabs": "^7.3.10",
    "@react-navigation/drawer": "^7.3.9",
    "@react-navigation/native": "^7.1.6",
    "@react-navigation/native-stack": "^7.3.10",
    "@sentry/react-native": "^6.13.0",
    "@tanstack/react-table": "^8.21.3",
    "@types/react-native-snap-carousel": "^3.8.11",
    "@welldone-software/why-did-you-render": "^10.0.1",
    "base-64": "^1.0.0",
    "date-fns": "^4.1.0",
    "default-import": "^2.0.8",
    "get-yarn-workspaces": "^1.0.2",
    "i": "^0.3.7",
    "immer": "^10.1.1",
    "lodash-es": "^4.17.21",
    "lottie-react-native": "^7.2.2",
    "npm": "^11.3.0",
    "react": "19.0.0",
    "react-content-loader": "^7.0.2",
    "react-dom": "^19.1.0",
    "react-hook-form": "^7.56.1",
    "react-native": "^0.79.2",
    "react-native-autocomplete-dropdown": "^4.4.0",
    "react-native-biometrics": "^3.0.1",
    "react-native-clarity": "^4.2.1",
    "react-native-date-picker": "^5.0.12",
    "react-native-device-info": "^14.0.4",
    "react-native-dotenv": "^3.4.11",
    "react-native-event-listeners": "^1.0.7",
    "react-native-file-viewer": "^2.1.5",
    "react-native-fs": "^2.20.0",
    "react-native-gesture-handler": "^2.25.0",
    "react-native-image-crop-picker": "^0.42.0",
    "react-native-keyboard-aware-scroll-view": "^0.9.5",
    "react-native-keychain": "^10.0.0",
    "react-native-linear-gradient": "^2.8.3",
    "react-native-orientation-locker": "^1.7.0",
    "react-native-otp-verify": "^1.1.8",
    "react-native-permissions": "^5.4.0",
    "react-native-razorpay": "^2.3.0",
    "react-native-reanimated": "^3.17.5",
    "react-native-recaptcha-that-works": "^2.0.0",
    "react-native-safe-area-context": "^5.4.0",
    "react-native-screens": "^4.10.0",
    "react-native-signature-canvas": "^4.7.2",
    "react-native-splash-screen": "^3.3.0",
    "react-native-svg": "^15.12.0",
    "react-native-tracking-transparency": "^0.1.2",
    "react-native-url-polyfill": "^2.0.0",
    "react-native-version-check": "^3.5.0",
    "react-native-webview": "^13.10.2",
    "react-use": "^17.6.0",
    "reactotron-react-native": "^5.1.13",
    "tabler-icons-react-native": "^3.1.0",
    "victory-native": "37.3.6",
    "wo-library": "^5.0.13",
    "ye-design": "^4.0.12",
    "yup": "^1.6.1"
  },
  "devDependencies": {
    "@babel/core": "^7.25.2",
    "@babel/preset-env": "^7.25.3",
    "@babel/runtime": "^7.25.0",
    "@react-native-community/cli": "18.0.0",
    "@react-native-community/cli-platform-android": "18.0.0",
    "@react-native-community/cli-platform-ios": "18.0.0",
    "@react-native/babel-preset": "0.79.1",
    "@react-native/eslint-config": "0.79.1",
    "@react-native/metro-config": "0.79.1",
    "@react-native/typescript-config": "0.79.1",
    "@types/base-64": "^1",
    "@types/jest": "^29.5.13",
    "@types/lodash-es": "^4.17.12",
    "@types/react": "^19.0.0",
    "@types/react-dom": "^19",
    "@types/react-native-razorpay": "^2",
    "@types/react-native-version-check": "^3",
    "@types/react-test-renderer": "^19.0.0",
    "eslint": "^8.19.0",
    "firebase": "^11.6.1",
    "jest": "^29.6.3",
    "prettier": "3.3.2",
    "react-native-svg-transformer": "^1.5.1",
    "react-test-renderer": "19.0.0",
    "typescript": "5.0.4"
  },
  "resolutions": {
    "@react-aria/utils": "3.28.2"
  },
  "engines": {
    "node": ">=18"
  },
  "installConfig": {
    "hoistingLimits": "workspaces"
  }
}

metro config

/* eslint-disable unicorn/prefer-module */
const { getDefaultConfig, mergeConfig } = require("@react-native/metro-config");
const path = require("node:path");
const getWorkspaces = require("get-yarn-workspaces");

module.exports = function (baseConfig) {
  const defaultConfig = mergeConfig(baseConfig, getDefaultConfig(__dirname));
  const {
    resolver: { assetExts, sourceExts },
  } = defaultConfig;

  const workspaces = getWorkspaces(__dirname);

  return mergeConfig(defaultConfig, {
    projectRoot: __dirname,
    resolver: {
      assetExts: [
        ...assetExts.filter((extension) => extension !== "svg"),
        "lottie",
      ],
      extraNodeModules: new Proxy(
        {},
        {
          get: (target, name) => {
            return path.join(__dirname, `node_modules/${name}`);
          },
        },
      ),
      resolveRequest: (context, moduleName, platform) => {
        if (moduleName.startsWith("default-import")) {
          // Logic to resolve the module name to a file path...
          // NOTE: Throw an error if there is no resolution.
          return {
            filePath: path.join(
              context.projectRoot,
              `node_modules/default-import/dist/default-import.js`,
            ),
            type: "sourceFile",
          };
        }
        // Optionally, chain to the standard Metro resolver.
        return context.resolveRequest(context, moduleName, platform);
      },
      sourceExts: [...sourceExts, "svg"],
    },
    transformer: {
      babelTransformerPath: require.resolve(
        "react-native-svg-transformer/react-native",
      ),
      getTransformOptions: async () => ({
        transform: {
          experimentalImportSupport: false,
          inlineRequires: true,
        },
      }),
    },
    watchFolders: [
      path.resolve(__dirname, "node_modules"),
      path.resolve(__dirname, "../../node_modules"),
      ...workspaces.filter(
        (workspaceDirectory) => !(workspaceDirectory === __dirname),
      ),
    ],
  });
};

Image component

import React from "react";
import { Image, type ImageStyle, StyleSheet } from "react-native";
import { SvgUri } from "react-native-svg";

interface ImageRendererProps {
  height?: number;
  style?: ImageStyle;
  url: string;
  width?: number;
}

function ImageRenderer({
  height = 24,
  style,
  url,
  width = 24,
}: ImageRendererProps) {
  if (!url) {
    return null;
  }

  return url.includes(".svg") ? (
    <SvgUri height={height} uri={url} width={width} />
  ) : (
    <Image
      alt="image"
      source={{
        uri: url,
      }}
      style={StyleSheet.flatten([{ height, width }, style])}
    />
  );
}

export default ImageRenderer;

Steps to reproduce

Try rendering any svg using this IMageRender component

Snack or a link to a repository

SVG version

15.12.0

React Native version

0.79.1

Platforms

iOS

JavaScript runtime

None

Workflow

None

Architecture

None

Build type

None

Device

None

Device model

No response

Acknowledgements

Yes

[github-actions]

Hey! 👋

It looks like you've omitted a few important sections from the issue template.

Please complete Snack or a link to a repository section.

[github-actions]

Hey! 👋

The issue doesn't seem to contain a minimal reproduction.

Could you provide a snack or a link to a GitHub repository under your username that reproduces the problem?

[bohdanprog]

Hey @NISHANT061,
Could you please provide a simple example to reproduce your issue?