# 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

```sh
npm install react-native-svg-render
```
OR
```sh
yarn add react-native-svg-render
```
## Usage

```js
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](CONTRIBUTING.md#development-workflow)
- [Sending a pull request](CONTRIBUTING.md#sending-a-pull-request)
- [Code of conduct](CODE_OF_CONDUCT.md)


## License

MIT

---