-
-
Notifications
You must be signed in to change notification settings - Fork 1.8k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[Android] dotlottie files not working #1182
Comments
Hi @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. |
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. |
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. |
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. |
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. I have a patch on Android to sanitise this URL. You can apply this via 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
The text was updated successfully, but these errors were encountered: