react-native-svg - React Native SVG icons are not working after updating 0.77.0 to 0.79.2 ( It was working before version )

[JamesGs1994]

Description

SVG images are not showing

`"name": "LearnOn",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "lint": "eslint .",
    "start": "react-native start",
    "test": "jest",
    "docs": "typedoc"
  },
  "dependencies": {
    "@gorhom/bottom-sheet": "^5",
    "@notifee/react-native": "^9.1.8",
    "@react-native-async-storage/async-storage": "^2.1.2",
    "@react-native-community/netinfo": "^11.4.1",
    "@react-native-firebase/app": "^21.14.0",
    "@react-native-firebase/messaging": "^21.14.0",
    "@react-navigation/bottom-tabs": "^7.2.0",
    "@react-navigation/drawer": "^7.1.1",
    "@react-navigation/material-top-tabs": "^7.1.0",
    "@react-navigation/native": "^7.0.14",
    "@react-navigation/native-stack": "^7.2.0",
    "@realm/react": "^0.11.0",
    "@reduxjs/toolkit": "^2.5.1",
    "@types/react-native-vector-icons": "^6.4.18",
    "axios": "^1.7.9",
    "date-fns": "^4.1.0",
    "lottie-react-native": "^7.2.2",
    "react": "19.0.0",
    "react-native": "0.79.2",
    "react-native-big-calendar": "^4.17.1",
    "react-native-blob-util": "^0.21.2",
    "react-native-bootsplash": "^6.3.7",
    "react-native-circular-progress-indicator": "^4.4.2",
    "react-native-collapsible": "^1.6.2",
    "react-native-device-info": "^14.0.4",
    "react-native-fs": "^2.20.0",
    "react-native-gesture-handler": "^2.24.0",
    "react-native-gifted-charts": "^1.4.58",
    "react-native-image-picker": "^8.2.0",
    "react-native-linear-gradient": "^2.8.3",
    "react-native-orientation-locker": "^1.7.0",
    "react-native-pager-view": "^6.7.0",
    "react-native-pdf": "^6.7.7",
    "react-native-popover-view": "^6.1.0",
    "react-native-progress": "^5.0.1",
    "react-native-reanimated": "3.18.0",
    "react-native-render-html": "^6.3.4",
    "react-native-responsive-hook": "^1.0.4",
    "react-native-safe-area-context": "^5.1.0",
    "react-native-screens": "^4.6.0",
    "react-native-share": "^12.0.11",
    "react-native-svg": "^15.12.0",
    "react-native-svg-transformer": "^1.5.1",
    "react-native-table-component": "^1.2.2",
    "react-native-vector-icons": "^10.2.0",
    "react-native-webview": "^13.13.2",
    "react-native-zip-archive": "^7.0.1",
    "react-redux": "^9.2.0",
    "realm": "^12.14.1",
    "redux": "^5.0.1",
    "toastify-react-native": "^7.1.0",
    "typedoc": "^0.28.4",
    "xml-js": "^1.6.11"
  },
  "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.2",
    "@react-native/eslint-config": "0.79.2",
    "@react-native/metro-config": "0.79.2",
    "@react-native/typescript-config": "0.79.2",
    "@types/axios": "^0.9.36",
    "@types/jest": "^29.5.13",
    "@types/node": "^22.13.10",
    "@types/react-native-table-component": "^1.2.8",
    "@types/react": "^19.0.0",
    "@types/react-test-renderer": "^19.0.0",
    "babel-plugin-module-resolver": "^5.0.2",
    "eslint": "^8.19.0",
    "jest": "^29.6.3",
    "prettier": "2.8.8",
    "react-test-renderer": "19.0.0",
    "typedoc-plugin-markdown": "^4.6.3",
    "typescript": "5.0.4"
  },
  "engines": {
    "node": ">=18"
  }

import React from 'react';
import {SvgProps} from 'react-native-svg';
import sampleIcon from '../assets/SvgImages/sampleIcon.svg';


export const icons = {
  sampleIcon: SampleIcon,
} as const;

// Define props for the CustomIcon component
export interface CustomIconProps extends SvgProps {
  name?: keyof typeof icons; // Optional to avoid crashes
}

const SVGIcon: React.FC<CustomIconProps> = ({
  name = 'foldersIcon', // Set default icon if Iocn name is wrong
  ...props
}) => {
  const IconComponent = icons[name] || icons['foldersIcon']; // Set default icon if Iocn name is wrong

  return <IconComponent {...props} />;
};

After updating to 0.79.2 version i am facing disappearing Issues

Steps to reproduce

After updating to 0.79.2 version i am facing disappearing Issues

Snack or a link to a repository

No

SVG version

15.12.0

React Native version

0.79.2

Platforms

iOS

JavaScript runtime

None

Workflow

None

Architecture

None

Build type

None

Device

iPad

Device model

No response

Acknowledgements

Yes

[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?

[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.

[NISHANT061]

Facing similar issue . Any solution for the same ??

[alieliacik]

Same issue here. To produce: create a new react native project with the latest version and try to build it with the latest version of react-native-svg

[alieliacik]

[jakex7]

Hi,
The issue does not include a minimal reproducible example. I attempted to reproduce the problem using react-native@0.79.5 and react-native-svg@15.12.0, but everything works as expected.
If you're still experiencing the issue, please open a new ticket. Make sure to complete all the questions in the issue template and provide a valid repository that demonstrates the problem.