React Native Lottie Demo
Lottie?
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.
Free Lottie JSON files for testing etc. you can find e.g. LottieFiles
How to Setup
Step 1: clone this repo and go to cloned repo cd ignite-lottie
Step 2: Install the Application with yarn
or npm i
How to Run App
- cd to the repo
- Run Build for either OS
- for iOS
- run
react-native run-ios
- run
- for Android
- Run Genymotion
- run
react-native run-android
How to create Lottie animations?
You need Adobe After Effects and Bodymovin extension for it.
Beginners guide to getting started, you can find e.g. https://www.appcoda.com/lottie-beginner-guide/
Basic Lottie usage example in React Native components
import React, { Component } from 'react'
// React Native helpers for handling animation
import { Animated, Easing } from 'react-native'
// Component to show Lottie animation
import LottieView from 'lottie-react-native'
// Import lottie animations
import lottieAnimation from '../path/to/files/lottieAnimation.json'
export default class AnimatedComponentExample extends Component {
constructor(props) {
super(props)
this.state = {
progress: new Animated.Value(0),
}
}
componentDidMount() {
Animated.timing(this.state.progress, {
toValue: 1,
duration: 5000,
easing: Easing.linear,
}).start()
}
render () {
return (
<LottieView source={lottieAnimation} progress={this.state.progress} />
)
}
}
In this demo, Lottie JSON data is located to App/Images/Animations
.
Shortly, you control your Lottie behaviour in your React Native app with Animated library and Easing module.