Launch Screen Storyboard with centered image iOS

Question

1 - I want to use a LaunchScreen.storyboard in my app

2 - In this launch screen I need to insert a brand image in center of the screen

Could anyone help me?

Answer 1

The answer by @Jhonsore did not work for me, unfortunately.

Here's what I did to get it working:

!Note This also works for .xib files, which comes with React Native init

Adding the image file

1) Under image.xcassets, right click and choose New Image Set. Create three different sizes of your image (@1x, @2x, @3x) and add the images by dragging them into the slots for 1x, 2x, 3x. For 3x I suggest a size of more than 1200 px.

2) Name the new image set something, for intance: splash

Creating the launch screen

1) Right-click your project, click New File..., and add a Launch Screen.

2) Select your project and under General->App icons and launch images->Launch Screen File select your newly created Launch Screen

3) Open the launch screen

4) Select View Controller Scene->View Controller

5) In the right panel choose Simulated Metrics->Size and change it to Page Sheet

6) In the left panel delete the two text inputs (copyright and project name)

7) Add an Image View by clicking the button shown in the screenshot below and dragging it to the center of the view

8) In the right panel with Image View selected choose View->Content Mode->Aspect Fit. Also add your image by choosing **Image View->Image

10) Go to Size Inspector (ruler icon, see screenshot) and choose a width and a height that looks good (this will scale to other screen sizes).

11) Drag your image into the center of the screen until you see both a horizontal and vertical blue line

12) Lastly, under Autoresizing change the window with the arrows, so it looks like in the screenshot above. All outer arrows should be deselected and all inner arrows selected.

Result

Troubleshooting: If your images are not showing on the simulator, try restarting it or try select another device.

Bus image Credits: Eliott Van Buggenhout