Skip to content

Instantly share code, notes, and snippets.

@grundmanise
Last active November 1, 2018 13:30
Show Gist options
  • Save grundmanise/a712b6c57472d0f70af1d766ba0201f2 to your computer and use it in GitHub Desktop.
Save grundmanise/a712b6c57472d0f70af1d766ba0201f2 to your computer and use it in GitHub Desktop.
React Native + React Native Navigation: launch images setup [iOS] (iPhone)

Personal note on how to setup launch images in RN when using RNN [iOS] (iPhone).

Preparation

Launch image sizes:

portrait

  1. Retina HD 5.5" : 1242 x 2208 px
  2. Retina HD 4.7" : 750 x 1334 px
  3. 2x : 640 x 960 px
  4. Retina 4 : 640 x 1136 px

format: .png

Setting up

  1. Navigate to Images.xcassets
  2. Press + in the bottom left corner
  3. In the dropdown menu select App Icons & Launch Images -> New iOS Launch Image
  4. This will create a new Launch Image Set
  5. Select it and in the Utilites view navigate to the Attributes Inspector
  6. In the Attributes Inspector for the iOS 7.0 and Later & iOS 8.0 and Later select desired modes Portarit/Landscape that are supported by the app. You can uncheck all boxes in iOS 6.0 and Prior
  7. Drag and drop your .png images to the according boxes.
  8. Remove LaunchScreen.xib (auto-generated file from react-native init)
  9. Select your project and in the General tab set Launch Images Soruce to the LaunchImage
  10. Shift + Cmd + K - to clean the project
  11. Profit $$$

To make it more beautifull

  1. Check Hide status bar in Xcode
  2. Set screenBackgroundColor in the navigatorStyle object to match your screen bg
  3. Set animationType in the startSingleScreenApp or startTabBasedApp
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment