Home

Awesome

taro-svga

Supporting platforms

weapp h5 tt rn

Installing

yarn add taro-svga

Extra Installing For React Native

Based on svgaplayer-rn

you best do

yarn add svgaplayer-rn

android

react-native link svgaplayer-rn

OR auto link

Go to your ios folder and run:

pod install

Basic Usage

import SvgaPlayer, { SvgaPlayerRefs } from "taro-svga";
import { useRef } from "react";

const App = () => {
  const SvgaRef = useRef<SvgaPlayerRefs>();
  return (
    <SvgaPlayer
      ref={SvgaRef}
      src="https://cdn.jsdelivr.net/gh/svga/SVGA-Samples@master/angel.svga"
    />
  );
};

img

Component API

Based on taro-svga

PropDescriptionDefaultPlatform
srcAnimation Resourcesall
initStateInitialization statuspauseall
loopsNumber of cycles0all
widthwidth400all
loopsheight400all
stylestyle sheetall
onFinishedCallback function for ending animationall
onPercentageCallback function for progress changesall
onFrameCallback function for frame rate changesall
onLoadingEndLoad completed callback functionall

Component Refs

Based on taro-svga

start(): voidStart animation
pause(): voidPause animation
clear(): voidClear animation
stepToFrame(frame: number, play: boolean): voidJump to the specified frame rate
stepToPercentage(percentage: number, play: boolean): voidJump to specified progress

Possible issues

Building an OSAtomicCompareAndSwapPtrBarrier error when using SVGA on the iOS

Build using xcode, locate the error file and add it at the top

#include <libkern/OSAtomic.h>