Splash Screen Documentation [WIP]

playground/ios/playground/Images.xcassets/Contents.json

@@ -1,6 +1,6 @@
 {
   "info" : {
-    "version" : 1,
-    "author" : "xcode"
+    "author" : "xcode",
+    "version" : 1
   }
-}
+}

playground/ios/playground/Images.xcassets/SplashIcon.imageset/Contents.json

@@ -0,0 +1,53 @@
+{
+  "images" : [
+    {
+      "filename" : "logo@1x.jpg",
+      "idiom" : "universal",
+      "scale" : "1x"
+    },
+    {
+      "appearances" : [
+        {
+          "appearance" : "contrast",
+          "value" : "high"
+        }
+      ],
+      "idiom" : "universal",
+      "scale" : "1x"
+    },
+    {
+      "filename" : "logo@2x.jpg",
+      "idiom" : "universal",
+      "scale" : "2x"
+    },
+    {
+      "appearances" : [
+        {
+          "appearance" : "contrast",
+          "value" : "high"
+        }
+      ],
+      "idiom" : "universal",
+      "scale" : "2x"
+    },
+    {
+      "filename" : "logo@3x.jpg",
+      "idiom" : "universal",
+      "scale" : "3x"
+    },
+    {
+      "appearances" : [
+        {
+          "appearance" : "contrast",
+          "value" : "high"
+        }
+      ],
+      "idiom" : "universal",
+      "scale" : "3x"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}

playground/ios/playground/LaunchScreen.storyboard

@@ -1,9 +1,9 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<document type="com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB" version="3.0" toolsVersion="17156" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" launchScreen="YES" useTraitCollections="YES" useSafeAreas="YES" colorMatched="YES" initialViewController="01J-lp-oVM">
+<document type="com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB" version="3.0" toolsVersion="18122" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" launchScreen="YES" useTraitCollections="YES" useSafeAreas="YES" colorMatched="YES" initialViewController="01J-lp-oVM">
     <device id="retina6_1" orientation="portrait" appearance="light"/>
     <dependencies>
         <deployment identifier="iOS"/>
-        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="17125"/>
+        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="18093"/>
         <capability name="Safe area layout guides" minToolsVersion="9.0"/>
         <capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
     </dependencies>
@@ -16,28 +16,19 @@
                         <rect key="frame" x="0.0" y="0.0" width="414" height="896"/>
                         <autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
                         <subviews>
-                            <label opaque="NO" clipsSubviews="YES" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="Powered by React Native" textAlignment="center" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" minimumFontSize="9" translatesAutoresizingMaskIntoConstraints="NO" id="obG-Y5-kRd">
-                                <rect key="frame" x="20" y="855.5" width="374" height="20.5"/>
-                                <fontDescription key="fontDescription" type="system" pointSize="17"/>
-                                <color key="textColor" red="0.0" green="0.0" blue="0.0" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
-                                <nil key="highlightedColor"/>
-                            </label>
-                            <label opaque="NO" clipsSubviews="YES" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="react-native-navigation playground" textAlignment="center" lineBreakMode="middleTruncation" numberOfLines="2" baselineAdjustment="alignBaselines" minimumFontSize="18" translatesAutoresizingMaskIntoConstraints="NO" id="GJd-Yh-RWb">
-                                <rect key="frame" x="20" y="256.5" width="374" height="86"/>
-                                <fontDescription key="fontDescription" type="boldSystem" pointSize="36"/>
-                                <color key="textColor" red="0.0" green="0.0" blue="0.0" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
-                                <nil key="highlightedColor"/>
-                            </label>
+                            <imageView clipsSubviews="YES" userInteractionEnabled="NO" contentMode="scaleAspectFit" horizontalHuggingPriority="251" verticalHuggingPriority="251" image="SplashIcon" translatesAutoresizingMaskIntoConstraints="NO" id="kkN-au-YYg">
+                                <rect key="frame" x="132" y="383.5" width="150.5" height="129.5"/>
+                                <constraints>
+                                    <constraint firstAttribute="height" constant="129.5" id="GiA-bn-mrL"/>
+                                    <constraint firstAttribute="width" constant="150.5" id="IWK-zN-8CP"/>
+                                </constraints>
+                            </imageView>
                         </subviews>
                         <viewLayoutGuide key="safeArea" id="Bcu-3y-fUS"/>
                         <color key="backgroundColor" red="1" green="1" blue="1" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
                         <constraints>
-                            <constraint firstItem="Bcu-3y-fUS" firstAttribute="centerX" secondItem="obG-Y5-kRd" secondAttribute="centerX" id="5cz-MP-9tL"/>
-                            <constraint firstItem="Bcu-3y-fUS" firstAttribute="centerX" secondItem="GJd-Yh-RWb" secondAttribute="centerX" id="Q3B-4B-g5h"/>
-                            <constraint firstItem="obG-Y5-kRd" firstAttribute="leading" secondItem="Ze5-6b-2t3" secondAttribute="leading" symbolic="YES" id="SfN-ll-jLj"/>
-                            <constraint firstAttribute="bottom" secondItem="obG-Y5-kRd" secondAttribute="bottom" constant="20" id="Y44-ml-fuU"/>
-                            <constraint firstItem="GJd-Yh-RWb" firstAttribute="centerY" secondItem="Ze5-6b-2t3" secondAttribute="bottom" multiplier="1/3" constant="1" id="moa-c2-u7t"/>
-                            <constraint firstItem="GJd-Yh-RWb" firstAttribute="leading" secondItem="Ze5-6b-2t3" secondAttribute="leading" symbolic="YES" id="x7j-FC-K8j"/>
+                            <constraint firstItem="kkN-au-YYg" firstAttribute="centerY" secondItem="Ze5-6b-2t3" secondAttribute="centerY" id="IIW-PQ-t14"/>
+                            <constraint firstItem="kkN-au-YYg" firstAttribute="centerX" secondItem="Ze5-6b-2t3" secondAttribute="centerX" id="P7M-vy-b5z"/>
                         </constraints>
                     </view>
                 </viewController>
@@ -46,4 +37,7 @@
             <point key="canvasLocation" x="53" y="375"/>
         </scene>
     </scenes>
+    <resources>
+        <image name="SplashIcon" width="150.5" height="129.5"/>
+    </resources>
 </document>

website/docs/docs/docs-perfect-splash-screen.mdx

@@ -0,0 +1,127 @@
+---
+id: perfect-splash-screen
+title: Perfect Splash Screen
+sidebar_label: Perfect Splash Screen
+---
+
+import useBaseUrl from '@docusaurus/useBaseUrl';
+
+## Getting Started
+
+### Setting up a Splash Screen on iOS
+
+First open your `.xcworkspace` in xCode. Select `[project_name] > [project_name] > Imagex.xcassets` and click on the “+” icon in the second left navigator and select “New Image Set”:
+
+<img width="90%" src={useBaseUrl('/img/splash_screen_ios_1.png')} />
+
+Name your image set “SplashIcon" and add three images for your splash icon @1x, @2x and @3x.
+
+<img width="90%" src={useBaseUrl('/img/splash_screen_ios_2.png')} />
+
+NOTE: If you are using a full screen image for your splash screen then the process is the same, although you will set different screen constraints in the next steps.
+
+In the left most navigator, open LaunchScreen.storyboard and delete any text elements from the storyboard:
+
+<img width="90%" src={useBaseUrl('/img/splash_screen_ios_3.png')} />
+
+Click the "+" icon to add an ImageView to you storyboard:
+
+<img width="90%" src={useBaseUrl('/img/splash_screen_ios_4.png')} />
+
+Select your "SplashIcon" image:
+
+<img width="90%" src={useBaseUrl('/img/splash_screen_ios_5.png')} />
+
+Next, you need to add constraints to your image so it is sized and positioned correctly on device:
+
+<img width="90%" src={useBaseUrl('/img/splash_screen_ios_6.jpeg')} />
+
+The constraints you add will vary depending on the type of splash screen you want to setup; in our case we are going to add constraints to centre the image horizontally and vertically, and to constrain the width and height:
+
+<img width="90%" src={useBaseUrl('/img/splash_screen_ios_7.png')} />
+
+<img width="90%" src={useBaseUrl('/img/splash_screen_ios_8.png')} />
+
+## Advanced Configuration
+
+### How do I make an Animated splash screen?
+
+The best way to make an animated splash screen is to mount a React Native component which is identical to your splash screen. Firstly, we register a page called "LaunchPage" and `setRoot` with that component when the application starts:
+
+```js
+Navigation.registerComponent('LaunchPage', () => LaunchPage);
+
+Navigation.setRoot({
+  root: {
+    stack: {
+      children: [
+        {
+          component: {
+            name: 'LaunchPage',
+            options: {
+              topBar: {
+                visible: false,
+              },
+            },
+          },
+        },
+      ],
+    },
+  },
+});
+```
+
+Now that we have a React component (which looks identical to the splash screen) appears after initializing, we can
+perform any animation in that component. Below, for example, we have a video play after the splash screen. The first
+still shot of the video, is the splash screen configured (like in the guides above):
+
+```jsx
+export const LaunchPage = () => {
+  return (
+    <View style={styles.containerStyle}>
+      <Video
+        posterResizeMode={'cover'}
+        source={require('../assets/launch.mp4')}
+        style={styles.imageStyle}
+        resizeMode={'cover'}
+        onEnd={onVideoEnd}
+      />
+    </View>
+  );
+
+  function onVideoEnd() {
+    Navigation.setRoot({
+      root: {
+        stack: {
+          children: [
+            {
+              component: {
+                name: 'MainPage',
+              },
+            },
+          ],
+        },
+      },
+    });
+  }
+};
+```
+
+Once the video/animation is done, we `setRoot` to the main entry point of your application (in our case "MainPage"). This example covers
+a video, but you could build out your parts of your splash screen with `<View/>`, `<Image />` and `<Text />` components, animate them separately,
+then transition to your application.
+
+### My splash screen has a white flash?
+
+Your splash screen may have a white flash, this is caused due to the app being finished initializing before React Native is done initializing.
+To get rid of the white flash between your splash screen and React Native initializing, set the `waitForRender` flag to `true` on your `setRoot` animation:
+
+```
+Navigation.setDefaultOptions({
+    animations: {
+        setRoot: {
+            waitForRender: true
+        }
+    }
+});
+```

website/sidebars.js

@@ -33,6 +33,9 @@ module.exports = {
       'docs/third-party-mobx',
       'docs/third-party-react-context',
     ],
+    Guides: [
+      'docs/perfect-splash-screen',
+    ],
     Meta: ['docs/meta-contributing'],
   },
   api: {