A simple example app that shows how you can use SVG files in React Native

React Native SVG demo

A simple example app that shows how you can use SVG files in React Native.

The SVG images used in this app can be found from the logos folder.

How does it work?

The .svg files can be imported inside a React component:

import Logo from "./logo.svg";

The images can then be used as a component:

<Logo width={120} height={40} />

Try it

Step 1: Install depencies to run React Native

Make sure that you have react-native-cli installed (npm install -g react-native-cli) and XCode (for iOS development) / Android Studio (for Android development) installed and working.

• Go to "Building Projects with Native Code" tab and follow the guide: https://facebook.github.io/react-native/docs/getting-started.html

Step 2: Clone the repo and move to project

git clone git@github.com:kristerkari/react-native-svg-example.git
cd react-native-svg-example

Step 3: Install example app's dependencies

npm install

Step 4: Run React Native packager

You can open a new terminal tab to run React Native's packager.

npm start

Step 5: Run app on Android or iOS

First make sure that your Android emulator or iOS simulator is working, then:

npm run ios

or

npm run android

or

npm run web

GitHub