react-native-rlottie v0.0.2-alpha.0
š 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:
(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: 1. Add the import for the calculator:```diff #include <react/renderer/components/answersolver/ComponentDescriptors.h> + #include <react/renderer/components/rlottieview/ComponentDescriptors.h> #include <react/renderer/components/rncore/ComponentDescriptors.h> ``` 1. Add the following check in the `sharedProviderRegistry` constructor: ```diff 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 ..
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago