iOS Launch screen in React Native

Question

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:

I've also read that I've to modify the "Launch Screen File" under "App Icons and Launch Images" in my 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:

So I don't know what I have to do to set my launch screen in my React Native project.

I'll be grateful if someone can help me out with those troubles.

Thanks in advance.

Solution 1

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

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

• [email protected] (640x960)
• [email protected] (640x1136)
• [email protected] (750x1334)
• [email protected] (1242x2208)
• [email protected] (2208x1242)

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:

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

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

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:

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.

Solution 2

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

Solution 3

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

Solution 4

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.

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.

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.

step 5

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

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

Solution 5

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!

View more solutions

Comments

[Stefan]

Why is the Launch Screen File empty in your second screenshot?

[JV Lobo]

Because I've read that I have to leave it empty if I want the app uses the images in assets directory

[Stefan]

OK, you are right. To get a better understanding: Is the text from the black frame at the top from you or from react?

[JV Lobo]

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.

[LS_]

uninstall from the device, clean the project and try to install again

[LS_]

@Stark wait, you should also click on "Use asset Catalog" and select your LaunchImage

[JV Lobo]

Thanks for your response. If I click on "Use Asset catalog" I can't select "LaunchImage" -> puu.sh/lGuc2/8e21ba0967.png I've also tried to uninstall from the device, clean and install again but it didn't work either.

[Vivek]

How can achieve creating splash screen for the project created with "create-react-native-app" ?

[JV Lobo]

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.

[Adam Katz]

Do the images have to be .png I am trying to use .jpg

[JV Lobo]

I've not tried with .jpg images. Maybe it only works with .png

[Adam Katz]

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]

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

[JV Lobo]

I'm not sure. You should add all of them and see if it works! :)

[Dan G Nelson]

I still had issue after this, and had to delete the app from the simulator to get the original launch screen to stop showing.

[Chipe]

I get an issue when deleting LaunchScreen.xib from the project. When building out the project I get "Interface Builder could not open the document LaunchScreen.xib" because it does not exist. I have followed what you said above. My "Launch Images Source" has my folder I created "LaunchImage" and below the "Launch Screen File" is empty with no text in it at all. What do I need to do to get rid of this error?

[JV Lobo]

Hi @Chipe Did you unset "LaunchScreen.xib" on the selector "Launch Screen File" in "App Icons and Launch Images" ??? In your project settings.

[Chipe]

@JVLobo turns out I removed the "LaunchScreen.xib" from the project folder structure, but not from xcode itself. Once I took it out of xcode it worked just fine!

[Pretty Good Pancake]

I've followed every step of your detailed tutorial, but I end up having a black (then white, then my app) screen instead of my images. Did you have this kind of issues? Cheers!

[JV Lobo]

Are you still having troubles?? Did you try to do the process again in case you forget something?

[IntoTheDeep]

@JVLobo Hi, is it possible to hide Status bar on splash image

[JV Lobo]

I'm not 100% sure, but I don't think you can do it @TeodorKolev

[jakeforaker]

Great instructions, worked for me! Keep in mind you should Delete the app from the simulator, quit the packager (hard quit out of the terminal), Product > Clean in xCode, then Run and let the packager do its thing as if you're running it for the first time. That was my key to success.

[SVN]

@PrettyGoodPancake hey, i had the same issue, make sure that the launch screen file field is empty, even if you delete the launchscreen.xib file, this filed remains filled in.

[iou90]

@AdamKatz Yes, you have to have all 5 options.

[Dave Wong]

@JVLobo I followed your step and still see the powered by RN screen, do you have idea?

[Trip]

@JVLobo Thanks for the thorough post. As it turns out for me, none of these options work. I've tried going so far as moving my entire app to new folders, deleting, recreating the AppIcon, etc. What's weird is that.. it was working. And then it suddenly wasn't a few weeks ago. No idea why it changed. No idea how to get it back.

[Train]

@Noitidart Glad I could be of some help.

[Noitidart]

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]

Oh sweet, never mind, its just using xcode normally, setting properties etc these two links really helped me out - simblestudios.com/blog/development/… && developer.apple.com/library/content/documentation/… and

[Train]

@Noitidart Good find on those. I'm sure they would be useful for someone looking at this answer.

[Noitidart]

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.

[jasan]

thus the process is same as if your were developing a swift native app. cool

[LYu]

For the content.json part, you can go to Images.xassets right click the blank area and select New App Icons & Launch Images, it will generate the json file for you.

[AlxVallejo]

can't believe i have to ask this ... from where do you run the command?

[Jeff Gu Kang]

@AlxVallejo Your top project directory.

[AlxVallejo]

"✖ splash could not be found" I don't think this works

[Jeff Gu Kang]

@AlxVallejo Was there the your image file? I am using it usefully.

[Vivek]

How can achieve creating splash screen for the project created with "create-react-native-app" ?

[Yasir]

@OrthoHomeDefense Hi, I am trying to have multiple images as splashscreen. one that fills the page and the other one is logo in the center. I am trying to use this: github.com/crazycodeboy/react-native-splash-screen. its mentioned there to use either LaunchImage or launchscreen.xib I tried using storyboard but then im not sure how to dismiss it (I can do SplashScreen.hide() if Im using LaunchImage) but not sure how to do this in launchscreen.xib

[Train]

@Yasir I am not sure I understood your question correctly but in the launchscreen.xib you can configure the properties of a UIimageView to take up the entire screen for the first image. Then stack another UIimageView on top of that one. If that doesn't answer your question can you please post a new SO question and I can try to answer there? Thanks.

[Felix]

generator-rn-toolbox actuality does all that the accepted answer does.

[user8951490]

I followed this to the T, but for some reason, although it worked on my simulator, it did not work when I launched the app on my device.

[Andy]

deleting the app from simulator works for me. thanks

[Tendai]

This is now deprecated. Use @bam.tech/react-native-make