react-native-svg

(★ 8,000)

SVG library for React Native, React Native Web, and plain React web projects.

Owner Repos

react-native-reanimated ★ 10,958

React Native's Animated library reimplemented

TypeScript
react-native-gesture-handler ★ 6,779

Declarative API exposing platform native touch and gesture system to React Native.

TypeScript
react-native-screens ★ 3,716

Native navigation primitives for your React Native app.

TypeScript
TypeGPU ★ 3,016

A modular and open-ended toolkit for WebGPU, with advanced type inference and the ability to write shaders in TypeScript

TypeScript
argent ★ 2,142

An agentic toolkit to control, debug, and profile iOS and Android apps. Made by Software Mansion.

TypeScript
react-freeze ★ 1,654

Prevent React component subtrees from rendering.

TypeScript

File Explorer

ZIP Download
  • .clang-format
  • .eslintignore
  • .eslintrc.js
  • .git-blame-ignore-revs
  • .gitattributes
  • .gitignore
  • .npmignore
  • .prettierrc.js
  • babel.config.js
  • CODE_OF_CONDUCT.md
  • CONTRIBUTING.md
  • jest.config.ts
  • LICENSE
  • package.json
  • react-native.config.js
  • README.md
  • rnrepo.config.json
  • RNSVG.podspec
  • tsconfig.build.json
  • tsconfig.json
  • USAGE.md
  • yarn.lock

# Installation Guide

node
Prerequisites

Setup Steps

npm install react-native-svg

Install the react-native-svg package into the project.

cd ios && pod install

Install iOS native dependencies.

npx react-native run-ios

Build and run the project on iOS.

npx react-native run-android

Build and run the project on Android.

Key Commands

npm install react-native-svg

Install the library using npm.

yarn add react-native-svg

Install the library using yarn.

npx expo install react-native-svg

Install the compatible version in an Expo environment.

cd ios && pod install

Install iOS CocoaPods dependencies.

Mac environment and Xcode are required for iOS builds, while Android Studio and SDKs are required for Android builds.

# Use via CDN

jsDelivr

jsDelivr serves any public GitHub repository as a CDN with zero setup. Pick a version and a file to get a ready-to-paste link and snippet.

Link
Example

Command Glossary

Commands referenced in this DOCs, explained below.

🔍

npm install

View Details ▼

Install Node packages.

npm {{[i|install]}}

Install dependencies listed in `package.json`:

npm {{[i|install]}} {{package_name}}@{{version}}

Download a specific version of a package and add it to the list of dependencies in `package.json`:

npm {{[i|install]}} {{package_name}} {{[-D|--save-dev]}}

Download the latest version of a package and add it to the list of dev dependencies in `package.json`:

🔍

npx

View Details ▼

This command is an alias of `npm exec`.

tldr npm exec

View documentation for the original command:

🔍

react-native

View Details ▼

A framework for building native apps with React.

react-native init {{project_name}}

Initialize a new React Native project in a directory of the same name:

react-native start

Start the metro bundler:

react-native start --reset-cache

Start the metro bundler with a clean cache:

🔍

yarn

View Details ▼

JavaScript and Node.js package manager alternative.

yarn global add {{module_name}}

Install a module globally:

yarn install

Install all dependencies referenced in the `package.json` file (the `install` is optional):

yarn add {{module_name}}@{{version}}

Install a module and save it as a dependency to the `package.json` file (add `--dev` to save as a dev dependency):

// repository documentation