[Android] dotlottie files not working about lottie-react-native HOT 11 OPEN

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.

from lottie-react-native.

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.

from lottie-react-native.

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?

from lottie-react-native.

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.

from lottie-react-native.

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.

from lottie-react-native.

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

from lottie-react-native.

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

from lottie-react-native.

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

from lottie-react-native.

it also not working on ios.

from lottie-react-native.

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

from lottie-react-native.

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

from lottie-react-native.