Properties Reference

Component Properties

PropertyTypeDefaultDescription
sourcenumber | { uri: string }-The source of the animation. Can be a local require or a URL
autoplaybooleanfalseWhether to automatically play the animation when mounted
loopbooleanfalseWhether to loop the animation
styleViewStyle-Style object for the animation container

Event Handlers

PropertyTypeDescription
onLoad() => voidCalled when the animation is loaded successfully
onError(error: any) => voidCalled when there’s an error loading the animation
onPlay() => voidCalled when the animation starts playing
onPause() => voidCalled when the animation is paused
onStop() => voidCalled when the animation is stopped
onComplete() => voidCalled when the animation completes (only when loop is false)

Methods

The following methods are available through the component ref:

MethodTypeDescription
play()() => voidStarts playing the animation
pause()() => voidPauses the animation
stop()() => voidStops the animation and resets to initial frame
setLoop(loop)(loop: boolean) => voidSets whether the animation should loop
setSpeed(speed)(speed: number) => voidSets the playback speed (1 is normal speed)
setPlayMode(mode)(mode: Mode) => voidSets the playback mode (FORWARD or REVERSE)

Playback Modes

The Mode enum provides the following options for animation playback:

enum Mode {
FORWARD = 'FORWARD',
REVERSE = 'REVERSE'
}

TypeScript Support

The component includes TypeScript definitions. You can import types as follows:

import { DotLottie, Mode, type Dotlottie } from '@lottiefiles/dotlottie-react-native';

Style Types

The component accepts standard React Native ViewStyle properties:

import { ViewStyle } from 'react-native';
interface DotLottieProps {
style?: ViewStyle;
// ... other props
}