How to Add Animated SVG to React Native

Please note that with SVGator you can now export your animation for React Native directly from the export panel so it's not necessary to use the steps below anymore.

React Native is great for building mobile apps, especially if you are already familiar with React. Now you can make it even better by adding the animated SVG files that you've created with SVGator.

Here's what you have to do if you want to add animations to React. First, you need to create an SVG file with SVGator and animate it.

This packet uses webview to render the svg so we need to install it.

npm install --save react-native-webview

If you develop on Xcode, you need to also enter ios and run:

pod install

Add the animated SVG in your project.

yourProject/android/app/src/main/assets/animated.svg

Now you can add the SVG like below, or try other methods explained here.

import React from "react";
import { View, Text } from "react-native";
import { WebView } from 'react-native-webview';

export default () => {
  return (
    <View style={{
      flexDirection: "column",
      height: "100%",
      justifyContent: "space-evenly",
      alignItems: "center",
      backgroundColor: "white"
    }} >
      <Text style={{
        fontSize: 20,
        fontWeight: "bold"
      }} >My awesome Website</Text>
          <View style={{
      height: 300,

    }}>
      <WebView
        scalesPageToFit={false}
         originWhitelist={['*']}
         domStorageEnabled={true}
         source={{uri: 'file:///android_asset/animated.svg'}}
         style={{
          width: 300,
          height: 300,
        }}
      />
      </View>
    </View>
  );
};

You can also check the Get started page.

Still got questions? Send us an email to contact@svgator.com and we will get back to you as soon as we can.

Add animated SVG to React Native