💻 My environment react-native-bootsplash version: 0.1.1</

<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/us

<a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.github

<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/us

<a class="user-mention notranslate" data-hovercard-type="us

how to edit LaunchScreen.xib to set a full screen image in iOS? about react-native-bootsplash HOT 9 CLOSED

zoontek commented on July 23, 2024

how to edit LaunchScreen.xib to set a full screen image in iOS?

from react-native-bootsplash.

Comments (9)

zoontek commented on July 23, 2024 9

@KingAmo I suggest to uses transparent PNG. If you do that, no need to update the images if you want to change the splash screen background color! :)

For the guys you want a small tuto:

Add an ImageView inside the .xib UIView using drag'n'drop

Add constraints left: 0, right: 0, top: 0, bottom: 0 (you can include notch safe insets automatically)

Enjoy image scaling setting 🤙

from react-native-bootsplash.

MoOx commented on July 23, 2024 1

React Native should have a launch screen by default. To use a full screen image, you should refer to official documentation of apple xib stuff.

But since you didn't look there first, let me share one of my splashcreen I have under the hand :)

My splash screenscreen.png, once added to the iOS project, has been added in Xcode by using the Interface Builder.
To add the image, just hit the button that look like an iPhone home button (sort of ([ ])) in the top right corner of xcode

Then choose an image.

And apply the following constraints

(You can use the buttons in the bottom right corner)

Alternatively, you can adapt this .xib (xml) file :)

<?xml version="1.0" encoding="UTF-8"?>
<document type="com.apple.InterfaceBuilder3.CocoaTouch.XIB" version="3.0" toolsVersion="14490.70" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" launchScreen="YES" useTraitCollections="YES" colorMatched="YES">
    <device id="retina6_1" orientation="portrait">
        <adaptation id="fullscreen"/>
    </device>
    <dependencies>
        <deployment identifier="iOS"/>
        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="14490.49"/>
        <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 clipsSubviews="YES" contentMode="scaleToFill" id="mQO-OZ-GhJ">
            <rect key="frame" x="0.0" y="0.0" width="414" height="896"/>
            <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMaxY="YES"/>
            <subviews>
                <imageView userInteractionEnabled="NO" contentMode="scaleToFill" horizontalHuggingPriority="251" verticalHuggingPriority="251" image="splashscreen.png" adjustsImageSizeForAccessibilityContentSizeCategory="YES" translatesAutoresizingMaskIntoConstraints="NO" id="5gn-MB-2H7">
                    <rect key="frame" x="-241" y="0.0" width="896" height="896"/>
                    <constraints>
                        <constraint firstAttribute="width" secondItem="5gn-MB-2H7" secondAttribute="height" multiplier="1:1" id="tBu-Bh-JPi"/>
                    </constraints>
                </imageView>
            </subviews>
            <color key="backgroundColor" white="1" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
            <constraints>
                <constraint firstItem="5gn-MB-2H7" firstAttribute="firstBaseline" secondItem="mQO-OZ-GhJ" secondAttribute="firstBaseline" id="9CM-2N-kwV"/>
                <constraint firstItem="5gn-MB-2H7" firstAttribute="centerY" secondItem="mQO-OZ-GhJ" secondAttribute="centerY" id="UIg-jf-rVl"/>
                <constraint firstItem="5gn-MB-2H7" firstAttribute="centerX" secondItem="mQO-OZ-GhJ" secondAttribute="centerX" id="VqM-5Z-wCO"/>
                <constraint firstAttribute="baseline" secondItem="5gn-MB-2H7" secondAttribute="baseline" id="g37-ya-jJo"/>
            </constraints>
            <point key="canvasLocation" x="137.68115942028987" y="142.63392857142856"/>
        </view>
    </objects>
    <resources>
        <image name="splashscreen.png" width="2048" height="2048"/>
    </resources>
</document>

Hope this helped (I should write a blog post about that & add link to it in the readme...)

from react-native-bootsplash.

paras-kc commented on July 23, 2024 1

how can i do it for android??

from react-native-bootsplash.

KingAmo commented on July 23, 2024

@MoOx thanks a lot~ but it seems that your code displays an icon in the center of the screen. anyway，i got it how to set a full screen image in LaunchScreen.xib file , thanks

from react-native-bootsplash.

MoOx commented on July 23, 2024

@KingAmo what was the size of your png? In my example, my image was 2048 x 2048 (so a big splash screen)

from react-native-bootsplash.

KingAmo commented on July 23, 2024

@MoOx here it is ,there are three different size which is in Images.xcassets, not a square image

from react-native-bootsplash.

MoOx commented on July 23, 2024

Oh yeah so that's not a square single PNG. Yeah so constraints must be different I guess.

from react-native-bootsplash.

gatspy commented on July 23, 2024

@zoontek your solution perfect!

from react-native-bootsplash.

Malik-Usman17 commented on July 23, 2024

@zoontek
Thanks, this really helpful

from react-native-bootsplash.

how to edit LaunchScreen.xib to set a full screen image in iOS? about react-native-bootsplash HOT 9 CLOSED

Comments (9)

Related Issues (20)

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent