Want to learn more about Ionic? Check out the free Quick Start Guide: ionicacademy.com/ionic-quickstart-guide/ 🔥 Make sure to subscribe for more! ruclips.net/user/simongrimmdev_?sub_confirmation=1
hello sir, my new capacitor app taking 5 to 6 second to load after default splash-screen loading if i am calling api other wise it take 1 or 2 second after capacitor splash screen ? like step 1 - defult splash screen load step 2 - 5 - 6 second white sreen step 3 - and then ui load with api calling so any idea whats happen here in step 2 ?
Hey Simon, I was wondering if you could try a quick lab in a clean Ionic 6/Capacitor 4 app. I just did and while on ios is displayed but way off-center, smaller and incomplete, on Android it throws a big fat error on build ( java.lang.NullPointerException: Attempt to invoke interface method 'void org.apache.cordova.CordovaWebViewEngine.evaluateJavascript(java.lang.String, android.webkit.ValueCallback)' on a null object reference ). Regards!
Doesn't appear to work using Ionic 6/Capacitor 4 anymore :( I still get the small animation in the bottom right before it hides and then plays the bigger one. Even then it doesn't fill up the screen and has a white margin along the top and bottom. Looking through the Xcode logs, it appears the Lottie Animation is being called as soon as the app is opened before platform.ready and it's passing it with no options.
So I did some playing around and I managed to get it all working for anyone who stumbles across this comment. Firstly, the white margins was an issue with the actual animation. I changed the animation and the fullscreen without margins worked fine. Secondly, the issue with the double animation was resolved by simply removing the 'LottieAnimationLocation' tag in the capacitor.config.ts file. I now call them all programmatically from the app.component.ts on Platform ready.
I tried this with Capacitor 6 and Ionic 8, but not working on iOS (on android everything is ok - after manually deleting default splash screens). Can you provide source code, please? :/
Hmm might be the bg color of your app already, but actually not 100% sure! There's also a bg color you can set for Lottie as another variable: github.com/timbru31/cordova-plugin-lottie-splashscreen#preferences
Default capacitor splash screen and Lottie splash screen both are coming when I clicked on application,please suggest me any solution to hide or remove default capacitor splash
Hello, I tried capacitor 5 and ionic 7 and it doesn't work. And in the ionic documentation I can't find anything related to lottie splash screen anymore, any ideas?
Can you also check how can we set background on lottie as you can see there is white space on top & botttom. On cordova it is working but not in capacitor
Hey Simon, In our Ionic Angular Capacitor project, I've encountered a challenge. When using the filesystem plugin, Android 11 and newer versions automatically grant storage permissions. However, I need users to explicitly accept these permissions upon the app's first launch. I've explored various sources without finding a solution. Additionally, when building the Android version, Capacitor generates a default splash screen and icon. I would like to remove the splash screen. Could you please advise on how to achieve this?
I followed all your instructions. In my case, the cordova prefences ALONE didn't show the splash screen for me. I had to add the typescript stuff. But even so, at first, the splash screen does NOT show full screen, then all of a sudden it does the whole animation again, this time full screen. What's going on, you think? Thanks, Tolga
which capacitor version are you using? i'm still at 2.5* (i can't upgrade it yet) and this plugin seems that it doesn't work. I tried to install the awesome plugin as well but no luck. On android i get this error "java.lang.NullPointerException: Attempt to invoke interface method 'void org.apache.cordova.CordovaWebViewEngine.evaluateJavascript(java.lang.String, android.webkit.ValueCallback)' on a null object reference"
I was struggling with the same issue after installing lottie-splash-screen from npmjs. Seems like author of plugin didn't update it for two years hence it doesn't work with new capacitor versions. I managed to fix this issue with simple reinstall plugin from direct github repo link, like Simon did in video. Hope it helps someone.
@galaxies_dev and anyone else - Did anyone fix the issue of the lottie splashscreen animation showing small in the bottom right hand corner? I can't seem to fix that issue.
@galaxies_dev In your tutorial, you have "SplashScreen" at base level of your config JSON. In the config TS, it gives me an error when I put the "SplashScreen" at base level, with another project (or an attempt), I had "SplashScreen" in the "plugins" part of the config. Any ideas where I am supposed to put it?
In my Android project, the "splash.json" file is in "assets/public/assets/splash.json", do I use that exact file URL? or does the "public/assets/splash.json" work for that as well. My app just keeps crashing when I added the Lottie splash screen stuff, and I am trying to narrow it down to figure out what is making it crash. The error says something about an undefined object.
@@galaxies_dev Oh, I forgot to come back and say that it works fine. The other problems I was having were making it not work, the path you said is the correct one.
@@abdurrahmanrihan2348 I can't remember for sure what I did to fix it. I will look at my project again today, and see if I can remember how I fixed it.
Hi, currently I add a splash to the project used Lottie but at the time of running the application in android it shows an error: E/AndroidRuntime: FATAL EXCEPTION: main Process: com.tangelo.waldosPay, PID: 21069 java.lang.NullPointerException: Attempt to invoke interface method 'void org.apache.cordova.CordovaWebViewEngine.evaluateJavascript(java.lang.String, android.webkit.ValueCallback)' on a null object reference at de.dustplanet.cordova.lottie.LottieSplashScreen$addAnimationListeners$1.onAnimationStart(LottieSplashScreen.kt:284) at android.animation.Animator$AnimatorListener.onAnimationStart(Animator.java:539) at com.airbnb.lottie.utils.BaseLottieAnimator.notifyStart(BaseLottieAnimator.java:57) at com.airbnb.lottie.utils.LottieValueAnimator.playAnimation(LottieValueAnimator.java:207) at com.airbnb.lottie.LottieDrawable.playAnimation(LottieDrawable.java:445) at com.airbnb.lottie.LottieDrawable$2.run(LottieDrawable.java:438) at com.airbnb.lottie.LottieDrawable.setComposition(LottieDrawable.java:229) at com.airbnb.lottie.LottieAnimationView.setComposition(LottieAnimationView.java:550) at de.dustplanet.cordova.lottie.LottieSplashScreen.createLottieComposition$lambda-3(LottieSplashScreen.kt:200) at de.dustplanet.cordova.lottie.LottieSplashScreen.$r8$lambda$Z5JPNbsIT5QwjkWf2fsGcnuDdsk(Unknown Source:0) at de.dustplanet.cordova.lottie.LottieSplashScreen$$ExternalSyntheticLambda1.onResult(Unknown Source:4) at com.airbnb.lottie.LottieTask.notifySuccessListeners(LottieTask.java:144) at com.airbnb.lottie.LottieTask.access$100(LottieTask.java:27) at com.airbnb.lottie.LottieTask$1.run(LottieTask.java:131) at android.os.Handler.handleCallback(Handler.java:938) at android.os.Handler.dispatchMessage(Handler.java:99) at android.os.Looper.loopOnce(Looper.java:210) at android.os.Looper.loop(Looper.java:299) at android.app.ActivityThread.main(ActivityThread.java:8280) at java.lang.reflect.Method.invoke(Native Method) at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:576) at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:1073) Any thoughts on this, thank you
THIS APPEARS AFTER ADDING THE "LottieAnimationLocation": 'public/assetes/splash.json' !! Did someone find a solution FATAL EXCEPTION: main Process: io.fiber.al.app, PID: 23792 java.lang.NullPointerException: Attempt to invoke interface method 'void org.apache.cordova.CordovaWebViewEngine.evaluateJavascript(java.lang.String, android.webkit.ValueCallback)' on a null object reference at de.dustplanet.cordova.lottie.LottieSplashScreen$addAnimationListeners$1.onAnimationStart(LottieSplashScreen.kt:284) at android.animation.Animator$AnimatorListener.onAnimationStart(Animator.java:539) at com.airbnb.lottie.utils.BaseLottieAnimator.notifyStart(BaseLottieAnimator.java:57) at com.airbnb.lottie.utils.LottieValueAnimator.playAnimation(LottieValueAnimator.java:207) at com.airbnb.lottie.LottieDrawable.playAnimation(LottieDrawable.java:445) at com.airbnb.lottie.LottieDrawable$2.run(LottieDrawable.java:438) at com.airbnb.lottie.LottieDrawable.setComposition(LottieDrawable.java:229) at com.airbnb.lottie.LottieAnimationView.setComposition(LottieAnimationView.java:550) at de.dustplanet.cordova.lottie.LottieSplashScreen.createLottieComposition$lambda-3(LottieSplashScreen.kt:200) at de.dustplanet.cordova.lottie.LottieSplashScreen.$r8$lambda$Z5JPNbsIT5QwjkWf2fsGcnuDdsk(Unknown Source:0) at de.dustplanet.cordova.lottie.LottieSplashScreen$$ExternalSyntheticLambda1.onResult(Unknown Source:4) at com.airbnb.lottie.LottieTask.notifySuccessListeners(LottieTask.java:144) at com.airbnb.lottie.LottieTask.access$100(LottieTask.java:27) at com.airbnb.lottie.LottieTask$1.run(LottieTask.java:131) at android.os.Handler.handleCallback(Handler.java:938) at android.os.Handler.dispatchMessage(Handler.java:99) at android.os.Looper.loopOnce(Looper.java:226) at android.os.Looper.loop(Looper.java:313) at android.app.ActivityThread.main(ActivityThread.java:8669) at java.lang.reflect.Method.invoke(Native Method) at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:571) at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:1135) minSdkVersion = 22 compileSdkVersion = 31 targetSdkVersion = 30 androidxActivityVersion = '1.2.0' androidxAppCompatVersion = '1.2.0' androidxCoordinatorLayoutVersion = '1.1.0' androidxCoreVersion = '1.3.2' androidxFragmentVersion = '1.3.0' junitVersion = '4.13.1' androidxJunitVersion = '1.1.2' androidxEspressoCoreVersion = '3.3.0' cordovaAndroidVersion = '10.1.2'
Found a solution I changed my LottieSplashScreen.kt (kotlin/de/dustplanet/cordova/lottie/LottieSplashScreen.kt) in Android studio from the ( github.dev/timbru31/cordova-plugin-lottie-splashscreen/blob/master/src/android/LottieSplashScreen.kt ) and it worked with just the cordova: { preferences }
Want to learn more about Ionic? Check out the free Quick Start Guide: ionicacademy.com/ionic-quickstart-guide/ 🔥
Make sure to subscribe for more! ruclips.net/user/simongrimmdev_?sub_confirmation=1
hello sir, my new capacitor app taking 5 to 6 second to load after default splash-screen loading if i am calling api other wise it take 1 or 2 second after capacitor splash screen ? like step 1 - defult splash screen load
step 2 - 5 - 6 second white sreen
step 3 - and then ui load with api calling
so any idea whats happen here in step 2 ?
Thank you a lot!
First place where I look when I have a problem with ionic!
Happy to help Tahir :)
Hey Simon, I was wondering if you could try a quick lab in a clean Ionic 6/Capacitor 4 app. I just did and while on ios is displayed but way off-center, smaller and incomplete, on Android it throws a big fat error on build ( java.lang.NullPointerException: Attempt to invoke interface method 'void org.apache.cordova.CordovaWebViewEngine.evaluateJavascript(java.lang.String, android.webkit.ValueCallback)' on a null object reference ). Regards!
Thanks simon for awesome video,, i wait for this video long time ago
Hope you enjoyed it Hani!
So simple and powerful. Very well explained as always Simon, thank you! Lottie is awesome.
Many thanks mate :)
Doesn't appear to work using Ionic 6/Capacitor 4 anymore :(
I still get the small animation in the bottom right before it hides and then plays the bigger one. Even then it doesn't fill up the screen and has a white margin along the top and bottom. Looking through the Xcode logs, it appears the Lottie Animation is being called as soon as the app is opened before platform.ready and it's passing it with no options.
So I did some playing around and I managed to get it all working for anyone who stumbles across this comment. Firstly, the white margins was an issue with the actual animation. I changed the animation and the fullscreen without margins worked fine. Secondly, the issue with the double animation was resolved by simply removing the 'LottieAnimationLocation' tag in the capacitor.config.ts file. I now call them all programmatically from the app.component.ts on Platform ready.
Thanks...
Always love angular😍😍
I tried this with Capacitor 6 and Ionic 8, but not working on iOS (on android everything is ok - after manually deleting default splash screens).
Can you provide source code, please? :/
It's a bit tedious to set up, but it works pretty well and then it's easy to change the splash screen animation. Thanks for the explanation, Simon!
Glad I could help Javier!
Not working on capacitor with ionic 6
there is some alternative?
I need more react videos from you simon! :'>
What topic?
This one but in react, ah ah @@galaxies_dev
Edit: also `Deferred Deep Linking` with React with query parameters xD
Hello Simon, well done. How do you avoid the black screen before the animation?
Hmm might be the bg color of your app already, but actually not 100% sure! There's also a bg color you can set for Lottie as another variable: github.com/timbru31/cordova-plugin-lottie-splashscreen#preferences
@@galaxies_dev Thanks for the response.
gr8, can't wait to test it.
Give it a try Roshan!
Thanks a lot amazing Tutorial
Happy to help!
Thanks for the video, thanks for sharing my friend the best master of Ionic
You're welcome Jorge!
Default capacitor splash screen and Lottie splash screen both are coming when I clicked on application,please suggest me any solution to hide or remove default capacitor splash
If you would have watched till the end..... He is saying exactly how to do that.
did you get the solution?
Hello, I tried capacitor 5 and ionic 7 and it doesn't work. And in the ionic documentation I can't find anything related to lottie splash screen anymore, any ideas?
Great job.
Thanks Faqruddin!
thanks for video. i have done the process to get rid of capacitor logo before splash but still its there
Can you also check how can we set background on lottie as you can see there is white space on top & botttom. On cordova it is working but not in capacitor
I hope you make a tutorial for Cordova
Simón, are there any guide to do the same but in react?
Hey Simon,
In our Ionic Angular Capacitor project, I've encountered a challenge. When using the filesystem plugin, Android 11 and newer versions automatically grant storage permissions. However, I need users to explicitly accept these permissions upon the app's first launch. I've explored various sources without finding a solution.
Additionally, when building the Android version, Capacitor generates a default splash screen and icon. I would like to remove the splash screen. Could you please advise on how to achieve this?
great content as usual simon, what if i want to create another splash screen that appears before lottie animation begin? that would be awesome too
on iOS it shows small on right bottom corner. Any solution for this?
Did you ever find a solution for this?
@@BugglerTravler yes.. But I don't remember the exact solution. I think there is a fork which has fixed it
I followed all your instructions. In my case, the cordova prefences ALONE didn't show the splash screen for me. I had to add the typescript stuff. But even so, at first, the splash screen does NOT show full screen, then all of a sudden it does the whole animation again, this time full screen. What's going on, you think?
Thanks,
Tolga
I read about many issues, I should probably revisit it and see if the process is still up to date!
I have the same problem! any solution?
My config.xml does not contain cordova preferences, I have to add them manually
Hai Sir,
Screen orientation is not working in ios 16 using ionic 5 app. Can you tell me the solution
which capacitor version are you using? i'm still at 2.5* (i can't upgrade it yet) and this plugin seems that it doesn't work. I tried to install the awesome plugin as well but no luck. On android i get this error "java.lang.NullPointerException: Attempt to invoke interface method 'void org.apache.cordova.CordovaWebViewEngine.evaluateJavascript(java.lang.String, android.webkit.ValueCallback)' on a null object reference"
He's using capacitor v1
Got the same error on Capacitor 4. Did you managed to fix that error?
@@malkomich nope
I was struggling with the same issue after installing lottie-splash-screen from npmjs. Seems like author of plugin didn't update it for two years hence it doesn't work with new capacitor versions. I managed to fix this issue with simple reinstall plugin from direct github repo link, like Simon did in video. Hope it helps someone.
I'm having issues while trying to implement this on Ionic 6.
I want to clear the first black screen
how can I apply this setup in my capacitor.config.ts?
plugins:{
Splashscreen:{
launchAutoHide: true,
launchShowDuration: 0
}
},
cordova:{
preferences:{
LottieFullScreen:true,
LottieAutoHideSplashScreen: true,
LottieHideAfterAnimationEnd: true,
LottieScaleType: 'CENTER_CROP',
LottieAnimationLocation: 'public/assets/splash.json'
}
}
how would you do it with reactjs in ionic?
@galaxies_dev and anyone else - Did anyone fix the issue of the lottie splashscreen animation showing small in the bottom right hand corner? I can't seem to fix that issue.
Okay, I found the issue - just needed to comment out
Is this valid for Capacitor v4 ?
@galaxies_dev In your tutorial, you have "SplashScreen" at base level of your config JSON. In the config TS, it gives me an error when I put the "SplashScreen" at base level, with another project (or an attempt), I had "SplashScreen" in the "plugins" part of the config. Any ideas where I am supposed to put it?
Yeah I think it belongs to plugins now!
Does it works with .gif files?
Like if i want to show custom splash screen with some content loader in middle or something similar to
I think this specific approach only allows Lottie files - but you could create something just like your gif with Lottie I'm sure!
In my Android project, the "splash.json" file is in "assets/public/assets/splash.json", do I use that exact file URL? or does the "public/assets/splash.json" work for that as well.
My app just keeps crashing when I added the Lottie splash screen stuff, and I am trying to narrow it down to figure out what is making it crash. The error says something about an undefined object.
Why is your file in that sub folder? I'm not 100% sure if this could cause a problem!
@@galaxies_dev Oh, I forgot to come back and say that it works fine. The other problems I was having were making it not work, the path you said is the correct one.
@@GeniusCoding what the solution for the crashing??,, I have same problem
@@abdurrahmanrihan2348 I can't remember for sure what I did to fix it. I will look at my project again today, and see if I can remember how I fixed it.
@@GeniusCoding thanks.. I'm waiting
Hi Simon, this works with Capacitor v4?
Yes it should Ysidro!
i have capacitor.config.ts file what will I do?
I also have saame problem
That's cool - it's the same like before just with typings!
This works with Capacitor 3?
Yes it should!
hi simon, can this be used with PWA's?
No because this relies on a Cordova plugin, which you can't use inside the PWA environment.
@@galaxies_dev Thanks for your reply
Zum Glück ist Münster groß. Grüße aus Hamm 😂😂
Not far away ;)
Hi, currently I add a splash to the project used Lottie but at the time of running the application in android it shows an error:
E/AndroidRuntime: FATAL EXCEPTION: main
Process: com.tangelo.waldosPay, PID: 21069
java.lang.NullPointerException: Attempt to invoke interface method 'void org.apache.cordova.CordovaWebViewEngine.evaluateJavascript(java.lang.String, android.webkit.ValueCallback)' on a null object reference
at de.dustplanet.cordova.lottie.LottieSplashScreen$addAnimationListeners$1.onAnimationStart(LottieSplashScreen.kt:284)
at android.animation.Animator$AnimatorListener.onAnimationStart(Animator.java:539)
at com.airbnb.lottie.utils.BaseLottieAnimator.notifyStart(BaseLottieAnimator.java:57)
at com.airbnb.lottie.utils.LottieValueAnimator.playAnimation(LottieValueAnimator.java:207)
at com.airbnb.lottie.LottieDrawable.playAnimation(LottieDrawable.java:445)
at com.airbnb.lottie.LottieDrawable$2.run(LottieDrawable.java:438)
at com.airbnb.lottie.LottieDrawable.setComposition(LottieDrawable.java:229)
at com.airbnb.lottie.LottieAnimationView.setComposition(LottieAnimationView.java:550)
at de.dustplanet.cordova.lottie.LottieSplashScreen.createLottieComposition$lambda-3(LottieSplashScreen.kt:200)
at de.dustplanet.cordova.lottie.LottieSplashScreen.$r8$lambda$Z5JPNbsIT5QwjkWf2fsGcnuDdsk(Unknown Source:0)
at de.dustplanet.cordova.lottie.LottieSplashScreen$$ExternalSyntheticLambda1.onResult(Unknown Source:4)
at com.airbnb.lottie.LottieTask.notifySuccessListeners(LottieTask.java:144)
at com.airbnb.lottie.LottieTask.access$100(LottieTask.java:27)
at com.airbnb.lottie.LottieTask$1.run(LottieTask.java:131)
at android.os.Handler.handleCallback(Handler.java:938)
at android.os.Handler.dispatchMessage(Handler.java:99)
at android.os.Looper.loopOnce(Looper.java:210)
at android.os.Looper.loop(Looper.java:299)
at android.app.ActivityThread.main(ActivityThread.java:8280)
at java.lang.reflect.Method.invoke(Native Method)
at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:576)
at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:1073)
Any thoughts on this, thank you
it is frustrating
did you find a solution struggling over here
@@amerabdullai6306 same problem here... any solution ?
THIS APPEARS AFTER ADDING THE "LottieAnimationLocation": 'public/assetes/splash.json' !! Did someone find a solution
FATAL EXCEPTION: main
Process: io.fiber.al.app, PID: 23792
java.lang.NullPointerException: Attempt to invoke interface method 'void org.apache.cordova.CordovaWebViewEngine.evaluateJavascript(java.lang.String, android.webkit.ValueCallback)' on a null object reference
at de.dustplanet.cordova.lottie.LottieSplashScreen$addAnimationListeners$1.onAnimationStart(LottieSplashScreen.kt:284)
at android.animation.Animator$AnimatorListener.onAnimationStart(Animator.java:539)
at com.airbnb.lottie.utils.BaseLottieAnimator.notifyStart(BaseLottieAnimator.java:57)
at com.airbnb.lottie.utils.LottieValueAnimator.playAnimation(LottieValueAnimator.java:207)
at com.airbnb.lottie.LottieDrawable.playAnimation(LottieDrawable.java:445)
at com.airbnb.lottie.LottieDrawable$2.run(LottieDrawable.java:438)
at com.airbnb.lottie.LottieDrawable.setComposition(LottieDrawable.java:229)
at com.airbnb.lottie.LottieAnimationView.setComposition(LottieAnimationView.java:550)
at de.dustplanet.cordova.lottie.LottieSplashScreen.createLottieComposition$lambda-3(LottieSplashScreen.kt:200)
at de.dustplanet.cordova.lottie.LottieSplashScreen.$r8$lambda$Z5JPNbsIT5QwjkWf2fsGcnuDdsk(Unknown Source:0)
at de.dustplanet.cordova.lottie.LottieSplashScreen$$ExternalSyntheticLambda1.onResult(Unknown Source:4)
at com.airbnb.lottie.LottieTask.notifySuccessListeners(LottieTask.java:144)
at com.airbnb.lottie.LottieTask.access$100(LottieTask.java:27)
at com.airbnb.lottie.LottieTask$1.run(LottieTask.java:131)
at android.os.Handler.handleCallback(Handler.java:938)
at android.os.Handler.dispatchMessage(Handler.java:99)
at android.os.Looper.loopOnce(Looper.java:226)
at android.os.Looper.loop(Looper.java:313)
at android.app.ActivityThread.main(ActivityThread.java:8669)
at java.lang.reflect.Method.invoke(Native Method)
at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:571)
at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:1135)
minSdkVersion = 22
compileSdkVersion = 31
targetSdkVersion = 30
androidxActivityVersion = '1.2.0'
androidxAppCompatVersion = '1.2.0'
androidxCoordinatorLayoutVersion = '1.1.0'
androidxCoreVersion = '1.3.2'
androidxFragmentVersion = '1.3.0'
junitVersion = '4.13.1'
androidxJunitVersion = '1.1.2'
androidxEspressoCoreVersion = '3.3.0'
cordovaAndroidVersion = '10.1.2'
Found a solution I changed my LottieSplashScreen.kt (kotlin/de/dustplanet/cordova/lottie/LottieSplashScreen.kt) in Android studio from the ( github.dev/timbru31/cordova-plugin-lottie-splashscreen/blob/master/src/android/LottieSplashScreen.kt ) and it worked with just the cordova: { preferences }