DOCSEARCHbyAlgolia
Submit Docs

Lottie React Native

repository·master·Indexed 12 days ago

https://github.com/lottie-react-native/lottie-react-native

A component library for rendering Adobe After Effects animations (exported via bodymovin) natively in React Native applications across iOS, Android, Web, and Windows. Version 7.4.0 provides the LottieView component for declarative and imperative animation control, support for .lottie files, and dynamic layer modification via color and text filters.

Tokens
8K
Snippets
26
Records
35
Agent score
93%

What's inside Lottie React Native

  1. Animate Lottie views with Reanimated or Animated

    master

    As of version 6, the main Lottie view is no longer wrapped by the React Native Animated API by default. This change was made to prevent conflicts for users wanting to use Reanimated. If you need to animate the Lottie component itself, you must wrap it using createAnimatedComponent from either react-native or react-native-reanimated.

    import Animated from 'react-native-reanimated';
import Lottie from 'lottie-react-native';

const AnimatedLottie = Animated.createAnimatedComponent(Lottie);

// Use AnimatedLottie for animations
<AnimatedLottie source={{...}} style={{...}} />

  2. Use animations with external image assets

    master

    If your Lottie JSON file contains an assets array (exported from AfterEffects/bodymovin), you must manually include those images in your native project folders for them to render correctly.

    Important: You must fully rebuild your application whenever you add or modify these images.

    Android Setup

    1. Copy your images into [PROJECT FOLDER]/android/app/src/main/assets.
    2. It is recommended to organize them into subfolders (e.g., lottie/animation_name).
    3. Use the imageAssetsFolder prop to point to the relative path of that folder.

    iOS Setup

    1. Open your project in Xcode.
    2. Right-click on the Resources folder in the project navigator.
    3. Select "Add files to [Project]" and select your required images.

    Renaming Assets

    If you rename an image file, you must also update the corresponding filename in the Lottie JSON file under the p (path) key within the assets array.

    // Example of the 'p' key in the JSON assets array that must match your filename
{
  "assets": [
    {
      "id": "image_0",
      "w": 737,
      "h": 1215,
      "u": "images/",
      "p": "new_snihy_name.png"
    }
  ]
}
    // Android usage example
<LottieView
  source={require('./animation.json')}
  imageAssetsFolder={'lottie/animation_1'}
/>

  3. Provide dimensions via style props

    master

    In version 6, Lottie no longer sets default width, height, or aspectRatio on your views. You must explicitly provide these dimensions via the style prop to ensure the animation is visible and correctly sized.

    // Before (v5)
<Lottie source={{...}} />

// After (v6)
<Lottie source={{...}} style={{width: 100, height: 100}} />

// Or using percentage/aspectRatio
<Lottie source={{...}} style={{width: '100%', aspectRatio: 16/9}} />

  6. Setup Jest for dotLottie files

    master

    To prevent Jest from failing when encountering .lottie files, create a mock file and update your Jest configuration.

    1. Create __mocks__/lottieMock.js with the following content:
    module.exports = "lottie-test-file-stub";
    1. Update jest.config.js to map .lottie files to that mock:
    module.exports = {
  // ...
  moduleNameMapper: {
    // ...
    '\\.(lottie)$': '<rootDir>/jest/__mocks__/lottieMock.js',
  },
  // ...
}
    module.exports = {
  moduleNameMapper: {
    '\\.(lottie)$': '<rootDir>/jest/__mocks__/lottieMock.js',
  },
}

  7. Install lottie-react-native for Web

    master

    To use Lottie on the web, install the main package and the required web player dependencies.

    1. Install the npm package:
    yarn add lottie-react-native
    1. Install web player dependencies:
    yarn add @lottiefiles/dotlottie-react
    yarn add lottie-react-native
yarn add @lottiefiles/dotlottie-react

  8. Install lottie-react-native for Windows

    master

    For Windows (React Native >= 0.63), follow these steps to configure your project.

    1. Project File Configuration

    Add the following to the end of your project file (.vcxproj or .csproj). For C# apps, place this after any Microsoft.Windows.UI.Xaml.CSharp.targets includes. For C++ apps, place this after any Microsoft.Cpp.targets includes.

    <PropertyGroup Label="LottieReactNativeProps">
    <LottieReactNativeDir>$([MSBuild]::GetDirectoryNameOfFileAbove($(MSBuildThisFileDirectory), 'node_modules\lottie-react-native\package.json'))\node_modules\lottie-react-native</LottieReactNativeDir>
</PropertyGroup>
<ImportGroup Label="LottieReactNativeTargets">
    <Import Project="$(LottieReactNativeDir)\src\windows\cppwinrt\PropertySheets\LottieGen.Auto.targets" />
</ImportGroup>

    Add the LottieReactNative.vcxproj file to your Visual Studio solution.

    2. NuGet Package Installation

    For C# apps:

    • LottieGen.MsBuild
    • Microsoft.UI.Xaml
    • Win2D.uwp
    • Microsoft.Toolkit.Uwp.UI.Lottie (Required for loading JSON dynamically. If using only codegen, set <EnableLottieDynamicSource>false</EnableLottieDynamicSource> and omit this).

    For C++ apps:

    • LottieGen.MsBuild
    • Microsoft.UI.Xaml

    Note: WinUI 2.6 (Microsoft.UI.Xaml 2.6.0) is required by default.

    3. Register the Provider

    C# Implementation:

    PackageProviders.Add(new LottieReactNative.ReactPackageProvider(new AnimatedVisuals.LottieCodegenSourceProvider()));

    C++ Implementation:

    #include <winrt/LottieReactNative.h>
#include <winrt/AnimatedVisuals.h>

... 

PackageProviders().Append(winrt::LottieReactNative::ReactPackageProvider(winrt::AnimatedVisuals::LottieCodegenSourceProvider()));

    4. Using Codegen Animations

    Add LottieAnimation items to your project file to compile them into the application:

    <ItemGroup>
    <LottieAnimation Include="Assets/Animations/MyAnimation.json" Name="MyAnimation" />
</ItemGroup>

    Then use it in JavaScript:

    <LottieView source={"MyAnimation"} style={{width: "100%", height: "100%"}} />

  10. Configure Metro to support .lottie files

    master

    To use .lottie files, you must add the lottie extension to the assetExts array in your metro.config.js file.

    const { getDefaultConfig, mergeConfig } = require("@react-native/metro-config");

const defaultConfig = getDefaultConfig(__dirname);

const config = {
  resolver: {
    assetExts: [...defaultConfig.resolver.assetExts, "lottie"],
  },
};

module.exports = mergeConfig(getDefaultConfig(__dirname), config);