react-native-svg-render

A lightweight, native-powered React Native library for loading, caching, and rendering SVG images on both Android and iOS — without relying on WebView or JS-based parsing.

Installation

npm install react-native-svg-render

OR

yarn add react-native-svg-render

Usage

import { SvgUrlView } from 'react-native-svg-render';

<SvgUrlView
  url={'https://example/aa.svg'}
  width={30}
  height={30}
/>;

iOS Setup

To use react-native-svg-render on iOS, follow these steps:

Install dependencies Open your ios/Podfile and add:

pod 'SVGKit', '~> 3.0'
pod 'CocoaLumberjack/Swift', '~> 3.8.0'

Configure SVGKit headers At the bottom of your Podfile, add:

post_install do |installer|
  installer.pods_project.targets.each do |target|
    if target.name == 'SVGKit'
      target.build_configurations.each do |config|
        config.build_settings['USE_HEADERMAP'] = 'NO'
        config.build_settings['ALWAYS_SEARCH_USER_PATHS'] = 'NO'
        config.build_settings['HEADER_SEARCH_PATHS'] = [
          '$(inherited)',
          '${PODS_ROOT}/Headers/Public/SVGKit',
          '${PODS_ROOT}/SVGKit/Source',
          '${PODS_ROOT}/SVGKit/Source/DOM classes',
          '${PODS_ROOT}/SVGKit/Source/Parsers',
          '${PODS_ROOT}/SVGKit/Source/Exporters'
        ]
      end
    end
  end
end

Install pods

cd ios
pod install

Rebuild your project in Xcode.

Example podfile:

# Resolve react_native_pods.rb with node to allow for hoisting
require Pod::Executable.execute_command('node', ['-p',
  'require.resolve(
    "react-native/scripts/react_native_pods.rb",
    {paths: [process.argv[1]]},
  )', __dir__]).strip

platform :ios, min_ios_version_supported
prepare_react_native_project!
$RNFirebaseAsStaticFramework = true

linkage = ENV['USE_FRAMEWORKS']
if linkage != nil
  Pod::UI.puts "Configuring Pod with #{linkage}ally linked Frameworks".green
  use_frameworks! :linkage => linkage.to_sym
end

# use_modular_headers!

target 'AFService' do
  
  inherit! :complete
  config = use_native_modules!

  pod 'Firebase', :modular_headers => true
  pod 'FirebaseCore', :modular_headers => true
  pod 'FirebaseCoreExtension', :modular_headers => true
  pod 'FirebaseInstallations', :modular_headers => true
  pod 'GoogleDataTransport', :modular_headers => true
  pod 'GoogleUtilities', :modular_headers => true
  pod 'nanopb', :modular_headers => true

  pod 'react-native-version-check', :path => '../node_modules/react-native-version-check'
  pod 'glog', :podspec => '../node_modules/react-native/third-party-podspecs/glog.podspec', :modular_headers => false


  use_react_native!(
    :path => config[:reactNativePath],
    # An absolute path to your application root.
    :app_path => "#{Pod::Config.instance.installation_root}/.."
  )

  pod 'SVGKit'
  pod 'CocoaLumberjack/Swift', '~> 3.8.0'
  post_install do |installer|
    # https://github.com/facebook/react-native/blob/main/packages/react-native/scripts/react_native_pods.rb#L197-L202
    react_native_post_install(
      installer,
      config[:reactNativePath],
      :mac_catalyst_enabled => false,
      # :ccache_enabled => true
    )
    installer.pods_project.build_configurations.each do |config|
      config.build_settings["EXCLUDED_ARCHS[sdk=iphonesimulator*]"] = "arm64"
    end

    installer.pods_project.targets.each do |target|
      if target.name == 'SVGKit'
        target.build_configurations.each do |config|
          config.build_settings['USE_HEADERMAP'] = 'NO'
          config.build_settings['ALWAYS_SEARCH_USER_PATHS'] = 'NO'
          config.build_settings['HEADER_SEARCH_PATHS'] = [
            '$(inherited)',
            '${PODS_ROOT}/Headers/Public/SVGKit',
            '${PODS_ROOT}/SVGKit/Source',
            '${PODS_ROOT}/SVGKit/Source/DOM classes',
            '${PODS_ROOT}/SVGKit/Source/Parsers',
            '${PODS_ROOT}/SVGKit/Source/Exporters'
          ]
          config.build_settings['EXCLUDED_SOURCE_FILE_NAMES'] = '*/reanimated/**'
        end
      end
    end
  end
end

Props

| Prop | Type | Description | Default | Platform Support | | ------------------- | ----------- | ------------------------------------------- | ------------ | -------------------------------------- | | url | string | Remote URL or local path of the SVG to load | required | iOS + Android | | width | number | Width of the rendered SVG | undefined | iOS + Android | | height | number | Height of the rendered SVG | undefined | iOS + Android | | style | ViewStyle | Custom container styles | undefined | iOS + Android | | showSkeleton | boolean | Show skeleton shimmer while loading | true | iOS only (Android support coming soon) | | placeholder | string | Local/remote placeholder while loading | undefined | iOS only (Android support coming soon) | | failedPlaceholder | string | Local/remote placeholder if the SVG fails | undefined | iOS only (Android support coming soon) |

Contributing

• Development workflow
• Sending a pull request
• Code of conduct

License

MIT