Usage Guide

Basic Implementation

Here’s a complete example showing how to use the DotLottie component with various controls:

import React, { useRef } from 'react';
import { Button, StyleSheet, View } from 'react-native';
import { DotLottie, Mode, type Dotlottie } from '@lottiefiles/dotlottie-react-native';

export default function App() {
  const ref = useRef<Dotlottie>(null);

  return (
    <View style={styles.container}>
      <DotLottie
        ref={ref}
        source={require('./animation.lottie')}
        style={styles.animation}
        loop={false}
        autoplay={false}
      />
      <View style={styles.controls}>
        <Button title="Play" onPress={() => ref.current?.play()} />
        <Button title="Pause" onPress={() => ref.current?.pause()} />
        <Button title="Stop" onPress={() => ref.current?.stop()} />
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  animation: {
    width: 200,
    height: 200,
  },
  controls: {
    flexDirection: 'row',
    gap: 10,
    marginTop: 20,
  },
});

Animation Control

The component provides several methods to control the animation playback:

Playback Controls

// Start playing the animation
ref.current?.play();

// Pause the animation
ref.current?.pause();

// Stop the animation
ref.current?.stop();

// Set animation loop
ref.current?.setLoop(true);

// Set animation speed (1 is normal speed)
ref.current?.setSpeed(1);

Playback Modes

You can control the direction of the animation using playback modes:

// Play animation forward
ref.current?.setPlayMode(Mode.FORWARD);

// Play animation in reverse
ref.current?.setPlayMode(Mode.REVERSE);

Loading Animations

The component supports loading animations from different sources:

// Load from local asset
<DotLottie source={require('./animation.lottie')} />

// Load from URL
<DotLottie source={{ uri: 'https://example.com/animation.lottie' }} />

Styling

You can style the animation container using standard React Native style props:

<DotLottie
  style={{
    width: 200,
    height: 200,
    backgroundColor: 'transparent',
  }}
  source={require('./animation.lottie')}
/>

Error Handling

It’s recommended to handle potential loading errors:

<DotLottie
  source={require('./animation.lottie')}
  onError={(error) => {
    console.error('Animation failed to load:', error);
  }}
/>