@svgator/react-native

SVGator's animation player implementation for React native.

Getting Started

Download your animated project for React Native from SVGator (using External player option)
Copy the .js file into your project (anywhere in components directory)

import the file (choosing any arbitrary name):

import ExternalDemo from './svg/External_Demo';

Size

Both percentage (%) and unitless values are supported for width and height. If neither is provided, the width will take up all available space (100% of the screen), while the height will scale proportionally.

Player API

For Player API usage, you must pass an onMessage callback listener to the SVGator component. This can also be an empty arrow function, such as () => {}.

Usage

Find an example below of an SVGator animation implemented in React Native.

External_Demo.js should be the file exported from SVGator. To capture Player Events, pass your callback to the onMessage property of the SVGator component. To control the animation, call SVGatorWebView.current.injectJavaScript(jsCommand);, where:

SVGatorWebView is the ref passed to the SVGator component
jsCommand is the JavaScript command(s) to execute inside the SVGator component

import React from "react";
import {Text, View, Pressable} from 'react-native';
import {FontAwesome5} from '@expo/vector-icons';

import ExternalDemo from './components/svg/External_Demo';

export default function App() {
  const SVGatorWebView : any = React.createRef();

  const ReceiveMessage = (event: any) => {
    const data = JSON.parse(event.nativeEvent.data);
    console.log(data.event + ' event occurred at offset ' + data.offset);
  };

  const svgProps = {
    ref: SVGatorWebView,
    height: 310,
    onMessage: ReceiveMessage,
  };

  const SendCommand = (command : string, event : GestureResponderEvent) => {
    const jsCommand = `const player = document.querySelector('svg').svgatorPlayer;
      player['seek'](50);
      player['${command}']();
      true;
      `;
    SVGatorWebView.current.injectJavaScript(jsCommand);
  };

  return (
    <View>
      <ExternalDemo {...svgProps} />
      <Pressable
              onPress={(event) => SendCommand('play', event)}
              style={({pressed}) => ({
                opacity: pressed ? 0.5 : 1,
              })}>
        <View style={{alignItems: 'center', justifyContent: 'center'}}>
          <FontAwesome5
                  name="arrows-alt-h"
                  size={40}
                  color={'red'}
          />
          <Text>Send to 50%</Text>
        </View>
      </Pressable>
    </View>
  );
}

Changelog

3.0.2

Player update:
- Fix for end event triggering continuously at animation ending

3.0.1

Capturing player events with onMessage fixed

3.0.0

Dependency update
Updated players codebase
Player API Support Extended with control for the following properties (through set method):
- speed
- fps
- iterations
- direction
- alternate
- fill mode
Player API new properties:
- player.speed
- player.fps
- player.isInfinite
- player.direction
- player.isBackwards
- player.isReversed
- player.fill
Player API new methods:
- player.togglePlay()
- player.set(property, value)

2.0.1

Dependency update

2.0.0

Player API Support Implemented
- Starting the animation programmatically
- Capturing animation events
Scaling SVGs fixed
Sizing issues fixed
Added support for percentage values for width & height
Calculating width (or height) based on height (or width)
Automatic width & height calculation if none given
Demo added to Readme

1.0.1

Dependency update

1.0.0

SVGator animation player for React Native

Useful Links

For more information, check out the links below: