Getting Started

Introduction

dotLottie-react-native is a React Native component that allows you to easily embed Lottie animations in your React Native applications. It provides native support for both iOS and Android platforms through @lottiefiles/dotlottie-ios and @lottiefiles/dotlottie-android.

Installation

Using npm

npm install @lottiefiles/dotlottie-react-native

Using yarn

yarn add @lottiefiles/dotlottie-react-native

Additional Setup

iOS Setup

To support iOS 15.4, ensure your Podfile specifies the platform version:

platform :ios, '15.4'

After installing the package, install the pods:

cd ios
pod install

Metro Configuration

To support .lottie files, update your metro.config.js:

const { getDefaultConfig } = require('metro-config');

module.exports = (async () => {
  const {
    resolver: { sourceExts, assetExts },
  } = await getDefaultConfig();
  return {
    resolver: {
      assetExts: [...assetExts, 'lottie'],
    },
  };
})();

Expo Setup

If you’re using Expo, you need to prebuild to generate the ios and android folders:

expo prebuild

Basic Usage

import React from 'react';
import { View } from 'react-native';
import { DotLottie } from '@lottiefiles/dotlottie-react-native';

const App = () => {
  return (
    <View style={{ flex: 1 }}>
      <DotLottie
        source={require('./animation.lottie')}
        loop
        autoplay
        style={{ width: 200, height: 200 }}
      />
    </View>
  );
};