dotLottie React Native

Lottie & dotLottie component for React Native (iOS and Android)

Installation

1npm install @lottiefiles/dotlottie-react-native

Usage

1import { Button, StyleSheet, View } from 'react-native';
2import { DotLottie, Mode, type Dotlottie } from '@lottiefiles/dotlottie-react-native';
3import { useRef } from 'react';
4
5export default function App() {
6  const ref = useRef<Dotlottie>(null);
7
8  return (
9    <View style={styles.container}>
10      <DotLottie
11        ref={ref}
12        source={require('../assets/animation.lottie')}
13        style={styles.box}
14        loop={false}
15        autoplay={false}
16      />
17      <Button title="Play" onPress={() => ref.current?.play()} />
18      <Button title="Pause" onPress={() => ref.current?.pause()} />
19      <Button title="Stop" onPress={() => ref.current?.stop()} />
20      <Button title="Loop" onPress={() => ref.current?.setLoop(true)} />
21      <Button title="Speed" onPress={() => ref.current?.setSpeed(1)} />
22      <Button
23        title="FORWARD"
24        onPress={() => ref.current?.setPlayMode(Mode.FORWARD)}
25      />
26      <Button
27        title="REVERSE"
28        onPress={() => ref.current?.setPlayMode(Mode.REVERSE)}
29      />
30    </View>
31  );
32}
33
34const styles = StyleSheet.create({
35  container: {
36    flex: 1,
37    alignItems: 'center',
38    justifyContent: 'center',
39  },
40  box: {
41    width: 200,
42    height: 200,
43    marginVertical: 20,
44  },
45});

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT

Made with create-react-native-library