116

I'm working with a React Native app and I'm trying to set a customize launch screen but I'm not able to.

React Native creates a LaunchScreen.xib by default, so I've created a LaunchImage inside Images.xcassets:

LaunchImage in Images.xcassets

I've also read that I've to modify the "Launch Screen File" under "App Icons and Launch Images" in my options:

Launch Images options

Once I've done that, my launch screen became totally black and when the app is loaded, there are both top and bottom black frames:

enter image description here

What do I have to do to set my launch screen in my React Native project?

8
  • Why is the Launch Screen File empty in your second screenshot?
    – Stefan
    Dec 1, 2015 at 21:29
  • 1
    Because I've read that I have to leave it empty if I want the app uses the images in assets directory
    – JV Lobo
    Dec 1, 2015 at 21:41
  • OK, you are right. To get a better understanding: Is the text from the black frame at the top from you or from react?
    – Stefan
    Dec 1, 2015 at 21:46
  • That is from React. At first a black screen is shown (which it'd be the launch screen), after that the text that I show in the screenshot, and after the text my app appears. This text also appeared before, when my app had the default React Native launch screen.
    – JV Lobo
    Dec 1, 2015 at 21:51
  • 1
    uninstall from the device, clean the project and try to install again
    – LS_
    Dec 2, 2015 at 10:00

13 Answers 13

125

I was be able to solve the issue, with the help of this thread: Launch Image not showing up in iOS application (using Images.xcassets)

So I'm gonna explain it deeply in case it can help someone else.

First, you need to create certain images. What I used for that was this template and this webpage with an automatic generator: TiCons

enter image description here

When I downloaded my images, I took the ones inside assets/iphone folder, I only took those ones:

Also you need this Contents.json file in the same folder, I got it from a friend:

{
  "images": [
    {
      "extent": "full-screen",
      "idiom": "iphone",
      "filename": "[email protected]",
      "minimum-system-version": "7.0",
      "orientation": "portrait",
      "scale": "2x",
      "subtype": "retina4"
    },
    {
      "extent": "full-screen",
      "idiom": "iphone",
      "filename": "[email protected]",
      "minimum-system-version": "8.0",
      "orientation": "portrait",
      "scale": "2x",
      "subtype": "667h"
    },
    {
      "extent": "full-screen",
      "idiom": "iphone",
      "filename": "[email protected]",
      "minimum-system-version": "8.0",
      "orientation": "landscape",
      "scale": "3x",
      "subtype": "736h"
    },
    {
      "extent": "full-screen",
      "idiom": "iphone",
      "filename": "[email protected]",
      "minimum-system-version": "8.0",
      "orientation": "portrait",
      "scale": "3x",
      "subtype": "736h"
    },
    {
      "extent": "full-screen",
      "idiom": "iphone",
      "filename": "[email protected]",
      "minimum-system-version": "7.0",
      "orientation": "portrait",
      "scale": "2x"
    }
  ],
  "info": {
    "version": 1,
    "author": "xcode"
  }
}

So, at this point I created a folder called LaunchImage.launchimage inside Images.xcassets folder in my React Native project and save the images and the Contents.json file inside it:

enter image description here

Second, you have to open your project in Xcode and in "General" settings, below "App icons and Launch Images" we have to leave the option "Launch Screen File" empty (also we can delete the LaunchScreen.xib file inside our project), and click in "Use Asset Catalog" after that. A modal will open, we choose to Migrate the catalog Images

enter image description here

Now, in the "Launch Images Source" selector, we can choose the folder we created before, LaunchImage (the one with our images):

enter image description here

We pick this instead of Brand Assets and we can delete Brand Assets folder.

At this point, we'll be able to run our React Native application with our custom launch images:

enter image description here

I know it seems a little bit complex for an supposedly easy task, but after reading a lot about it this was the only way I could get my splash images working, so I wanted to share with the community.

21
  • Do the images have to be .png I am trying to use .jpg
    – Adam Katz
    Dec 17, 2015 at 12:04
  • I've not tried with .jpg images. Maybe it only works with .png
    – JV Lobo
    Dec 17, 2015 at 12:05
  • thanks the error I am getting in xcode is file does not have valid file extension so it sounds likely that is the problem, although i dont see why jpg wouldnt work
    – Adam Katz
    Dec 17, 2015 at 12:07
  • 1
    Do you have to have all 5 options, my app isnt intended to be used landscape so i left it out but it isnt working so im wondering if that is it
    – Adam Katz
    Dec 17, 2015 at 12:57
  • 1
    I still had issue after this, and had to delete the app from the simulator to get the original launch screen to stop showing. Jan 15, 2016 at 16:50
17

Make sure to delete the app from the simulator. Then do a clean on your project.

1
  • deleting the app from simulator works for me. thanks
    – Andy
    Mar 21, 2018 at 2:58
10

Update

generator-rn-toolbox is deprecated. Use react-native-make instead.

old Answer

I recommend generator-rn-toolbox for applying launch screen or main icon using on react-native. It is more simple and easy to use through cli as react-native.

  • Do not need to open XCode.
  • Do not need to make a lot of image files for various resolutions.
  • Anytime change launch screen using one line commend.

Requirements

  • node >= 6
  • One square image or psd file with a size of more than 2208x2208 px resolution for a launch screen(splash screen)
  • Positive mind ;)

Install

  1. Install generator-rn-toolbox and yo
  2. npm install -g yo generator-rn-toolbox
  3. Install imagemagick brew install imagemagick
  4. Apply splash screen on iOS

    yo rn-toolbox:assets --splash YOURIMAGE.png --ios

    or Android

    yo rn-toolbox:assets --splash YOURIMAGE.png --android

That's all. :)

Source

6
  • can't believe i have to ask this ... from where do you run the command?
    – AlxVallejo
    Jul 1, 2017 at 2:19
  • @AlxVallejo Your top project directory. Jul 1, 2017 at 9:54
  • "✖ splash could not be found" I don't think this works
    – AlxVallejo
    Jul 1, 2017 at 16:11
  • @AlxVallejo Was there the your image file? I am using it usefully. Jul 6, 2017 at 2:43
  • 1
    generator-rn-toolbox actuality does all that the accepted answer does.
    – Felix
    Dec 9, 2017 at 7:25
9

I have been looking at these answers a lot in SO containing solutions for how to create a new launch screen. I mean let's think about it for a minute.

When we create a new react-native project what do we see for the launch screen?

> Facebook's default launch screen

So that got me thinking, How did they do it?

They created a LaunchScreen.xib

I think there must be a reason for this. So I went into theLaunchScreen.xib and made a change to the default text "React Native..." or what ever it said. I ran the app one more time to see that the launch screen reflected my edits.

Solution 1 Edit the existing LaunchScreen.xib

Solution 2 Create my own

So I did, it took me longer to type up this answer than learning how to create my own. Both of these solutions are compatible with all the devices.

Step 1:

Delete LaunchScreen.xib

step 2:

click on images.xcassets right click in the white space click **import**then select the image you want to add. enter image description here

step 3:

Right click on your project's root folder and add a new file of type Launch Screen and name it what ever you want.

enter image description here

step 4

Click on your project in the left nav, go to Settings > General and under App Icons and Launch Images. Make sure Launch Image Source is blank and the Launch Screen File is the same name as your newly created launch screen.

enter image description here

step 5

Click on your brand new file you created in step 2, drag an Image View or edit how ever it pleases you.

enter image description here

Then that's it, you're done. You don't even need to clean the solution, just rebuild.

8
  • 1
    @Noitidart Glad I could be of some help.
    – Train
    Jun 6, 2017 at 17:54
  • 1
    What I did was not even delete the LaunchScreen.xib, I just deleted the text nodes, then I dragged in an image view, imported the image like you described, then set the image in the UIImageView :) Is there any way to make it responsive? Like on tablet it should be 3x, and on phone it should be 2x? Also my UIImageView is not centered on all devices. :( Here is screenshot of what i have - i.imgur.com/o5SMgHN.png
    – Noitidart
    Jun 10, 2017 at 12:48
  • 1
    @Noitidart Good find on those. I'm sure they would be useful for someone looking at this answer.
    – Train
    Jun 11, 2017 at 0:31
  • 1
    Thanks brother! i think the way you discovered is the real way to do it. Creating images with a set backgound color that are the size of each device in each landscape/portrait is not the way to go about it (how the most upvoted answer here does it). Now i can EASILY adjust the color of the background. Scaling etc can be acheived perfectly. With the image, everything is on the image.
    – Noitidart
    Jun 11, 2017 at 8:29
  • 1
    thus the process is same as if your were developing a swift native app. cool
    – jasan
    Jun 12, 2017 at 0:07
7

Just went through this and works a treat. The only road block I discovered was not clearing the simulator content. If you find that your new launch screen isn't working you need to open the simulation and go to the following:

Simulator > Reset content and settings

There must be some hardcore caching going on within that simulator but once that was done - rerun and you'll see the app. Make sure you do this for both xcode simulators and react-native simulators!

0
7

Make sure the 'Launch Screen File' select is empty: enter image description here

0
1

Follow this link:

If you want to add a splash screen to my React Native application.Follow the process, the result will be all yours.

STEP:1 First,I created a splashImageResource folder and added the launchScreen.xib file with the splash image.

STEP:2 change the code as written inside the subviews tag. with this code<subviews> <imageView userInteractionEnabled="NO" contentMode="scaleAspectFill" image="splash.png" translatesAutoresizingMaskIntoConstraints="NO" id="ZkI-RL-69Z"> </imageView> </subviews>

STEP:3 You should open your app in Xcode. Here are the steps to follow:

a) Go to your project folder

b) Open the ios folder

c) Go to the file that has .xcodeproj as the extension, in my case it's splasScreenTutorial.xcodeproj

d) Open this file in your Xcode.

e) Delete the launchScreen.xib file.

f) Click on the splashScreenTutorial folder, then go to the TARGETS section

g) Click on the General Tab on the top-left corner of your Xcode and scroll down to App Icons and Launch Images

h) Go to Launch Images Source and click Use Asset Catalog. Click on migrate.

i) Remove the text LaunchScreen from Launch Screen File.

j) Go back to your project folder and open the Images.xcassets file. You should see AppIcon and LaunchImage.

k) Next, click on the LaunchImage, Finally, drag the splash screen images that you have of different sizes to the Launch Image box.

Drag the images like this.

Test Splash Screen a) To see the changes, you need to delete the app from your simulator if you have run the app initially.

b) To delete the app, click on the Hardware menu on your Simulator bar and go to Home.

c) Tap and hold down the particular app icon you want to delete, and click on the X sign on the icon.

d) Run your app again using react-native run-ios

You can see your Splash Screen

1

If you create a Launch screen with the help of React then you should add the same thing in the LaunchScreen.xib file in iOS Xcode for that you can take a Screenshot and add it as an Image in the Images.xcassets.

Open LaunchScreen then add UIImageView in the View from Object Library from Right Panel in Xcode.

enter image description here

Add Trailing, Leading, Bottom and Top Constraints to the View. As Shown Below -

enter image description here

Don't Forget to change the UIImageView ContentMode as AspectFit so that it will look same when the app runs.

After That you need to add code in AppDelegate so that you don't get a white screen. The code is -

 UIView* launchScreenView = [[[NSBundle mainBundle] loadNibNamed:@"LaunchScreen" owner:self options:nil] objectAtIndex:0];
 launchScreenView.frame = self.window.bounds;
 rootView.loadingView = launchScreenView;

You can Refer - https://facebook.github.io/react-native/docs/running-on-device.html#pro-tip

1

For me on XCode 10.1 and react-native 59.2 I had to go through the additional steps after already adding the images, storyboard and 1 universal image.

  • Right click on the image, click Show in Finder, then edit your Contents.json file
  • Add the image to the 2x and 3x sections
  • Go to the Launch Screen storyboard, with the "ruler" menu
  • Make sure only the inside red arrows are on, not the outside red arrows
  • Click "Safe Area Relative Margins"

enter image description here

Image should now be centered on all size iPhones (tested on Portrait).

0

If you want to use the existing Launch Screen .xib file React Native initially has set up, but with your own logo and background color (and without any of the React Native default text), you can follow the instructions here: https://medium.com/@kelleyannerose/react-native-ios-splash-screen-in-xcode-bd53b84430ec.

0

Just for those still having trouble, there is one more step missing from the accepted answer before making the iOS Launch screen work.

Open Info.plist in the project folder and delete "Main nib file base name" key. Then, rebuild and hopefully the issue is gone.

0

Upon following the above solutions my app was getting stuck on the Splash Screen so I did the following 7 steps to add the custom splash screen on ios.

  1. Open the Xcode and locate the LaunchScreen.xib file in your project (Notice that this is the screen which is shown by default in ios)
  2. To remove/edit the text on the screen click on it and do the necessary changes as you like.
  3. To change the background color locate the following icons on the right side bar and click the little icon button at the very top, fourth from the left (when you hover, it’ll say “Show the Attributes Inspector”)

enter image description here

  1. Now that you have know how to change the background color, lets add image to the Splash screen to do that click on the following button and select the Image view from the list and drag and place it where ever you want it on the splash screen.

enter image description here

  1. Now we have to add the image to the Images.xcassets so that we can reference it in the LaunchScreen.xib to do that goto Images.xcassets. click on + button followed by import and then add the image you want to show in the splash screen. Beneath AppIcon you’ll see your image file name. This is the name we’ll use to reference in our LaunchScreen.xib

  2. Now we have to reference the image we added in the LaunchScreen.xib file so navigate back to LaunchScreen.xib and click the image view that we added earlier and on the right hand corner you will see bunch of options. click on first one that says image and select the image which you imported in step 5

enter image description here

  1. clean the project and run react-native run-ios and you should see the changes.
-5

You should set the launch screen image source as your image set. Afterwards delete the LauncScreen.xib file. Afterwards do a global search in your project and remove all references to LaunchScreen.xib (look in your entire project. I user sublime text editor so it's cmd+shift+f) and it should work.

1
  • Thanks for your answer. I don't understand well because I think you did a typo. I've done a global search in my project to remove references to LaunchScreen.xib, pero there are no references to the file: puu.sh/lGu7z/8fd88a886e.png Thanks.
    – JV Lobo
    Dec 2, 2015 at 10:14

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.