React Native SVG

[enesozturk]

Would it be possible to work with SVGs? I've tried installing react-native-svg and installed pods. But getting the following errors on the XCode while building. What could be the possible solutions to get started with SVGs?

Undefined symbol: _RNSVGCircleCls
...
..

@okwasniewski

[okwasniewski]

Yeah, it's possible just tested it out 😄

If you want you can use patch-package and apply the following patch:

diff --git a/node_modules/react-native-svg/RNSVG.podspec b/node_modules/react-native-svg/RNSVG.podspec
index 4000ad8..76ee16c 100644
--- a/node_modules/react-native-svg/RNSVG.podspec
+++ b/node_modules/react-native-svg/RNSVG.podspec
@@ -15,11 +15,12 @@ Pod::Spec.new do |s|
   s.source_files    = 'apple/**/*.{h,m,mm}'
   s.ios.exclude_files = '**/*.macos.{h,m,mm}'
   s.tvos.exclude_files = '**/*.macos.{h,m,mm}'
+  s.visionos.exclude_files = '**/*.macos.{h,m,mm}'
   s.osx.exclude_files = '**/*.ios.{h,m,mm}'
   s.requires_arc    = true
 
   if fabric_enabled
-    s.platforms = { :osx => "10.14", ios: '12.4', tvos: '11.0' }
+    s.platforms = { :osx => "10.14", ios: '12.4', tvos: '11.0', visionos: "1.0" }
     install_modules_dependencies(s)
 
     s.subspec "common" do |ss|
@@ -28,7 +29,7 @@ Pod::Spec.new do |s|
       ss.pod_target_xcconfig  = { "HEADER_SEARCH_PATHS" => "\"$(PODS_TARGET_SRCROOT)/common/cpp\"" }
     end
   else
-    s.platforms         = { :osx => "10.14", :ios => "10.0", :tvos => "9.2" }
+    s.platforms         = { :osx => "10.14", :ios => "10.0", :tvos => "9.2", :visionos => "1.0" }
     s.exclude_files      = 'apple/Utils/RNSVGFabricConversions.h'
     s.dependency           'React-Core'
   end
diff --git a/node_modules/react-native-svg/apple/RNSVGRenderable.mm b/node_modules/react-native-svg/apple/RNSVGRenderable.mm
index bc65d00..48a9c4f 100644
--- a/node_modules/react-native-svg/apple/RNSVGRenderable.mm
+++ b/node_modules/react-native-svg/apple/RNSVGRenderable.mm
@@ -248,7 +248,7 @@ UInt32 saturate(CGFloat value)
 #if TARGET_OS_OSX
     CGFloat scale = [[NSScreen mainScreen] backingScaleFactor];
 #else
-    CGFloat scale = [[UIScreen mainScreen] scale];
+    CGFloat scale = [UITraitCollection currentTraitCollection].displayScale;
 #endif // TARGET_OS_OSX
     NSUInteger iheight = (NSUInteger)height;
     NSUInteger iwidth = (NSUInteger)width;

I will open a PR in react-native-svg repo soon 👍🏻

[okwasniewski]

Here is the PR: software-mansion/react-native-svg#2190

[enesozturk]

Wowowow, you're the man. I'll try ASAP

[enesozturk]

Working nice, thanks!