Lottie React

Exposes Lottie as a ReactXP extension.

Lottie is an iOS, Android, and React Native library that renders After Effects animations in real time, allowing apps to use animations as easily as they use static images. There is also a variant that works in a browser.

The reason for creating this etension is because the existing SVG ReactXP extension provided by Microsft does not implement the complete set of SVG elements. Lottie avoids having to deal directly with SVG.

Getting Started (Development)

Its a prequisite to set up React Native if you intend on running the Lottie examples on IOS or Andoid. Install React Native CLI by following this guide. Follow the "Building Projects from Native Code" tab.

For development, lets start by installing the NPM dependencies and peer dependencies.

npm run dev:setup # run from the checkout location

The example Lottie components can be viewed using a Storybook. Storybook is a demo playground for React components.

If using the bundled Storybook - the Lottie RN Setup has already been done.

Finally, run the Storybook on either Web:

npm run storybook-web

and/or Native:

npm run storybook-native
npm run dev:ios
npm run dev:android

npm run build can be used to rebuild the source code.

Getting Started (Usage)

Npm install module from GitHub:

npm i lottie-reactxp --save

Next follow the Lottie RN Setup. Note, you can skip installing the lottie-react-native NPM module as it's a dependency of this module. You will still have to do the react native linking steps however.

You will also need to have your required peer dependencies. The recommended peer dependencies are:

• "react-native-windows": ">= 0.33.0"
• "react-native": ">= 0.51.0"
• "react-dom": ">= 16.0.0"
• "react": ">= 16.0.0"
• "reactxp": ">= 0.46.3"

You should be able to use in your code:

import RX from 'reactxp';
import Lottie from 'lottie-reactxp';
import lottieData from './lottie-data.json';
...
render() {
    // state can be used to control the animation
    const { isStopped, duration } = this.state;
    return (
      <RX.View>
        <Lottie
          source={lottieData}
          isStopped={isStopped}
          height={400}
          width={400}
          duration={Number(duration)}
          onLoopComplete={() => { console.log('onLoopComplete'); }}
          onComplete={() => { console.log('onComplete'); }}
        />
      </RX.View>
    );
}

Available props:

| Name | Description | Type | Required | Default | | -------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------ | -------- | --------- | | source | The Lottie data as a JSON file | object | Yes | - | | loop | Whether the animaiton will repeat indefinitly | bool | No | true | | isStopped | True will stop animation, false will continue animation. | bool | No | false | | duration | Amount of seconds to run animation for. Setting the duration to the same amount as the Lottie animation length will result in a "speed" of 1 being set on the Lottie renderer. | number | No | 1 | | width | Sets the px width of the container surrounding animation | number | No | undefined | | height | Sets the px height of the container surrounding animation | number | No | undefined | | style | passes style information down to the underlying Lottie control | object | No | {} | | onComplete | callback triggered when an animation has finished and loop is false. | func | No | () => {} | | onLoopComplete | callback triggered when an animation has finished and loop is true. | func | No | () => {} |

Found a bug?

Please raise an issue if you have problems.

Contributing

Im open to contributions and improvements. Please raise an issue to discuss.