svg animation

Create a new SVG animation now!

New project

Add animated SVG to React Native

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 animated SVG files that you've created with SVGator.

The following method works with animations set on loop only.

Method 1

For starters, we can use react-native-remote-svg to import the SVG.

Get started by installing it.

npm install react-native-remote-svg

Don't forget to link the dependency to your project.

react-native link

Now you can use it in your component.

import React from 'react';
import { View } from 'react-native';
import Image from 'react-native-remote-svg';

export default function App() {
  return (
    <View>
      <Image
        source={require('./react-loop.svg')}
        style={{ width: 200, height: 200 }}
      />
    </View>
  );
}

For more options you can check the github page .

Method 2

This method will work fine with all export options: React Native WebView.

First install webview:

npm install --save react-native-webview

You can also check the Get started page.

Then use it in your component:

import React, {Component} from 'react';
import {WebView} from 'react-native-webview';

export default class App extends Component {
  render() {
    return (
      <WebView source={{uri: 'https://cloud.example.com/assets/Animated.svg'}} />
    );
  }
}

In this case, the SVG is loaded from an external source, but it should work with local files too.

More articles:

Add animated SVG to React websites

Add animated SVG to your website

Add animated SVG to WordPress


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