Open RRaideRR opened 3 months ago
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.
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.
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.
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?
same ... requiring dotlottie files within expo router not working
same. I' using expo in bare react-native project.
I can also confirm that it works fine on v5.1.6
it also not working on ios.
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
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
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.
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
Minimal reproduction
(https://github.com/RRaideRR/dot-lottie-bug)
React Native Environment
Lottie Version
Version: 6.6.0