Fix/react native svg cssuri path (#3394)

* fixed optional dep CssUri

* make it more readable

* changed the way cssuri is exported so it won't trigger the error

* updated react-native-svg version to ^15.2.0

* updated react-native-svg version to 15.2.0 (exact)

Author: nitzanyiz

package.json

@@ -120,7 +120,7 @@
     "react-native-navigation": "7.40.1",
     "react-native-reanimated": "3.8.1",
     "react-native-shimmer-placeholder": "^2.0.6",
-    "react-native-svg": "^13.7.0",
+    "react-native-svg": "15.2.0",
     "react-native-svg-transformer": "1.5.0",
     "react-test-renderer": "18.2.0",
     "reassure": "^0.4.1",

src/components/svgImage/index.tsx

@@ -1,9 +1,8 @@
 import React from 'react';
 import {isSvg, isSvgUri} from '../../utils/imageUtils';
-import {SvgPackage} from '../../optionalDependencies';
+import {SvgPackage, SvgCssUri} from '../../optionalDependencies';
 
 const SvgXml = SvgPackage?.SvgXml;
-const SvgCssUri = SvgPackage?.SvgCssUri;
 // const SvgProps = SvgPackage?.SvgProps; TODO: not sure how (or if) we can use their props
 
 export interface SvgImageProps {

src/optionalDependencies/SvgPackage.ts

@@ -1,7 +1,10 @@
 let SvgPackage: any;
+let svgCssForPackage14Higher: any;
 try {
   SvgPackage = require('react-native-svg');
+  svgCssForPackage14Higher = require('react-native-svg/css');
   // Sadly we cannot verify with require('react-native-svg-transformer');
 } catch (error) {}
 
+export const SvgCssUri = svgCssForPackage14Higher?.SvgCssUri ?? SvgPackage?.SvgCssUri;
 export default SvgPackage;

src/optionalDependencies/index.ts

@@ -4,6 +4,6 @@ export {default as BlurViewPackage} from './BlurViewPackage';
 export {default as MomentPackage} from './MomentPackage';
 export {default as NetInfoPackage} from './NetInfoPackage';
 export {default as HapticFeedbackPackage} from './HapticFeedbackPackage';
-export {default as SvgPackage} from './SvgPackage';
+export {default as SvgPackage, SvgCssUri} from './SvgPackage';
 export {createShimmerPlaceholder} from './ShimmerPackage';
 export {default as LinearGradientPackage} from './LinearGradientPackage';

yarn.lock

@@ -10269,16 +10269,16 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-native-svg@npm:^13.7.0":
-  version: 13.14.1
-  resolution: "react-native-svg@npm:13.14.1"
+"react-native-svg@npm:15.2.0":
+  version: 15.2.0
+  resolution: "react-native-svg@npm:15.2.0"
   dependencies:
     css-select: ^5.1.0
     css-tree: ^1.1.3
   peerDependencies:
     react: "*"
     react-native: "*"
-  checksum: 273f05f2cceabf09f3909f57108d10f56aeb38981146e5f7b72cdb8595fbfb524af891845d4240a629c2f91ed120ae603d9efd579f7fb88521769aec71811136
+  checksum: 0075d3c5bcf6bbbebe064364ec72c02eeff3fc0f2b1ba127bde26a8ecedc190a7890a910a6a051687318fa80504a3bc335eee2bfd6846b90193ca1608bae821e
   languageName: node
   linkType: hard
 
@@ -10359,7 +10359,7 @@ __metadata:
     react-native-reanimated: 3.8.1
     react-native-redash: ^12.0.3
     react-native-shimmer-placeholder: ^2.0.6
-    react-native-svg: ^13.7.0
+    react-native-svg: 15.2.0
     react-native-svg-transformer: 1.5.0
     react-test-renderer: 18.2.0
     reassure: ^0.4.1