npm install react-native-svg

SVG library for react-native

About react-native-svg

React Native SVG is an essential npm package designed explicitly for handling SVG (Scalable Vector Graphics) in React Native applications. This powerful module allows developers to render and manipulate complex SVG shapes and images directly within their mobile apps, ensuring crisp and responsive graphic content that scales seamlessly across different device resolutions. The primary purpose of React Native SVG is to bridge the gap between web SVG capabilities and mobile platforms, providing full SVG support, which includes elements like , , , , and , and comprehensive SVG functionality such as gradients, transformations, and clipping. This makes it an invaluable tool for developers looking to incorporate high-quality vector graphics into their React Native projects, enhancing visual appeal without sacrificing performance.

To integrate React Native SVG into your project, simply run the command 'npm install react-native-svg'. This installation process adds the library to your project, enabling you to start utilizing SVGs immediately. The benefits of using React Native SVG include the ability to use all SVG features natively supported by browsers, now accessible within mobile applications. This compatibility extends to interactive and dynamic SVGs, allowing developers to create highly interactive user experiences. Moreover, since SVGs are resolution-independent, they help in reducing the application's overall footprint and load times, as vector images are typically smaller in file size compared to bitmap images, making React Native SVG a smart choice for optimizing performance and enhancing the aesthetic quality of mobile applications.

React Native SVG supports animations and intricate SVG paths, which are key for developers aiming to produce engaging and dynamic user interfaces. By leveraging this module, developers can easily implement animations within SVG components, bringing to life the static images with smooth transitions and movements. This capability is particularly useful in applications where visual detail and user interaction are paramount. Additionally, React Native SVG's support for live updates to SVG properties means that developers can adjust SVGs on the fly based on user interactions or data changes, providing a flexible and robust toolset for creating visually rich and interactive mobile applications.

More from react-native-community

react-native-community npm packages

Find the best node modules for your project.

Search npm

react-native-svg

SVG library for...

Read more
,

@react-native-community/datetimepicker

DateTimePicker component for React...

Read more
,

lottie-react-native

React Native bindings for...

Read more
,

@react-native-community/progress-view

React Native Progress View iOS...

Read more

Dependencies

Core dependencies of this npm package and its dev dependencies.

css-select, css-tree, @react-native-community/eslint-config, @react-native-community/eslint-plugin, @react-native/babel-plugin-codegen, @react-native/eslint-config, @types/css-tree, @types/jest, @types/node, @types/react, @typescript-eslint/eslint-plugin, @typescript-eslint/parser, babel-eslint, babel-jest, babel-plugin-module-resolver, clang-format, eslint, eslint-config-prettier, eslint-config-standard, eslint-import-resolver-babel-module, eslint-plugin-import, eslint-plugin-n, eslint-plugin-promise, eslint-plugin-react-hooks, eslint-plugin-standard, husky, jest, lint-staged, pegjs, prettier, react, react-native, react-native-builder-bob, react-native-windows, react-test-renderer, release-it, ts-node, typescript

Documentation

A README file for the react-native-svg code repository. View Code

React Native SVG at Software Mansion

Version NPM

react-native-svg provides SVG support to React Native on iOS, Android, macOS, Windows, and a compatibility layer for the web.

Check out the Example app

Features

  1. Supports most SVG elements and properties (Rect, Circle, Line, Polyline, Polygon, G ...).
  2. Easy to convert SVG code to react-native-svg.

Installation

With expo

✅ The Expo client app comes with the native code installed!

Install the JavaScript with:

npx expo install react-native-svg

📚 See the Expo docs for more info or jump ahead to Usage.

With react-native-cli

  1. Install library

    from npm

    npm install react-native-svg

    from yarn

    yarn add react-native-svg

  2. Link native code

    cd ios && pod install

Supported react-native versions

react-native-svg react-native
3.2.0 0.29
4.2.0 0.32
4.3.0 0.33
4.4.0 0.38
4.5.0 0.40
5.1.8 0.44
5.2.0 0.45
5.3.0 0.46
5.4.1 0.47
5.5.1 >=0.50
>=6 >=0.50
>=7 >=0.57.4
>=8 >=0.57.4
>=9 >=0.57.4
>=12.3.0 >=0.64.0
>=15.0.0 >=0.70.0

Support for Fabric

Fabric is React Native's new rendering system. As of version 13.0.0 of this project, Fabric is supported only for react-native 0.69.0+. Support for earlier versions is not possible due to breaking changes in configuration.

react-native-svg react-native
>=13.0.0 0.69.0+
>=13.6.0 0.70.0+
>=13.10.0 0.72.0+

Troubleshooting

Unexpected behavior

If you have unexpected behavior, please create a clean project with the latest versions of react-native and react-native-svg

react-native init CleanProject
cd CleanProject/
yarn add react-native-svg
cd ios && pod install && cd ..

Make a reproduction of the problem in App.js

react-native run-ios
react-native run-android

Adding Windows support

  1. npx react-native-windows-init --overwrite
  2. cd windows\<AppName>
  3. Open <AppName>.vcxproj

RN 0.68+

  1. Scroll to the bottom until you find:
    <ItemGroup>
   <PackageReference Include="Microsoft.Windows.CppWinRT" Version="X.X.XXXXXX.X" />
</ItemGroup>
  2. Add the following to that <ItemGroup>
    <PackageReference Include="Win2D.uwp" Version="1.26.0" />

Pre RN 0.68

  1. Scroll to the bottom until you find:

    <ImportGroup Label="ExtensionTargets">

  2. Add the following to that <ImportGroup>

    <Import Project="$(SolutionDir)\packages\Win2D.uwp.1.26.0\build\native\Win2D.uwp.targets" Condition="Exists('$(SolutionDir)\packages\Win2D.uwp.1.26.0\build\native\Win2D.uwp.targets')" />

Opening issues

Verify that it is still an issue with the latest version as specified in the previous step. If so, open a new issue, include the entire App.js file, specify what platforms you've tested, and the results of running this command:

react-native info

If you suspect that you've found a spec conformance bug, then you can test using your component in a react-native-web project by forking this codesandbox, to see how different browsers render the same content: https://codesandbox.io/s/pypn6mn3y7 If any evergreen browser with significant userbase or other svg user agent renders some svg content better, or supports more of the svg and related specs, please open an issue asap.

Usage

To check how to use the library, see USAGE.md

TODO:

  1. Filters (connected PR)

Known issues:

  1. Unable to apply focus point of RadialGradient on Android.