react-native-svg

react-native-svg brings native SVG rendering to React Native apps by exposing a set of familiar SVG element components — Circle, Rect, Path, LinearGradient, and more — that render through platform-native drawing APIs on iOS, Android, macOS, Windows, and via a DOM-based compatibility layer on web. It is the de facto standard for vector graphics in the React Native ecosystem, underpinning icon libraries, chart libraries, and custom illustration work across thousands of downstream apps.

Maintained by Software Mansion — a long-time core contributor to React Native itself — the library tracks new React Native architectures (including Fabric) closely, exposes both JS and native (Fabric/TurboModule) implementations, and ships prebuilt platform bindings for Android, iOS, and Windows so consumers don’t need to write any native code themselves.

What You Get

• A full set of SVG element components (Svg, Path, Circle, Rect, Line, Polygon, G, Defs, LinearGradient, RadialGradient, ClipPath, Mask, and more) mirroring standard SVG markup
• Native rendering bindings for iOS, Android, macOS, and Windows plus a web compatibility layer for react-native-web
• Support for React Native’s new Fabric renderer alongside the legacy bridge architecture
• CSS-in-SVG parsing utilities and an XML-to-component transform pipeline for converting raw SVG markup at runtime
• TypeScript type definitions for the full component API

Common Use Cases

• Rendering vector icon sets crisply at any resolution instead of shipping multiple raster image sizes
• Building custom illustrations, logos, and decorative graphics that scale across device sizes
• Powering downstream charting and data-visualization libraries that need to draw paths, arcs, and gradients
• Converting existing web SVG assets (via tools like SVGR) directly into React Native components

Under The Hood

Architecture: Each SVG element (Circle, Path, Rect, G, etc.) is a class component in src/elements/ that extends a shared Shape base, extracts common SVG props via lib/extract/extractProps, and forwards them to a matching native component (e.g. RNSVGCircle from fabric/CircleNativeComponent) — so the JS layer is a thin, typed props-mapping bridge over native drawing views implemented separately per platform (android/, apple/, windows/, common/ C++ shared code). A parallel elements.web.ts path renders equivalent DOM SVG elements for react-native-web. Tech Stack: TypeScript source built with react-native-builder-bob into commonjs/module/typescript output; native code spans Java/Kotlin (Android), Objective-C++/C++ (iOS/macOS via Fabric TurboModules), and C++ for shared rendering logic, with a PEG.js/peggy-generated parser for SVG transform-string parsing. Code Quality: A modest Jest test suite covers CSS parsing and snapshot rendering (__tests__/css.test.tsx and friends); most correctness assurance instead comes from the large example app under apps/common/example and community issue-driven regression fixes, and ESLint/TypeScript strict typing are enforced in CI. API Design: The component API deliberately mirrors standard SVG markup and attribute names (Circle, Path with d, LinearGradient, ClipPath), so anyone familiar with web SVG can use it with near-zero learning curve; installation is a single package add and (for bare RN) a pod install, with Expo requiring no native step at all.