🚀 react-native-svg-render

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

---

✨ Features

• 🚀 Native rendering (no WebView)
• ⚡ Fast & efficient SVG loading
• 💾 Built-in caching support
• 📱 Cross-platform (iOS & Android)
• 🎨 Optional skeleton & placeholders
• 🔧 Easy to integrate

---

📦 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.com/icon.svg"
  width={30}
  height={30}
/>;

---

🍏 iOS Setup

1. Install required pods

Add the following to your ios/Podfile:

pod 'SVGKit', '3.0.0'
pod 'CocoaLumberjack/Swift', '3.8.0'

---

2. Configure SVGKit headers

Add this at the bottom of your Podfile:

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

---

3. Install pods

cd ios
pod install

Then rebuild your project in Xcode.

---

📱 Props

Prop	Type	Description	Default	Platform
url	string	Remote URL or local SVG path	required	iOS + Android
width	number	Width of SVG	—	iOS + Android
height	number	Height of SVG	—	iOS + Android
style	ViewStyle	Container styling	—	iOS + Android
showSkeleton	boolean	Show loading skeleton	true	iOS only
placeholder	string	Placeholder while loading	—	iOS only
failedPlaceholder	string	Placeholder on failure	—	iOS only

---

📌 Notes

• Android skeleton & placeholder support is coming soon 🚧
• Designed for performance-critical rendering scenarios

---

🤝 Contributing

We welcome contributions!

• 📌 Development Workflow
• 🚀 Submit a PR
• ❤️ Code of Conduct

---

📄 License

MIT

---

💡 Why this library?

Most React Native SVG solutions rely on:

• ❌ WebView
• ❌ JS parsing (slow for large SVGs)

This library solves that by:

• ✅ Using native rendering
• ✅ Improving performance
• ✅ Reducing memory overhead

---

⭐ If you find this useful, consider giving it a star!