iOS Launch Screen in React Native

iOS Launch screen in React Native

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:

• Default@2x.png (640x960)
• Default-568h@2x.png (640x1136)
• Default-667h@2x.png (750x1334)
• Default-Portrait-736h@3x.png (1242x2208)
• Default-Landscape-736h@3x.png (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": "Default-568h@2x.png",
      "minimum-system-version": "7.0",
      "orientation": "portrait",
      "scale": "2x",
      "subtype": "retina4"
    },
    {
      "extent": "full-screen",
      "idiom": "iphone",
      "filename": "Default-667h@2x.png",
      "minimum-system-version": "8.0",
      "orientation": "portrait",
      "scale": "2x",
      "subtype": "667h"
    },
    {
      "extent": "full-screen",
      "idiom": "iphone",
      "filename": "Default-Landscape-736h@3x.png",
      "minimum-system-version": "8.0",
      "orientation": "landscape",
      "scale": "3x",
      "subtype": "736h"
    },
    {
      "extent": "full-screen",
      "idiom": "iphone",
      "filename": "Default-Portrait-736h@3x.png",
      "minimum-system-version": "8.0",
      "orientation": "portrait",
      "scale": "3x",
      "subtype": "736h"
    },
    {
      "extent": "full-screen",
      "idiom": "iphone",
      "filename": "Default@2x.png",
      "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.

How can I display a launch/splash screen in a react-native app without using a package? (iOS specifcally)

I am guessing what you are seeing is related to the white screen that many posts have mentioned. This is because the JavaScript bundle is still loading, not because you have API calls (assuming they are in ComponentDidMount, which is called after render.

Although the terminology is often interchanged, I would suggest focusing on Launch Screen as this is what Apple uses, and their guidelines specifically suggest not making it feel like a Splash screen.

https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/launch-screen/

I'd like to rephrase the question for future viewers

"How can I persist my Launch Screen while the JS bundle loads?"

Fortunately, Reacts RCTRootView has a property for this, loadingView.

Give this a shot,

  ...
  [self.window makeKeyAndVisible];

  UIStoryboard *storyboard = [UIStoryboard storyboardWithName:@"LaunchScreen" bundle:[NSBundle mainBundle]];
  UIViewController *launchScrenViewController = [storyboard instantiateViewControllerWithIdentifier:@"LaunchViewController"];

  launchScrenViewController.view.frame = self.window.bounds;
  rootView.loadingView = launchScrenViewController.view;

  return YES;

Remove Powerd by React Native launch screen

In your scenario you need to add Splash Screen for both android and ios separately.

For Android : Splash Screen Adding

Assuming that you are asking about iOS Default Splash Screen here's the solution:

You need to generate your splash screen sizes for different mobile views. Here a few examples of splash screen generator sites you can use - TiCons

Once you are done generating the images, you should open your app in Xcode. Here are the steps to follow:

1. Go to your project folder and open your iOS project using XCODE
2. Inside your project you can see file called LaunchScreen.xib , Remove this file ( This is the default splash screen of iOS )

3. Click on your project folder, then go to the TARGETS section
4. Click on the General Tab on the top-left corner of your Xcode and scroll down to App Icons and Launch Images
5. Go to Launch Images Source and click Use Asset Catalog. Click on migrate.

6. Remove the text LaunchScreen from Launch Screen File
7. Go back to your project folder and open the Images.xcassets file. You should see AppIcon and LaunchImage.
8. Next, click on the LaunchImage, you should see this:

• Finally, drag the splash screen images that has been generated initially to the Launch Image box.

How to create LaunchScreen with a fullscreen Image for IOS in React Native which is screen compatible with iPad and all iPhones

You just need to set constraints to 0 from the top, left, right and bottom. This will automatically fit to all the devices.

This is the code for my LaunchScreen.xib

<?xml version="1.0" encoding="UTF-8"?><document type="com.apple.InterfaceBuilder3.CocoaTouch.XIB" version="3.0" toolsVersion="15400" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" launchScreen="YES" useTraitCollections="YES" colorMatched="YES">    <device id="retina6_1" orientation="portrait" appearance="light"/>    <dependencies>        <deployment identifier="iOS"/>        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="15404"/>        <capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>    </dependencies>    <objects>        <placeholder placeholderIdentifier="IBFilesOwner" id="-1" userLabel="File's Owner"/>        <placeholder placeholderIdentifier="IBFirstResponder" id="-2" customClass="UIResponder"/>        <view contentMode="scaleToFill" id="iN0-l3-epB">            <rect key="frame" x="0.0" y="0.0" width="376" height="480"/>            <autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>            <subviews>                <imageView clipsSubviews="YES" userInteractionEnabled="NO" contentMode="scaleAspectFill" horizontalHuggingPriority="251" verticalHuggingPriority="251" image="Ios" translatesAutoresizingMaskIntoConstraints="NO" id="mAG-fl-dgj">                    <rect key="frame" x="0.0" y="0.0" width="376.00000000000023" height="480"/>                </imageView>            </subviews>            <color key="backgroundColor" red="1" green="1" blue="1" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>            <constraints>                <constraint firstItem="mAG-fl-dgj" firstAttribute="leading" secondItem="iN0-l3-epB" secondAttribute="leading" id="4Qq-Mv-2hX"/>                <constraint firstItem="mAG-fl-dgj" firstAttribute="top" secondItem="iN0-l3-epB" secondAttribute="top" id="5G1-V8-uL4"/>                <constraint firstAttribute="trailing" secondItem="mAG-fl-dgj" secondAttribute="trailing" id="61P-7a-W4I"/>                <constraint firstAttribute="bottom" secondItem="mAG-fl-dgj" secondAttribute="bottom" id="b3b-rs-eay"/>            </constraints>            <nil key="simulatedStatusBarMetrics"/>            <freeformSimulatedSizeMetrics key="simulatedDestinationMetrics"/>            <point key="canvasLocation" x="472.46376811594206" y="454.6875"/>        </view>    </objects>    <resources>        <image name="Ios" width="788" height="1400"/>    </resources></document>

Expo App is stuck on splash screen for IOS

After much troubleshooting, the following steps helped to resolve the issue:

1. Upgraded NodeJS.
2. Deleted node_modules folder.
3. Ran yarn install

I did all these then rebuilt the app, tested it on Testflight, and it worked as expected.

---

Related Topics