Lottie & dotLottie component for React Native (iOS and Android)
npm install @lottiefiles/dotlottie-react-nativeyarn add @lottiefiles/dotlottie-react-nativeTo support iOS 15.4, ensure your Podfile specifies the platform version:
platform :ios, '15.4'After installing the package, navigate to the ios directory and install the pods:
cd ios pod installTo support .lottie files, update your metro.config.js:
// metro.config.js const { getDefaultConfig } = require('metro-config'); module.exports = (async () => { const { resolver: { sourceExts, assetExts }, } = await getDefaultConfig(); return { resolver: { assetExts: [...assetExts, 'lottie'], }, }; })();If you're using Expo, you need to prebuild to generate the ios and android folders:
expo prebuildimport { Button, StyleSheet, View } from 'react-native'; import { DotLottie, Mode, type Dotlottie } from '@lottiefiles/dotlottie-react-native'; import { useRef } from 'react'; export default function App() { const ref = useRef<Dotlottie>(null); return ( <View style={styles.container}> <DotLottie ref={ref} source={require('../assets/animation.lottie')} style={styles.box} loop={false} autoplay={false} /> <Button title="Play" onPress={() => ref.current?.play()} /> <Button title="Pause" onPress={() => ref.current?.pause()} /> <Button title="Stop" onPress={() => ref.current?.stop()} /> <Button title="Loop" onPress={() => ref.current?.setLoop(true)} /> <Button title="Speed" onPress={() => ref.current?.setSpeed(1)} /> <Button title="FORWARD" onPress={() => ref.current?.setPlayMode(Mode.FORWARD)} /> <Button title="REVERSE" onPress={() => ref.current?.setPlayMode(Mode.REVERSE)} /> </View> ); } const styles = StyleSheet.create({ container: { flex: 1, alignItems: 'center', justifyContent: 'center', }, box: { width: 200, height: 200, marginVertical: 20, }, });| Prop/Method | Type | Default Value | Description |
|---|---|---|---|
source | { uri: string } or require | Required | Specifies the animation file to be loaded. |
style | StyleProp<ViewStyle> | undefined | Custom styles for the animation container. |
loop | boolean | false | Determines if the animation should loop continuously. |
autoplay | boolean | false | Determines if the animation should start playing automatically. |
ref | React.RefObject<Dotlottie> | null | Reference to control the animation programmatically. |
play() | function | N/A | Starts playing the animation. |
pause() | function | N/A | Pauses the animation. |
stop() | function | N/A | Stops the animation and resets to the beginning. |
setLoop(loop: boolean) | function | N/A | Sets the looping behavior of the animation. |
setSpeed(speed: number) | function | N/A | Sets the playback speed of the animation. |
setPlayMode(mode: Mode) | function | N/A | Sets the play mode (FORWARD or REVERSE) of the animation. |
startStateMachine(name: string) | function | N/A | Initiates a state machine by name for advanced animation control. |
removeStateMachineEventListener() | function | N/A | Removes event listeners associated with the state machine. |
stopStateMachine() | function | N/A | Stops the state machine controlling the animation. |
See the contributing guide to learn how to contribute to the repository and the development workflow.
MIT
Made with create-react-native-library