https://kotlinlang.org logo
Join Slack
Powered by
Does anyone know why skottie skips over embedded d...
# multiplatform
i
Does anyone know why skottie skips over embedded data:image/png;base64, in Lottie json files? It works fine on Lottie for Android, but when I use skottie for iOS/Desktop it doesn't draw animations
u
@Ismail Were you able to find a solution for this? I think Skia renderer does not support base 64 images in lottie json Would an expect actual solution only work in this case?
i
Unfortunately No, I can't figure out a solution for this.
u
What if we use an expect/actual solution with ios lottie?
i
I'm currently working on adding lottie-ios
u
Thanks
i
I've now added iOS lottie, it's working with files but I can't load Urls. I tried this CompatibleAnimationView( url = NSURL.URLWithString(spec.url)!! ) but its not loading
I tried it with NSData and it works. val url = NSData._dataWithContentsOfURL_(NSURL.URLWithString(spec.url)!!) CompatibleAnimationView( data = url )
u
Amazing. I tired with CompatibleAnimationLayout but there was this white blinking in dark mode.
Maybe because I was putting it in a UIKitView. If you have gotten it to work then it will be great for the community.
Any idea when new release is planned?
i
Most likely at the end of the week, I just have to fix little issues such as UIKITVIEW background and test it out
u
That is the only issue I was unable to find a fix for. https://github.com/JetBrains/compose-multiplatform/issues/3154
i
None of those workarounds work for my problem, at the moment this is what it looks like If I have a red background, I will just set UIKITVIEW as red, or if I want to match it with the Material theme background, etc., I can also do that. The default value is transparent, so if you have a white background, then kottie bg is not needed.
Default Bg Color is Transparent
KottieAnimation( composition = composition, progress = { animationState.progress }, modifier = modifier .size(300.dp), backgroundColor = Color Red )
I've released a new version, try it. Due to Lottie ios, you have to add cocoapods
u
Thanks a lot. Trying it now
Hi I am getting linker errors. I am using cocoapods
Do I need to lottie-ios pod separately ?
Copy code
ld: warning: Could not find or use auto-linked framework 'Lottie': framework 'Lottie' not found
ld: Undefined symbols:
  _OBJC_CLASS_$__TtC6Lottie19CompatibleAnimation, referenced from:
       in shared[arm64][2](shared.framework.o)
  _OBJC_CLASS_$__TtC6Lottie23CompatibleAnimationView, referenced from:
       in shared[arm64][2](shared.framework.o)
clang: error: linker command failed with exit code 1 (use -v to see invocation)
i
Add Lottie ios in the Podfile located in iOS app folder,
For some reason that's what you have to do, I'm trying to figure out a way to auto link without adding the pod again
u
Tried that getting duplicate symbols Using it like this
Copy code
kotlin {

    cocoapods {
        pod("FirebaseAuth")
        pod("GoogleSignIn")
        pod("lottie-ios") {
            version = "4.3.3"
            moduleName = "Lottie"
            extraOpts += listOf("-compiler-option", "-fmodules")
        }
    }
i
Screenshot 2024-02-09 at 22.06.06.png
Screenshot 2024-02-09 at 22.06.12.png
if you dont have pod files, then go in terminal and type in following commands
pod init.
pod install
u
Trying this
i
add the pod then type in command pod update
u
Alright let me see if this works
i
hopefully it works, I did this for my personal project and its annoying, if you know a better way and want to contribute then just make a pull request and I can check it out.
u
Hi @Ismail It did work The issue is UIKitView still blinks white while apply background color
Which looks ugly
Also for some reason it does not render this json properly which works fine on web preview
start_night.json
i
yeah the blink is annoying, it will only work fine with a white background so the blink blends in
can you send me the json file so I can try it please
u
I sent it above
i
thanks, also check out my latest thread in the Multiplatform channel, you dont have to Add Lottie in the Podfile, just in the app build.gradle and add link only = true
u
Ahhh got it.
I am suspect maybe ios-lottie is unable to run my json
Not sure though
i
Did you try it with the earlier versions on kottie?
u
I am using 4.3.3
i
What about the earlier versions? Did your json file work ?
u
Trying that…. works fine in Android
It does not work Actually it does work in the sense it does not throw an error But there elements missing while animation runs that should be there I tried 4.4.0 which is latest and 4.0.0 from 2022
i
I've tested it out and that's all I see
PXL_20240210_001713804.TS.mp4
u
Yup
i
In the meantime, I will try to figure out how to improve the background.
Other developers are having the same issue
✅ 1
u
I have tried almost every trick I could muster but that ugly blinking stays Not sure why they are not addressing it
Completely ruins the iOS experience
i
Yep, hopefully they will fix it soon
u
The only way I see is not using UIKitView. But that does not render LottieCompatibleAnimation at all. Maybe because it needs NSConstraints? All my attempts have been in vain.
i
I've added the layout constraints, it doesn't make a difference
u
Hmmm will update if I find something
@Ismail Spec.JsonString is not available with 1.4.2 release?
i
Nope, it's available in 1.4.1 or the latest version
u
cool, got it
@Ismail They are asking to switch to main thread rendering https://github.com/airbnb/lottie-ios/issues/2314
👍 1
i
Check this out https://github.com/airbnb/lottie-ios/discussions/1627 and I've also updated the sample so check out the iOSapp folder, you need to add [LottieConfiguration.shared.renderingEngine = .mainThread] in a AppDelegate. I used .mainthread instead of .automatic, [ LottieConfiguration.shared.renderingEngine = .mainThread ], for some reason .automatic didn't work.
u
Shouldn't that be centralized? Like same for Androi?
Because it does not work with Android as well. Since it's a core engine problem I'm assuming it will work for Android as well?
i
I don't know what you mean, it's already working on android. the issue you had was only for iOS
Screenshot 2024-02-17 at 00.46.36.png
u
The logo seems to be distorted. I'm wondering if it's because of not being on main thread
i
That's a screenshot from my computer, here's a screenshot from my phone
No issues from my side
Screenshots and videos make it a bit distorted
u
I tried and it works fine for iOS. But its distorted in Android. Its not a screenshot or video problem. Possible to do main thread rendering with Android as well?
i
I'm not sure, I can't see the same issues on my side. Also you can try it on your side just like the lottie-ios config
u
I dont see any way to add a similar config for Android
@Ismail I figured out the issue There is an option of 
maintainOriginalImageBounds
in lottie-android Right now Kottie does not expose this option Setting this fixes the base64 image issue Would it possible to have this?
👀 1
i
I'll check it out and let you know
u
I have created an issue. Would be easier to track there. Thanks
👍 1
a
Hey @Ismail I'm running into the 
Could not find or use auto-linked framework 'Lottie': framework 'Lottie' not found
issue in KMP/CMP project. I'm not using cocoapods in my project, do I still need to add the cocoapods gradle block anyway?
i
Hi Andrew, unfortunately yes. The library depends on the lottie-ios pod, so whoever wants to use it also has to add cocoapods. There's no way around it at the moment.
a
Thanks for the response. I'm trying to figure out just what I need in my configuration to make it work
first of all, do I need to have the xcworkspace open in xcode?
i
I'm going to add a step by step guide to show how to add/configure cocoapods in order to use it with kottie, It will be easier for me to explain it rather than here. Is it okay if I get back to you later with an updated read-me?
a
Sure, sounds good
👍 1
I go back and forth from getting the linker error with the xcodeproj to an error with pod install in the xcworkspace, so any info will be apreciated 😆
i
Yeah, it's tricky at the beginning. A few people had the same problem and there's not much clear info out there
a
I'll definitely be waiting. I got so close to making work but had to capitulate lol. Android works great, iOS, not so much
i
I've updated the readme https://github.com/ismai117/kottie I've tested it with new projects and it was consistent. If you have any issues. Let me know
a
THANK YOU
👍 1
i
Is that working for you now?
a
gonna try here in just a bit
Trying now actually
It works! I think you just need to switch the 
pod init/install
steps to before you config build.gradle
👍 1
Playing my composition back, and I'm need it to have a transparent background; do i need to do something special to make that work?
Currently has a white background
I think I need to set the render mode; however I can't seem to import the library into my swift code to configure it. How do you enable that?
i
For the white background problem, check this completed issue https://github.com/ismai117/kottie/issues/5
a
Well shoot, so transparent bg just doesn't work at all on iOS?
In my case it's supposed to "overlay" on dynamic content, so a solid bg won't cut it
i
Yeah when you use UIKitView, there's an issue with the transparent bg. I'm sure there's workarounds for it. In my personal projects I just use the Material theme background or surface. So it changes when it's dark/light mode
a
What about using the SwiftUI player?
i
I'm not sure how that's going to work
I've now added automatic rendering for iOS inside the library, I will also add it for Android in the next release.
a
Sweeeeet
83 Views
Open in Slack
PreviousNext
Powered by