Taro Lottie

[zhiqingchen]

taro-lottie

Lottie component for Taro, reference lottie-react-native add web and miniprogram support, base on lottie-web and lottie-miniprogram.

repository

https://github.com/zhiqingchen/taro-lottie

npm

https://www.npmjs.com/package/taro-lottie

Installing

yarn add taro-lottie

Extra Installing For React Native

Install lottie-react-native (latest) and lottie-ios (3.2.3):

yarn add lottie-react-native
yarn add [email protected]

Go to your ios folder and run:

pod install

Basic Usage

import LottieView, { LottieViewType } from 'taro-lottie'
import lottieData from './lottieData.json'

export default class Lottie extends Component {
  animation: LottieViewType | null = null
  // miniprogram needs to init after page onReady event
  onReady(){
    this.animation?.init()
  }
  render() {
    return (
      <LottieView
        ref={ animation => {
          this.animation = animation;
        }}
        style={
          {
            width: 100,
            height: 100
          }
        }
        autoPlay={true}
        loop={true}
        source={lottieData}
      />
    );
  }
}