Comments (15)
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.
Glad it's not that bad! I have to try the suggestion above but I ran my app on Android the other day for the first time to see how things were going (priority for now is iOS) and it scared me!
from lottie-react-native.
i had a similar issue in 5.1.0 after updating its working fine
from lottie-react-native.
@nilavanraj updating what to which version?
from lottie-react-native.
@dani-mp v6.7.2
from lottie-react-native.
Related Issues (20)
- Animation flickering & Some animations not even visible on Android HOT 5
- [MACOS App Development][react Native Build Failure] Cannot find type 'Color' in scope HOT 2
- Flashing while animation is playing HOT 1
- Xcode will not build project with [email protected] due to lack of PrivacyInfo HOT 2
- My Lottie animation not working correctly HOT 8
- New version Lottie-ios(4.4.2) minimum deployment target HOT 8
- Conflicts event type within Android/iOS/Windows
- The Swift pod `lottie-react-native` depends upon `DoubleConversion`, which does not define modules. HOT 6
- React-native 074 pod install error HOT 7
- React native 0.74.1 pod install error HOT 1
- lottie-ios 4.4.3 not supported HOT 4
- [Web] Animation doesn't start even when the play method is called
- [Android | Expo 51 | RN 0.74.1] newArchEnabled = true; parseSync is not a function HOT 3
- Not work ref HOT 2
- [Web] Error: lottie-react-native: The module @lottiefiles/react-lottie-player is missing. (Expo 51) HOT 1
- Closing the loop: We believe this was an issue with the lottiefiles.com exporter, and not an issue with the iOS and Android renderer implementations. The LottieFiles team deployed a fix for this on their end. HOT 1
- [iOS] No support for Xcode 16 beta HOT 5
- Broken animation rendering on iOS and Android but not web
- Android onAnimationFinish callback loop HOT 1
- ^6.7.2 > Getting error in xCode: 'CALayerContentsGravity' is only available in iOS 12.0 or newer HOT 3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from lottie-react-native.