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.)

1. 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"
   

2. 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)
   

3. 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 \
   

4. Open the android/app/src/main/jni/MainComponentsRegistry.cpp file and update the file as it follows:
   1. 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>
      

   2. 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 ..