🌈 react-native-rlottie
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; }
- Add the import for the calculator:
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 ..