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"
/>
);
};
Component API
Based on taro-svga
Prop | Description | Default | Platform |
---|---|---|---|
src | Animation Resources | all | |
initState | Initialization status | pause | all |
loops | Number of cycles | 0 | all |
width | width | 400 | all |
loops | height | 400 | all |
style | style sheet | all | |
onFinished | Callback function for ending animation | all | |
onPercentage | Callback function for progress changes | all | |
onFrame | Callback function for frame rate changes | all | |
onLoadingEnd | Load completed callback function | all |
Component Refs
Based on taro-svga
start(): void | Start animation |
pause(): void | Pause animation |
clear(): void | Clear animation |
stepToFrame(frame: number, play: boolean): void | Jump to the specified frame rate |
stepToPercentage(percentage: number, play: boolean): void | Jump 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>