react-native-rlottie

🌈 react-native-rlottie

🚧 WIP, please check again later!

Features

• ▶️ Uses rlottie to run lottie animations
• 🌠 rlottie creates rasterized bitmaps for each frame of the animation (instead of using the platform's animation API to continuisly run the animation).
  • This also gives us the possibility to pre-render the animation into cache, so even complex animation can start and run in 60 FPS
• ✅ Compatible with the new architecture (Fabric)
• 🤖 Especially on android, using rlottie can be more performant than lottie-android (which is used by lottie-react-native):
  • 📉 Using less CPU and RAM
  • 🏃‍♂️ Puts less pressure on the UI/main Thread, ensuring 60 FPS even on low end devices
  • Read more in Performance Comparison

Performance Comparison

// TODO

Installation

yarn add react-native-rlottie

npm i react-native-rlottie

iOS

Run pod install:

npx pod-install

Android

No additional steps for android are required, except when using the new react native architecture:

Click to expand for the instructions!

(Note: This setup is required to to the fact that the on android Autolinking doesn't work with the new architecture out of the box. This procedure will change in the future.)

• Open android/app/build.gradle file and update the file as it follows:

  defaultConfig {
      ...
      "PROJECT_BUILD_DIR=$buildDir",
      "REACT_ANDROID_DIR=$rootDir/../node_modules/react-native/ReactAndroid",
  -   "REACT_ANDROID_BUILD_DIR=$rootDir/../node_modules/react-native/ReactAndroid/build"
  +   "REACT_ANDROID_BUILD_DIR=$rootDir/../node_modules/react-native/ReactAndroid/build",
  +   "NODE_MODULES_DIR=$rootDir/../node_modules/"
      cFlags "-Wall", "-Werror", "-fexceptions", "-frtti", "-DWITH_INSPECTOR=1"
      cppFlags "-std=c++17"
  

• Open the android/app/src/main/jni/Android.mk file and update the file as it follows:

      # If you wish to add a custom TurboModule or Fabric component in your app you
      # will have to include the following autogenerated makefile.
      # include $(GENERATED_SRC_DIR)/codegen/jni/Android.mk
  +
  +   # Includes the MK file for `react-native-rlottie`
  +   include $(NODE_MODULES_DIR)/react-native-rlottie/android/build/generated/source/codegen/jni/Android.mk
  +
      include $(CLEAR_VARS)
  

• In the same file above, go to the LOCAL_SHARED_LIBRARIES setting and add the following line:

      libreact_codegen_rncore \
  +   libreact_codegen_rlottieview \
      libreact_debug \
  

• Open the android/app/src/main/jni/MainComponentsRegistry.cpp file and update the file as it follows:
  • Add the import for the calculator:

        #include <react/renderer/components/answersolver/ComponentDescriptors.h>
    +   #include <react/renderer/components/rlottieview/ComponentDescriptors.h>
        #include <react/renderer/components/rncore/ComponentDescriptors.h>
    

  • Add the following check in the sharedProviderRegistry constructor:

        auto providerRegistry = CoreComponentsRegistry::sharedProviderRegistry();
    
        // Custom Fabric Components go here. You can register custom
        // components coming from your App or from 3rd party libraries here.
        //
        // providerRegistry->add(concreteComponentDescriptorProvider<
        //        AocViewerComponentDescriptor>());
    +   providerRegistry->add(concreteComponentDescriptorProvider<RLottieViewComponentDescriptor>());
    
        return providerRegistry;
    }
    

Supported After Effects Features

This has full feature parity with rlottie, so check their supported features here

Development

To develop this library use the example/. Simply install the dependencies in the root dir with yarn and then install the dependencies in the example/.

As this library is compatible with the old and the new arch, it can be useful to check both versions during development.

🤖 Switching arch:

In example/android/gradle.properties you can simply toggle the newArchEnabled variable.

🍎 Switching arch:

Go into example/ios and run the following command setting RCT_NEW_ARCH_ENABLED to 1 or 0 depending on which arch you want to test:

cd ios && RCT_NEW_ARCH_ENABLED=1 pod install && cd ..