1 | # react-native-svg
|
2 |
|
3 | [![Version](https://img.shields.io/npm/v/react-native-svg.svg)](https://www.npmjs.com/package/react-native-svg)
|
4 | [![NPM](https://img.shields.io/npm/dm/react-native-svg.svg)](https://www.npmjs.com/package/react-native-svg)
|
5 |
|
6 | `react-native-svg` provides SVG support to React Native on iOS, Android, macOS, Windows, and a compatibility layer for the web.
|
7 |
|
8 | [Check out the Example app](https://github.com/react-native-svg/react-native-svg/tree/main/Example)
|
9 |
|
10 | - [Features](#features)
|
11 | - [Installation](#installation)
|
12 | - [Troubleshooting](#troubleshooting)
|
13 | - [Opening issues](#opening-issues)
|
14 | - [Usage](#usage)
|
15 | - [TODO](#todo)
|
16 | - [Known issues](#known-issues)
|
17 |
|
18 | ## Features
|
19 |
|
20 | 1. Supports most SVG elements and properties (Rect, Circle, Line, Polyline, Polygon, G ...).
|
21 | 2. Easy to [convert SVG code](https://svgr.now.sh/) to react-native-svg.
|
22 |
|
23 | ## Installation
|
24 |
|
25 | ### With expo-cli
|
26 |
|
27 | > ✅ The [Expo client app](https://expo.io/tools) comes with the native code installed!
|
28 |
|
29 | Install the JavaScript with:
|
30 |
|
31 | ```bash
|
32 | expo install react-native-svg
|
33 | ```
|
34 |
|
35 | 📚 See the [**Expo docs**](https://docs.expo.io/versions/latest/sdk/svg/) for more info or jump ahead to [Usage](#Usage).
|
36 |
|
37 | ### With react-native-cli
|
38 |
|
39 | 1. Install library
|
40 |
|
41 | from npm
|
42 |
|
43 | ```bash
|
44 | npm install react-native-svg
|
45 | ```
|
46 |
|
47 | from yarn
|
48 |
|
49 | ```bash
|
50 | yarn add react-native-svg
|
51 | ```
|
52 |
|
53 | 2. Link native code
|
54 |
|
55 | ```bash
|
56 | cd ios && pod install
|
57 | ```
|
58 |
|
59 | ## Supported react-native versions
|
60 |
|
61 | | react-native-svg | react-native |
|
62 | | ---------------- | ------------ |
|
63 | | 3.2.0 | 0.29 |
|
64 | | 4.2.0 | 0.32 |
|
65 | | 4.3.0 | 0.33 |
|
66 | | 4.4.0 | 0.38 |
|
67 | | 4.5.0 | 0.40 |
|
68 | | 5.1.8 | 0.44 |
|
69 | | 5.2.0 | 0.45 |
|
70 | | 5.3.0 | 0.46 |
|
71 | | 5.4.1 | 0.47 |
|
72 | | 5.5.1 | >=0.50 |
|
73 | | >=6 | >=0.50 |
|
74 | | >=7 | >=0.57.4 |
|
75 | | >=8 | >=0.57.4 |
|
76 | | >=9 | >=0.57.4 |
|
77 | | >=12.3.0 | >=0.63.0 |
|
78 |
|
79 | ## Support for Fabric
|
80 |
|
81 | [Fabric](https://reactnative.dev/architecture/fabric-renderer) is React Native's new rendering system. As of [version `13.0.0`](https://github.com/react-native-svg/react-native-svg/releases/tag/v13.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.
|
82 |
|
83 | | react-native-svg | react-native |
|
84 | | ---------------- | ------------ |
|
85 | | 13.0.0+ | 0.69.0+ |
|
86 |
|
87 | ## Troubleshooting
|
88 |
|
89 | ### Problems with Proguard
|
90 |
|
91 | When Proguard is enabled (which it is by default for Android release builds), it causes runtime error.
|
92 | To avoid this, add an exception to `android/app/proguard-rules.pro`:
|
93 |
|
94 | ```bash
|
95 | -keep public class com.horcrux.svg.** {*;}
|
96 | ```
|
97 |
|
98 | If you have build errors, then it might be caused by caching issues, please try:
|
99 |
|
100 | ```bash
|
101 | watchman watch-del-all
|
102 | rm -fr $TMPDIR/react-*
|
103 | react-native start --reset-cache
|
104 |
|
105 | Or,
|
106 |
|
107 | rm -rf node_modules
|
108 | yarn
|
109 | react-native start --reset-cache
|
110 | ```
|
111 |
|
112 | ### Unexpected behavior
|
113 |
|
114 | If you have unexpected behavior, please create a clean project with the latest versions of react-native and react-native-svg
|
115 |
|
116 | ```bash
|
117 | react-native init CleanProject
|
118 | cd CleanProject/
|
119 | yarn add react-native-svg
|
120 | cd ios && pod install && cd ..
|
121 | ```
|
122 |
|
123 | Make a reproduction of the problem in `App.js`
|
124 |
|
125 | ```bash
|
126 | react-native run-ios
|
127 | react-native run-android
|
128 | ```
|
129 |
|
130 | ## Opening issues
|
131 |
|
132 | 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:
|
133 |
|
134 | ```bash
|
135 | react-native info
|
136 | ```
|
137 |
|
138 | 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.
|
139 |
|
140 | ## Usage
|
141 |
|
142 | To check how to use the library, see [USAGE.md](https://github.com/react-native-svg/react-native-svg/blob/main/USAGE.md)
|
143 |
|
144 | ## TODO:
|
145 |
|
146 | 1. Filters ([connected PR](https://github.com/react-native-svg/react-native-svg/pull/896))
|
147 |
|
148 | ## Known issues:
|
149 |
|
150 | 1. Unable to apply focus point of RadialGradient on Android.
|