Join egghead, unlock knowledge.

Want more egghead?

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock This Lesson
1×
Become a member
to unlock all features

Level Up!

Access all courses & lessons on egghead today and lock-in your price for life.

Autoplay

    Change the Splash Screen for iOS Apps built with React Native

    react-nativeReact Native
    javascriptJavaScript
    iosiOS

    We’ll replace the default React Native app splash screen with a custom splash screen image on iOS. We'll also use the react-native-splash-screen module, which prevents a white screen flash when the splash screen first loads.

    Code

    Code

    Become a Member to view code

    You must be a Pro Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    orLog In
    Discuss

    Discuss

    Transcript

    Transcript

    Instructor: 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.

    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.

    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.

    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.

    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.

    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.

    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.

    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.

    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.

    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.

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