Seamless Transition

[00:00:00]
>> Okay, excellent. So, now we have a splash screen, so this is a React Native specific plug problem with splash screens. So when you open your app you'll see a splash screen, and then you see a white page and then use your app. And the reason this is actually happening is because this splash screen is completely native.

[00:00:22]
So that's why we had to create an xcode. So what's the need to have does? Is it goes, let's show the splash screen while I'm getting ready. But then it loads the app with the JavaScript bundle and it goes, okay, you're ready. Let's show it. But actually the JavaScript still needs some extra time to load, which is why we get this flash screen.

[00:00:41]
So this is the time in between the native, when the native app is ready but the JavaScript isn't loaded yet. So the way to overcome this is we need to use another library to basically manually hide the splash screen when the JavaScript is finished loading. So, here if we add so here if we do yarn add React Native slash screen And this is quite an old library so it still requires a React Native link it doesn't auto link I think I need to put this through.

[00:01:25]
So cd IOS and pod install. And we'll also need to add a little bit of native code to iOS so we've been getting off easy with iOS so far but if you open app delegate dot m so it's this one's not the head of file and then we add an import at the top of the file.

[00:01:53]
And here on the application we show the splash screen. So this will be just underneath here in the application. Excellent. So basically what we're doing is were using React Native splash screen to explicitly show the splash screen and then we can use it to hide it. So in our app.tsx We will import flash screen from React Native splash screen and then it will do a react dot use effect with an empty dependencies array and we will do splash screen dot hide.

[00:02:51]
To explicitly hide it. Now put in a use effect because basically once we reach this point JavaScript has loaded because we're in JavaScript and then we hide it. Now if your app does need to do some extra things behind the scene, for example if you need to update something or if you need to maybe fetch some user data.

[00:03:14]
Or you need to set up auth from async storage or anything like that, you can delay when you hide this. So you could do something else you get fisher data like fetch user data from eating storage or something like that and then hide the splash screen so that's how you achieve that.

[00:03:31]
Alright so this is finished and let's do yarn iOS again let me just close it It's complaining because I haven't actually rebuilt the native bundle yet. All right, it's worked let's try it, let's look at this again. So now when I launch the app, you can see that it goes straight from a splash screen straight into our app and we don't get that white screen in the middle.