https://github.com/kristerkari/react-native-svg-example
A simple example app that shows how you can use SVG files in React Native
https://github.com/kristerkari/react-native-svg-example
demo-app example react-native svg
Last synced: 12 months ago
JSON representation
A simple example app that shows how you can use SVG files in React Native
- Host: GitHub
- URL: https://github.com/kristerkari/react-native-svg-example
- Owner: kristerkari
- Created: 2018-08-02T21:15:37.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2024-11-25T20:08:03.000Z (over 1 year ago)
- Last Synced: 2025-03-28T21:05:57.282Z (12 months ago)
- Topics: demo-app, example, react-native, svg
- Language: JavaScript
- Size: 4.26 MB
- Stars: 37
- Watchers: 2
- Forks: 148
- Open Issues: 11
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# React Native SVG demo
[](https://egghead.io/courses/how-to-contribute-to-an-open-source-project-on-github)
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](/logos) folder.
## How does it work?
The `.svg` files can be imported inside a React component:
```jsx
import Logo from './logo.svg';
```
The images can then be used as a component:
```jsx
```
## 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](https://developer.apple.com/xcode/) (for iOS development) / [Android Studio](https://developer.android.com/studio/index.html) (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
```sh
git clone git@github.com:kristerkari/react-native-svg-example.git
cd react-native-svg-example
```
### Step 3: Install example app's dependencies
```sh
npm install
```
### Step 4: Run React Native packager
You can open a new terminal tab to run React Native's packager.
```sh
npm start
```
### Step 5: Run app on Android or iOS
First make sure that your Android emulator or iOS simulator is working, then:
```sh
npm run ios
```
or
```sh
npm run android
```
or
```sh
npm run web
```
## Screenshots
**iOS - Android - Web**
