Change the Splash Screen for iOS Apps built with React Native

Instructor: [00:00] Install react-native-splash-screen with npm install --save react-native-splash-screen. Then run react-native link. You can update your splash screen without using this module, but it removes a flash of a white screen between your splash screen and the React Native app, which can be distracting.

[00:22] Let's start in app.js. Import the splash screen module. We'll export a new component that just renders the base model nav. The sole purpose of this component is to hide the splash screen once the app is done launching.

[00:36] Add a componentDidMount lifecycle method. In that, we'll tell the splash screen to hide. Then open the project in finder. Go to the iOS directory. Then open the Xcode project. In AppDelegate.m, we have to import the splash screen library and tell it to show the splash screen when we launch.

[01:08] The default launch screen is this launch screen interface builder file. We could change this file in order to change the launch screen, but sometimes a designer gives us the exact image that we have to use. That's what we'll do here as well.

[01:22] Let's delete this launch screen file and click on the images xcassets folder. Right-click under app icon. Under app icon and launch images, make a new iOS launch image.

[01:42] There are multiple launch images that are required, one for each device screen size that's available. The relevant launch sizes are on the Apple Developer website.

[01:54] I've made a launch screen with the pizza icon from Ionicons for each size. Once the launch images are made, you can drag them from Finder directly onto the correct launch icon spot in Xcode.

[02:11] Now, select the project. In the app target, under the general tab, scroll down to app icons and launch images. Then tell Xcode to migrate to the asset catalog.

[02:31] If this doesn't refresh correctly right away, you may have to navigate away from the screen and then go back to it. Then make sure launch image is selected and that there is nothing in the launch screen file selection.

[02:46] Back in the simulator, you'll have to actually delete the app off the simulator and rebuild it before that change will take place. I'll press command-shift-H to simulate the home button, long-click on the restaurant review app, and press the X to delete it. Finally, press the home button again.

[03:04] Back in a terminal, run react-native run-ios, which will rebuild, reinstall, and relaunch the app. There's the new launch screen.