Export React Native animations

Here's how to export mobile app animations with React Native. Learn to create React Native animations with ease, using this document.

Requirements

• react-native-webview module (link)
• react-native-svgator (optional - for single player setup)

How to install react-native-webview

1. Depending on the node module manager you are using (npm or yarn), you should run one of the following commands in your project root folder:

npm install react-native-webview

or

yarn add react-native-webview

2.  For React Native prior to version 0.60, you will have to manually link  the webview with the following command:

react-native link react-native-webview

3. To activate the module on iOS as well (only if you intend to compile to iOS), run this command inside /iOS or /macOS folder:

pod install

4.  Add the following 2 lines into your gradle file, found under <project_root>/android/gradle.properties:

android.useAndroidX=true
android.enableJetifier=true

That’s all, you should be able to use our exported files.

How to use the exported file

1. Copy the downloaded file into your project
2. Include it into the component you are willing to use, as follows:

Original file:

import React from 'react';
import type {Node} from 'react';
import {View, Text} from 'react-native';

const App: () => Node = () => {
	return (
		<View>
			<Text>I need an animation!</Text>
		</View>
	)
}

New file:

import React from 'react';
import type {Node} from 'react';
import {View, Text} from 'react-native';
import ExportedSVGatorProject from './MyAnimations/ExportedSVGatorProject.js'

const App: () => Node = () => {
	return (
		<View>
			<Text>I need an animation!</Text>
                  <ExportedSVGatorProject width={null} height={null} />
		</View>
	)
}

Limitations

• React Native variant can't be fully responsive. If you don’t specify width & height, it will be set to the width & height of the project. However, you can still set the width & height of it with the width={1024} and height={768} arguments

Single-player setup

• The player JS will be loaded from a common location: SVGator's react-native module

You have to install our React Native animation player module, using one of the following commands:

npm install @svgator/react-native

or

yarn add @svgator/react-native

More articles:

Export Flutter animations

Export settings

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