Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
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: 4 days 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 6 years ago)
- Default Branch: master
- Last Pushed: 2024-11-25T20:08:03.000Z (3 months ago)
- Last Synced: 2025-02-09T01:11:21.487Z (11 days ago)
- Topics: demo-app, example, react-native, svg
- Language: JavaScript
- Size: 4.26 MB
- Stars: 37
- Watchers: 3
- 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 [email protected]: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**
![]()