Basic wrapper around Lottie for ReactXP.
Clone or download
Permalink
Failed to load latest commit information.
.circleci Add circleci integration to confirm module builds. Feb 18, 2018
.storybook Adding initial support for React Native and storybook native. Dec 11, 2017
android Fix up Android storybook demo Jan 28, 2018
docs Set theme jekyll-theme-minimal Feb 18, 2018
ios .gitignore is now working Dec 19, 2017
src Misc fixups Jan 28, 2018
stories Misc fixups Jan 28, 2018
.babelrc Adding initial support for React Native and storybook native. Dec 11, 2017
.eslintrc Adding initial support for React Native and storybook native. Dec 11, 2017
.gitattributes Adding initial support for React Native and storybook native. Dec 11, 2017
.gitignore Implement callbacks for oncomplete and onloopcomplete (#2) Jan 18, 2018
.npmignore Adding a file array to tell NPM what we want to publish. (#3) Jan 18, 2018
.watchmanconfig Adding initial support for React Native and storybook native. Dec 11, 2017
LICENSE.md Adding initial support for React Native and storybook native. Dec 11, 2017
README.md Adding Circle CI build status to README Feb 18, 2018
index.android.js Ensure RN flavor is transpiled with babel. Feb 18, 2018
index.ios.js Ensure RN flavor is transpiled with babel. Feb 18, 2018
index.js Ensure RN flavor is transpiled with babel. Feb 18, 2018
index.storybook.js Adding initial support for React Native and storybook native. Dec 11, 2017
package-lock.json 1.1.1 Jan 28, 2018
package.json Static Storybook site Feb 18, 2018
webpack.config.js Adding initial support for React Native and storybook native. Dec 11, 2017

README.md

Lottie React

Build Status

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.