[Android] dotlottie files not working

[RRaideRR]

Description

When I try to load a dotlottie file on Android (does not matter whether its a device or the simulator), the onAnimationFailure callback prints out "Use JsonReader.setLenient(true) to accept malformed JSON at path $".

On iOS, the same code is working like a charm.

Steps to Reproduce

1. Run the project with "npx expo run:android"
2. The animation will not be displayed. Check the console log for an error message.

Minimal reproduction

(https://github.com/RRaideRR/dot-lottie-bug)

React Native Environment

• Expo 50 prebuilt (but also occurs on Custom Dev Client)

System:
  OS: macOS 14.3.1
  CPU: (8) arm64 Apple M1
  Memory: 99.09 MB / 16.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 18.16.1
    path: ~/.nvm/versions/node/v18.16.1/bin/node
  Yarn:
    version: 1.22.19
    path: ~/.yarn/bin/yarn
  npm:
    version: 9.5.1
    path: ~/.nvm/versions/node/v18.16.1/bin/npm
  Watchman:
    version: 2023.12.04.00
    path: /opt/homebrew/bin/watchman
Managers:
  CocoaPods:
    version: 1.14.3
    path: /opt/homebrew/bin/pod
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 23.2
      - iOS 17.2
      - macOS 14.2
      - tvOS 17.2
      - visionOS 1.0
      - watchOS 10.2
  Android SDK: Not Found
IDEs:
  Android Studio: 2022.3 AI-223.8836.35.2231.10406996
  Xcode:
    version: 15.2/15C500b
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 17.0.9
    path: /usr/bin/javac
  Ruby:
    version: 3.2.1
    path: /opt/homebrew/opt/ruby/bin/ruby
npmPackages:
  "@react-native-community/cli": Not Found
  react:
    installed: 18.2.0
    wanted: 18.2.0
  react-native:
    installed: 0.73.4
    wanted: 0.73.4
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: false
iOS:
  hermesEnabled: Not found
  newArchEnabled: Not found

Lottie Version

Version: 6.6.0

[TheRogue76]

Hi @RRaideRR,
Thank you for the reproducible. Things are a bit hectic at the moment on our side, but I will try to find some free time on the weekend to try out your reproducible and get back to you. From the log you provided, it seems like there might have been some issue with the dotLottie file itself, but we will see.

[RRaideRR]

Hey no worries mate.

I tried it with several different dotLottie files, everything got the same problem. The one in my reproducible example should be a sample file from the official dotLottie website.

Blind guess from my side: it has something to do with Expo and the metro config.

[TheRogue76]

Hey no worries mate.

I tried it with several different dotLottie files, everything got the same problem. The one in my reproducible example should be a sample file from the official dotLottie website.

Blind guess from my side: it has something to do with Expo and the metro config.

Possible. I remember something about Metro config on Expo having issues with dotLottie files. I can not recall all the details at the moment, but let's see if we can figure it out.

[TheRogue76]

The way dotLottie works is that we get the URL for the file inside the bundle, and we call it on the native side. I am seeing some interesting stuff here.
The asset path on Bare RN:

asset path on the reproducible:

Right off the bat, the unstable_path thing is not something i have seen before. I am guessing Expo does a bit more with the way they bundle things.
I break pointed the Android side a bit more to see where it would end up. Both call the URL that is produced by the bundler but only the Bare RN one returns an actual file that can get loaded into Lottie (Checked both from the browser), the expo generated one seems to be having an issue. I have no further idea what is going on on that side. @Kudo (sorry for the ping) do you have any ideas?

[arasrezaei]

same ... requiring dotlottie files within expo router not working

[chj-damon]

same. I' using expo in bare react-native project.

[chj-damon]

I can also confirm that it works fine on v5.1.6

[chj-damon]

it also not working on ios.

[TheRogue76]

I can also confirm that it works fine on v5.1.6

Hi. I think you might be confusing it with some other issue. dotLottie support was added in 6.1.0. It did not exist in LRN 5

[enagorny]

Experimentally I found that it is indeed something with expo and metro.
So I've renamed animation.lottie into animation_dot_lottie.json and Android picked this up.
Without extension it also seems to work animation_dot_lottie

[peterlazar1993]

The way dotLottie works is that we get the URL for the file inside the bundle, and we call it on the native side. I am seeing some interesting stuff here. The asset path on Bare RN: asset path on the reproducible: Right off the bat, the unstable_path thing is not something i have seen before. I am guessing Expo does a bit more with the way they bundle things. I break pointed the Android side a bit more to see where it would end up. Both call the URL that is produced by the bundler but only the Bare RN one returns an actual file that can get loaded into Lottie (Checked both from the browser), the expo generated one seems to be having an issue. I have no further idea what is going on on that side. @Kudo (sorry for the ping) do you have any ideas?

This only happens when using the expo metro config. As far as I can tell they transform the path to make sure it works on the web as well. I'm pretty sure the bug happens only in debug builds. The files are accessible in release builds.
expo-assets/AssetUris

I have a patch on Android to sanitise this URL. You can apply this via patch-package. It is very rudimentary but it should be sufficient. This patch does not affect release builds.

lottie-react-native+6.7.2.patch

diff --git a/node_modules/lottie-react-native/android/src/main/java/com/airbnb/android/react/lottie/LottieAnimationViewManagerImpl.kt b/node_modules/lottie-react-native/android/src/main/java/com/airbnb/android/react/lottie/LottieAnimationViewManagerImpl.kt
index 18c5252..3c9e3c5 100644
--- a/node_modules/lottie-react-native/android/src/main/java/com/airbnb/android/react/lottie/LottieAnimationViewManagerImpl.kt
+++ b/node_modules/lottie-react-native/android/src/main/java/com/airbnb/android/react/lottie/LottieAnimationViewManagerImpl.kt
@@ -12,6 +12,7 @@ import com.facebook.react.bridge.ReadableArray
 import com.facebook.react.common.MapBuilder
 import com.facebook.react.uimanager.ThemedReactContext
 import com.facebook.react.uimanager.UIManagerHelper
+import java.net.URLDecoder
 
 internal object LottieAnimationViewManagerImpl {
     const val REACT_CLASS = "LottieAnimationView"
@@ -185,7 +186,13 @@ internal object LottieAnimationViewManagerImpl {
         uri: String?,
         viewManager: LottieAnimationViewPropertyManager
     ) {
-        viewManager.sourceDotLottie = uri
+        var cleanUri = uri
+        if(BuildConfig.DEBUG && !uri.isNullOrEmpty() && "?unstable_path=." in uri) {
+            val urlSegments = uri.split("?unstable_path=.")
+            val cleanedPath = URLDecoder.decode(urlSegments[1], "UTF-8")
+            cleanUri = "${urlSegments[0].trimEnd('/')}/${cleanedPath.trimStart('/')}"
+        }
+        viewManager.sourceDotLottie = cleanUri
         viewManager.commitChanges()
     }
 

I can also send a PR, but I don't think this fix should be made in this library, since it's a very expo specific problem.