Properties Reference
Component Properties
Property | Type | Default | Description |
---|---|---|---|
source | number | { uri: string } | - | The source of the animation. Can be a local require or a URL |
autoplay | boolean | false | Whether to automatically play the animation when mounted |
loop | boolean | false | Whether to loop the animation |
style | ViewStyle | - | Style object for the animation container |
Event Handlers
Property | Type | Description |
---|---|---|
onLoad | () => void | Called when the animation is loaded successfully |
onError | (error: any) => void | Called when there’s an error loading the animation |
onPlay | () => void | Called when the animation starts playing |
onPause | () => void | Called when the animation is paused |
onStop | () => void | Called when the animation is stopped |
onComplete | () => void | Called when the animation completes (only when loop is false) |
Methods
The following methods are available through the component ref:
Method | Type | Description |
---|---|---|
play() | () => void | Starts playing the animation |
pause() | () => void | Pauses the animation |
stop() | () => void | Stops the animation and resets to initial frame |
setLoop(loop) | (loop: boolean) => void | Sets whether the animation should loop |
setSpeed(speed) | (speed: number) => void | Sets the playback speed (1 is normal speed) |
setPlayMode(mode) | (mode: Mode) => void | Sets 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}