https://github.com/lottiefiles/dotlottie-react-native
Official LottieFiles player for rendering Lottie and dotLottie animations in React Native
https://github.com/lottiefiles/dotlottie-react-native
dotlottie lottie lottie-android lottie-ios lottie-react-native react-native
Last synced: 19 days ago
JSON representation
Official LottieFiles player for rendering Lottie and dotLottie animations in React Native
- Host: GitHub
- URL: https://github.com/lottiefiles/dotlottie-react-native
- Owner: LottieFiles
- License: mit
- Created: 2024-08-05T15:00:47.000Z (10 months ago)
- Default Branch: main
- Last Pushed: 2024-10-28T18:38:10.000Z (7 months ago)
- Last Synced: 2025-04-08T03:38:25.669Z (about 2 months ago)
- Topics: dotlottie, lottie, lottie-android, lottie-ios, lottie-react-native, react-native
- Language: Kotlin
- Homepage:
- Size: 1.95 MB
- Stars: 7
- Watchers: 4
- Forks: 2
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# dotLottie React Native
Lottie & dotLottie component for React Native ([iOS](https://github.com/LottieFiles/dotlottie-ios/) and [Android](https://github.com/LottieFiles/dotlottie-android/))
## Installation
### npm
```sh
npm install @lottiefiles/dotlottie-react-native
```
### yarn
```sh
yarn add @lottiefiles/dotlottie-react-native
```
### Pod Installation (iOS)
To support iOS 15.4, ensure your `Podfile` specifies the platform version:
```ruby
platform :ios, '15.4'
```
After installing the package, navigate to the `ios` directory and install the pods:
```sh
cd ios
pod install
```
### Metro Configuration
To support `.lottie` files, update your `metro.config.js`:
```javascript
// metro.config.js
const { getDefaultConfig } = require('metro-config');
module.exports = (async () => {
const {
resolver: { sourceExts, assetExts },
} = await getDefaultConfig();
return {
resolver: {
assetExts: [...assetExts, 'lottie'],
},
};
})();
```
### Expo Configuration
If you're using Expo, you need to prebuild to generate the `ios` and `android` folders:
```sh
expo prebuild
```
## Usage
```ts
import { 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(null);
return (
ref.current?.play()} />
ref.current?.pause()} />
ref.current?.stop()} />
ref.current?.setLoop(true)} />
ref.current?.setSpeed(1)} />
ref.current?.setPlayMode(Mode.FORWARD)}
/>
ref.current?.setPlayMode(Mode.REVERSE)}
/>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
},
box: {
width: 200,
height: 200,
marginVertical: 20,
},
});
```
## Props and Methods
| Prop/Method | Type | Default Value | Description |
| ----------------------------------- | ------------------------------ | ------------- | ----------------------------------------------------------------- |
| `source` | `{ uri: string }` or `require` | **Required** | Specifies the animation file to be loaded. |
| `style` | `StyleProp` | `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` | `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. |
## Contributing
See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.
## License
MIT
---
Made with [create-react-native-library](https://github.com/callstack/react-native-builder-bob)