In a React native application, We are trying to load Lottie animation as a splash screen.
In android, I'm able to achieve it by creating a native view for the android Lottie library. I want to play lottie animation in splash screen+ React native
I need the same in iOS, currently, we have an image splash screen, which we have implemented images.xcassets and LaunchScreen.storyboard (refer to screenshots)
Is there any possibility to use Lottie animations instead of these images here?
There is a workaround where I can add the Lottie animation in the app.js before starting with app content. In this case, first, the above-mentioned splash screen comes and the animation. If I remove this splash screen here, then a white screen and the animation will come.
How to use the Lottie animation instead of splash screen image on iOS?
At first, I have searched many articles about changing ios's LaunchScreen.storyboard with lottie animation. However, Xcode enforces that LaunchScreen.storyboard should be static screen. So, I inserted animation code after static launch screen loading. Maybe, launch screen is essential, because it is loading screen for initial loading resource in ios. If you remove the launch screen, then ios app shows black or white screen at first loading. Remove launch screen, Xcode 7
If you looking for animation launch screen using lottie in react native, i would suggest looking into this package.
https://www.npmjs.com/package/react-native-lottie-splash-screen
It implements animation splash screen using airbnb lottie files. Also, I apply this for multiple react native projects and it worked well. Have a nice day!
In iOS, the splash screen is a view without any associated logic.
What you could do to give the impression of the animation is to have it look like the first frame of your Lottie file.
Then, in the didFinishLaunchingWithOptions, you can start your Lottie animation.
In a RN application, the splash screen should be a quick flash and most of the startup time would be taken up by the RN setup. So, the animation should show up relatively smoothly even with this approch.
You can take a look at this repo to see how they've implemented it.
Related
I am looking for a way to create an animated Splash Screen in React Native project using Expo.
I found Lottie as a solution, but the only info I can get about it is about the animations within the app itself - is there ANY possible solution that would allow a creation of an animated splash screen with Expo? For now, I have only a static png file.
There is an example provided in the Expo docs here:
https://github.com/expo/examples/tree/master/with-splash-screen
Although it's technically not an animated splash screen, but a way to automatically hide the static splash screen (which would be the first frame of your animation) and then immediately switch to playing the animation once the app is loaded. I'm doing it this way and it works well enough.
This NPM module seems to work in a similar fashion so maybe you could use that
https://www.npmjs.com/package/react-native-animated-splash-screen
But it's still not a native animated splash screen which I don't think is possible using even vanilla React Native let alone Expo.
Here I am using this module for custom animated splash screen using expo react native project. I hope it will work for you too.
Here is the module link: click here
Let me know if you need any other help.
I was able to add animated splash screen in android using this solution https://stackoverflow.com/a/61182276/12132771 but for iOS I am not sure how to get same results.
Currently, if I add a .gif to app.json, it does not work
"splash": {
"image": "./assets/splash.gif"
}
Edit: It looks like, they are currently working on it, here: (https://expo.canny.io/feature-requests/p/improved-splash-screen-api).
I see you are trying to use gif for the splash screen. Well I have a bad news. Splash screen API of native platform (iOS & Android) doesn't support gif, infact they only support 'png' images.
But, the good news is there is a work around.
We had a similar requirement in our project so we created our custom AppLoading (Provided by Expo) component which has a face of our gif image and in the background it works similar to AppLoading i.e. fetch data and caching. We used a static png image for default splash screen and the transition between static image to gif worked for us.
This is the simplest way but has a drawback that between the static splash screen and animated there is white screen visible for a short duration of time.
It happens due to the fact that your javascript bundle is being downloaded in the background and until and unless your entire JS doesn't load you will see a white screen.
To overcome this you need to detach your expo app as we will be doing some native changes.
Install and follow the instruction in this module.
Benefit of this module is that it exposes the 'hide' function in the javascript.
Basic flow of App.
App loading start => Static splash screen visible
Screen is visible till our javascript bundle is not loaded
Bundle loads => call hide function exposed by modules on ComponentDidMount of SplashScreen component
Static Splash screen hides => Animated splash screen is visible with background task working (caching and API call)
Further App Flow
If you're talking about the launch screen and you're not using create-react-native-app you'll have to edit the native launch screen per platform to use your animation.
If you're using create-react-native-app with Expo then you could look at the Splash Screen API.
Expo since version 29 supports animated SVG and GIF. It also provides an API to generate your own splash screens without AppLoading.
Please check: https://docs.expo.io/versions/v29.0.0/sdk/splash-screen#example-without-apploading
Expo team has completed: "Improved Splash Screen API" ticket. So now, you can do it as explained in their docs: https://docs.expo.io/versions/v29.0.0/sdk/splash-screen/!
I am trying to add an animated SVG as an application loader in a React native app. Their docs don't offer any solution on how I could approach this.
Back when I was working on a react native project, we had used a simple method to achieve splash screen effect.
We had called setTimeout() in componentDidMount() to navigate to the home-screen after 2 seconds. Also, we used to check whether the user is logged-in. If so, we'd navigate straight to the home screen skipping the annoying splash screen altogether.
Is there any way to disable the default splash screen, making our app load main page at first?
There is always a loading portion. During this time a splash WILL be shown. You can customize the splash screen though.
On Android - https://stackoverflow.com/a/44380138/1828637
On iOS - iOS Launch screen in React Native