Open
Description
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