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

Question

I need a full screen image on my splash screen for IOS App build using react native. I have reffered different post but most of them explains spash screen with a logo at the center and none of them give a proper explanation of full screen splah image which fits all the device resolutions including iPad.

I have created a LaunchScreen.xib file with a View and Imageview as given below but it breaks in iPads, But it fits in iPhones to some extend (Though it has some black shade for high resolution iphones also)

<?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="retina5_5" 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="scaleAspectFit" id="iN0-l3-epB">
            <rect key="frame" x="0.0" y="0.0" width="414" height="716"/>
            <autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
            <subviews>
                <imageView clipsSubviews="YES" userInteractionEnabled="NO" contentMode="scaleAspectFill" horizontalHuggingPriority="251" verticalHuggingPriority="251" image="Default" id="IGQ-OV-TUd">
                    <rect key="frame" x="0.0" y="-10" width="414" height="736"/>
                    <autoresizingMask key="autoresizingMask" flexibleMinX="YES" widthSizable="YES" flexibleMaxX="YES" flexibleMinY="YES" flexibleMaxY="YES"/>
                </imageView>
            </subviews>
            <color key="backgroundColor" red="0.30980392156862746" green="0.42745098039215684" blue="0.47843137254901957" alpha="1" colorSpace="calibratedRGB"/>
            <nil key="simulatedStatusBarMetrics"/>
            <modalPageSheetSimulatedSizeMetrics key="simulatedDestinationMetrics"/>
            <point key="canvasLocation" x="-20.289855072463769" y="107.60869565217392"/>
        </view>
    </objects>
    <resources>
        <image name="Default" width="682.66668701171875" height="910.66668701171875"/>
    </resources>
</document>

I am attaching the settings screenshots of my View and ImageView below

I have created 3 dummy images for three different scales whose Content.json is given below

{
  "images" : [
    {
      "idiom" : "universal",
      "filename" : "Dummy.png",
      "scale" : "1x"
    },
    {
      "idiom" : "universal",
      "filename" : "[email protected]",
      "scale" : "2x"
    },
    {
      "idiom" : "universal",
      "filename" : "[email protected]",
      "scale" : "3x"
    }
  ],
  "info" : {
    "version" : 1,
    "author" : "xcode"
  }
}

All the above changes did'nt give a proper solution for my requirement. I am wondering if I need to create full screen images for all possible devices and include them in the Content.json file. But what width and height should I give in the settings(Scrrenshots)

Sombody please held me to provide the correct solution for my requirement.

Vineland

Answer 1

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>

If you want to add a custom Splash Screen you can create manually in your react application by creating a separate component.

Exhaustion

Your suggestion works for me. Now the splash screen is loading as full screen. Only one issue left ie, My image get cropped off, How to prevent this. Do I need to create multple images for different screen and include them in Content.json? – Vineland

:) Happy to help. Yes, you can add an image with 1x, 2x & 3x Or else you can try to change the content mode of the Image. It will show the preview on LauncScreen.xib itself. Let me know if you need any help. @Vineland – Exhaustion

I have added App Icons & Launch Images > New Launch Image But Image not showing in LauncScreen.xib . ImageView Image selection dropdown, It lists only image assets with 1x, 2x & 3x . – Vineland

Where exactly you have added Images? – Exhaustion

I have solved the issue by adding screens in Contents.json , Thanks :) – Vineland

I've set the constraints to 0 after which the image does stretch but the boundary header and footer still remain white. How can I. make the image fill the top and bottom too? – Kirst

Answer 2

Can you try this tool generator-rn-toolbox

Am

Does it cut the image while resizing? – Vineland

Answer 3

need to set image height and width for IOS 3x

<?xml version="1.0" encoding="UTF-8"?>
<document>
...
    <resources>
        <image name="SplashIcon" width="310.5" height="609"/>
        <systemColor name="systemBackgroundColor">
            <color white="1" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
        </systemColor>
    </resources>
</document>

to

<image name="SplashIcon" width="1242" height="2436"/>

Litt