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.

Answer 1

Make sure the 'Launch Screen File' select is empty:

Answer 2

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

Answer 3

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.

Answer 4

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!

Answer 5

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.

Answer 6

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.