# 🌈 react-native-rlottie

🚧 WIP, please check again later!

## Features

- ▶️ Uses [rlottie](https://github.com/Samsung/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](https://github.com/airbnb/lottie-android) (which is used by [lottie-react-native](https://github.com/lottie-react-native/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

```bash
yarn add react-native-rlottie

npm i react-native-rlottie
```

### iOS

Run pod install:

```bash
npx pod-install
```

### Android

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

<details>
    <summary>Click to expand for the instructions!</summary>

(_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:
    ```diff
    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"
    ```
1. Open the `android/app/src/main/jni/Android.mk` file and update the file as it follows:
    ```diff
        # 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)
    ```
1. In the same file above, go to the `LOCAL_SHARED_LIBRARIES` setting and add the following line:
    ```diff
        libreact_codegen_rncore \
    +   libreact_codegen_rlottieview \
        libreact_debug \
    ```
1. 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;
        }
        ```
</details>    

## Supported After Effects Features

This has full feature parity with rlottie, so check their [supported features here](https://github.com/Samsung/rlottie#supported-after-effects-features)


## 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:

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