Gathering detailed insights and metrics for react-native-svg
Gathering detailed insights and metrics for react-native-svg
SVG library for React Native, React Native Web, and plain React web projects.
Installations
npm install react-native-svgDeveloper
react-native-community
Developer Guide
BETA
Module System
CommonJS
Min. Node Version
Typescript Support
Yes
Node Version
20.13.0
NPM Version
10.8.3
Statistics
7,519 Stars
2,132 Commits
1,135 Forks
98 Watching
81 Branches
222 Contributors
Updated on 28 Nov 2024
Bundle Size
36.79 kB
Minified
10.82 kB
Minified + Gzipped
Languages
Java (32.63%)
TypeScript (23.42%)
Objective-C++ (18.23%)
C++ (15.09%)
JavaScript (5.46%)
Objective-C (3.58%)
Ruby (0.41%)
Kotlin (0.38%)
PEG.js (0.37%)
C (0.28%)
CMake (0.09%)
Metal (0.04%)
Total Downloads
Cumulative downloads
Total Downloads
155,431,288
Last day
-0.5%
215,130
Compared to previous day
Last week
1.4%
1,175,605
Compared to previous week
Last month
5.2%
4,962,858
Compared to previous month
Last year
34.3%
49,503,863
Compared to previous year
Daily Downloads
Weekly Downloads
Monthly Downloads
Yearly Downloads
Dependencies
3
Peer Dependencies
2
Dev Dependencies
46
@react-native-community/eslint-config@react-native-community/eslint-plugin@react-native/babel-plugin-codegen@react-native/babel-preset@react-native/eslint-config@types/css-tree@types/jest@types/node@types/pixelmatch@types/pngjs@types/react@types/ws@typescript-eslint/eslint-plugin@typescript-eslint/parserbabel-eslintbabel-jestbabel-plugin-module-resolverclang-formateslinteslint-config-prettiereslint-config-standardeslint-import-resolver-babel-moduleeslint-plugin-importeslint-plugin-neslint-plugin-promiseeslint-plugin-react-hookseslint-plugin-standardhuskyjestjest-html-reporterslint-stagedpeggypegjspixelmatchpngjsprettierpuppeteerreactreact-nativereact-native-builder-bobreact-native-windowsreact-test-rendererrelease-itts-nodetypescriptws
Versions
react-native-svg provides SVG support to React Native on iOS, Android, macOS, Windows, and a compatibility layer for the web.
Features
- Supports most SVG elements and properties (Rect, Circle, Line, Polyline, Polygon, G ...).
- 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:
1npx expo install react-native-svg
📚 See the Expo docs for more info or jump ahead to Usage.
With react-native-cli
-
Install library
from npm
1npm install react-native-svgfrom yarn
1yarn add react-native-svg -
Link native code
1cd 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 |
| >=15.8.0 | >=0.73.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
1react-native init CleanProject 2cd CleanProject/ 3yarn add react-native-svg 4cd ios && pod install && cd ..
Make a reproduction of the problem in App.js
1react-native run-ios 2react-native run-android
Adding Windows support
npx react-native-windows-init --overwritereact-native run-windows
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:
1react-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
Known issues:
- Unable to apply focus point of RadialGradient on Android.
React Native SVG is maintained by Software Mansion
Since 2012 Software Mansion is a software agency with experience in building web and mobile apps. We are Core React Native Contributors and experts in dealing with all kinds of React Native issues. We can help you build your next dream product – Hire us.
No vulnerabilities found.
Reason
30 commit(s) and 9 issue activity found in the last 90 days -- score normalized to 10
Reason
no dangerous workflow patterns detected
Reason
license file detected
Details
- Info: project has a license file: LICENSE:0
- Info: FSF or OSI recognized license: MIT License: LICENSE:0
Reason
binaries present in source code
Details
- Warn: binary detected: android/gradle/wrapper/gradle-wrapper.jar:1
- Warn: binary detected: apps/fabric-example/android/gradle/wrapper/gradle-wrapper.jar:1
- Warn: binary detected: apps/paper-example/android/gradle/wrapper/gradle-wrapper.jar:1
- Warn: binary detected: apps/tests-example/android/gradle/wrapper/gradle-wrapper.jar:1
Reason
Found 3/30 approved changesets -- score normalized to 1
Reason
detected GitHub workflow tokens with excessive permissions
Details
- Warn: no topLevel permission defined: .github/workflows/android-build-test.yml:1
- Warn: no topLevel permission defined: .github/workflows/check-archs-consistency.yml:1
- Warn: no topLevel permission defined: .github/workflows/close-when-stale.yml:1
- Warn: no topLevel permission defined: .github/workflows/e2e-android.yml:1
- Warn: no topLevel permission defined: .github/workflows/e2e-ios.yml:1
- Warn: no topLevel permission defined: .github/workflows/ios-build-test.yml:1
- Warn: no topLevel permission defined: .github/workflows/js-build-test.yml:1
- Warn: no topLevel permission defined: .github/workflows/macos-build-test.yml:1
- Warn: no topLevel permission defined: .github/workflows/needs-more-info.yml:1
- Warn: no topLevel permission defined: .github/workflows/needs-repro.yml:1
- Warn: no topLevel permission defined: .github/workflows/windows-build-test.yml:1
- Info: no jobLevel write permissions found
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
project is not fuzzed
Details
- Warn: no fuzzer integrations found
Reason
dependency not pinned by hash detected -- score normalized to 0
Details
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/android-build-test.yml:30: update your workflow using https://app.stepsecurity.io/secureworkflow/software-mansion/react-native-svg/android-build-test.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/android-build-test.yml:33: update your workflow using https://app.stepsecurity.io/secureworkflow/software-mansion/react-native-svg/android-build-test.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/android-build-test.yml:39: update your workflow using https://app.stepsecurity.io/secureworkflow/software-mansion/react-native-svg/android-build-test.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/android-build-test.yml:49: update your workflow using https://app.stepsecurity.io/secureworkflow/software-mansion/react-native-svg/android-build-test.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/android-build-test.yml:60: update your workflow using https://app.stepsecurity.io/secureworkflow/software-mansion/react-native-svg/android-build-test.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/check-archs-consistency.yml:18: update your workflow using https://app.stepsecurity.io/secureworkflow/software-mansion/react-native-svg/check-archs-consistency.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/check-archs-consistency.yml:20: update your workflow using https://app.stepsecurity.io/secureworkflow/software-mansion/react-native-svg/check-archs-consistency.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/close-when-stale.yml:17: update your workflow using https://app.stepsecurity.io/secureworkflow/software-mansion/react-native-svg/close-when-stale.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/close-when-stale.yml:22: update your workflow using https://app.stepsecurity.io/secureworkflow/software-mansion/react-native-svg/close-when-stale.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/e2e-android.yml:29: update your workflow using https://app.stepsecurity.io/secureworkflow/software-mansion/react-native-svg/e2e-android.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/e2e-android.yml:32: update your workflow using https://app.stepsecurity.io/secureworkflow/software-mansion/react-native-svg/e2e-android.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/e2e-android.yml:37: update your workflow using https://app.stepsecurity.io/secureworkflow/software-mansion/react-native-svg/e2e-android.yml/main?enable=pin
- Warn: third-party GitHubAction not pinned by hash: .github/workflows/e2e-android.yml:43: update your workflow using https://app.stepsecurity.io/secureworkflow/software-mansion/react-native-svg/e2e-android.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/e2e-android.yml:52: update your workflow using https://app.stepsecurity.io/secureworkflow/software-mansion/react-native-svg/e2e-android.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/e2e-android.yml:61: update your workflow using https://app.stepsecurity.io/secureworkflow/software-mansion/react-native-svg/e2e-android.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/e2e-android.yml:111: update your workflow using https://app.stepsecurity.io/secureworkflow/software-mansion/react-native-svg/e2e-android.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/e2e-ios.yml:28: update your workflow using https://app.stepsecurity.io/secureworkflow/software-mansion/react-native-svg/e2e-ios.yml/main?enable=pin
- Warn: third-party GitHubAction not pinned by hash: .github/workflows/e2e-ios.yml:31: update your workflow using https://app.stepsecurity.io/secureworkflow/software-mansion/react-native-svg/e2e-ios.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/e2e-ios.yml:36: update your workflow using https://app.stepsecurity.io/secureworkflow/software-mansion/react-native-svg/e2e-ios.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/e2e-ios.yml:46: update your workflow using https://app.stepsecurity.io/secureworkflow/software-mansion/react-native-svg/e2e-ios.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/e2e-ios.yml:57: update your workflow using https://app.stepsecurity.io/secureworkflow/software-mansion/react-native-svg/e2e-ios.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/e2e-ios.yml:69: update your workflow using https://app.stepsecurity.io/secureworkflow/software-mansion/react-native-svg/e2e-ios.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/e2e-ios.yml:88: update your workflow using https://app.stepsecurity.io/secureworkflow/software-mansion/react-native-svg/e2e-ios.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ios-build-test.yml:31: update your workflow using https://app.stepsecurity.io/secureworkflow/software-mansion/react-native-svg/ios-build-test.yml/main?enable=pin
- Warn: third-party GitHubAction not pinned by hash: .github/workflows/ios-build-test.yml:34: update your workflow using https://app.stepsecurity.io/secureworkflow/software-mansion/react-native-svg/ios-build-test.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ios-build-test.yml:39: update your workflow using https://app.stepsecurity.io/secureworkflow/software-mansion/react-native-svg/ios-build-test.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ios-build-test.yml:49: update your workflow using https://app.stepsecurity.io/secureworkflow/software-mansion/react-native-svg/ios-build-test.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ios-build-test.yml:60: update your workflow using https://app.stepsecurity.io/secureworkflow/software-mansion/react-native-svg/ios-build-test.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ios-build-test.yml:72: update your workflow using https://app.stepsecurity.io/secureworkflow/software-mansion/react-native-svg/ios-build-test.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/js-build-test.yml:17: update your workflow using https://app.stepsecurity.io/secureworkflow/software-mansion/react-native-svg/js-build-test.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/js-build-test.yml:20: update your workflow using https://app.stepsecurity.io/secureworkflow/software-mansion/react-native-svg/js-build-test.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/macos-build-test.yml:31: update your workflow using https://app.stepsecurity.io/secureworkflow/software-mansion/react-native-svg/macos-build-test.yml/main?enable=pin
- Warn: third-party GitHubAction not pinned by hash: .github/workflows/macos-build-test.yml:34: update your workflow using https://app.stepsecurity.io/secureworkflow/software-mansion/react-native-svg/macos-build-test.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/macos-build-test.yml:39: update your workflow using https://app.stepsecurity.io/secureworkflow/software-mansion/react-native-svg/macos-build-test.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/macos-build-test.yml:49: update your workflow using https://app.stepsecurity.io/secureworkflow/software-mansion/react-native-svg/macos-build-test.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/macos-build-test.yml:60: update your workflow using https://app.stepsecurity.io/secureworkflow/software-mansion/react-native-svg/macos-build-test.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/macos-build-test.yml:72: update your workflow using https://app.stepsecurity.io/secureworkflow/software-mansion/react-native-svg/macos-build-test.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/needs-more-info.yml:17: update your workflow using https://app.stepsecurity.io/secureworkflow/software-mansion/react-native-svg/needs-more-info.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/needs-more-info.yml:22: update your workflow using https://app.stepsecurity.io/secureworkflow/software-mansion/react-native-svg/needs-more-info.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/needs-repro.yml:17: update your workflow using https://app.stepsecurity.io/secureworkflow/software-mansion/react-native-svg/needs-repro.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/needs-repro.yml:22: update your workflow using https://app.stepsecurity.io/secureworkflow/software-mansion/react-native-svg/needs-repro.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/windows-build-test.yml:29: update your workflow using https://app.stepsecurity.io/secureworkflow/software-mansion/react-native-svg/windows-build-test.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/windows-build-test.yml:32: update your workflow using https://app.stepsecurity.io/secureworkflow/software-mansion/react-native-svg/windows-build-test.yml/main?enable=pin
- Warn: third-party GitHubAction not pinned by hash: .github/workflows/windows-build-test.yml:37: update your workflow using https://app.stepsecurity.io/secureworkflow/software-mansion/react-native-svg/windows-build-test.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/windows-build-test.yml:40: update your workflow using https://app.stepsecurity.io/secureworkflow/software-mansion/react-native-svg/windows-build-test.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/windows-build-test.yml:50: update your workflow using https://app.stepsecurity.io/secureworkflow/software-mansion/react-native-svg/windows-build-test.yml/main?enable=pin
- Info: 0 out of 41 GitHub-owned GitHubAction dependencies pinned
- Info: 0 out of 5 third-party GitHubAction dependencies pinned
Reason
security policy file not detected
Details
- Warn: no security policy file detected
- Warn: no security file to analyze
- Warn: no security file to analyze
- Warn: no security file to analyze
Reason
SAST tool is not run on all commits -- score normalized to 0
Details
- Warn: 0 commits out of 29 are checked with a SAST tool
Reason
17 existing vulnerabilities detected
Details
- Warn: Project is vulnerable to: GHSA-2rxp-v6pw-ch6m
- Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg
- Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275
- Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv
- Warn: Project is vulnerable to: GHSA-m6fv-jmcg-4jfg
- Warn: Project is vulnerable to: GHSA-cm22-4g7w-348p
- Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q
- Warn: Project is vulnerable to: GHSA-mpg4-rc92-vx8v
- Warn: Project is vulnerable to: GHSA-vmwr-mc7x-5vc3
- Warn: Project is vulnerable to: GHSA-2p57-rm9w-gvfp
- Warn: Project is vulnerable to: GHSA-pfrx-2q88-qq97
- Warn: Project is vulnerable to: GHSA-3j8f-xvm3-ffx4
- Warn: Project is vulnerable to: GHSA-j9fq-vwqv-2fm2
- Warn: Project is vulnerable to: GHSA-pqw5-jmp5-px4v
- Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw
- Warn: Project is vulnerable to: GHSA-cchq-frgv-rjh5
- Warn: Project is vulnerable to: GHSA-g644-9gfx-q4q4
Score
3.5
/10
Last Scanned on 2024-11-18
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn More