Home » Ios » iOS Launch screen in React Native

iOS Launch screen in React Native

Posted by: admin November 30, 2017 Leave a comment

Questions:

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

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.

Answers:

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.

Questions:
Answers:

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

Questions:
Answers:

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.

Questions:
Answers:

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!

Questions:
Answers:

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 2208×2208 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 --ios

That’s all. 🙂

Source

Questions:
Answers:

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

Questions:
Answers:

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.

Questions:
Answers:

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.