diff --git a/playground/ios/playground/Images.xcassets/Contents.json b/playground/ios/playground/Images.xcassets/Contents.json index da4a164c918..73c00596a7f 100644 --- a/playground/ios/playground/Images.xcassets/Contents.json +++ b/playground/ios/playground/Images.xcassets/Contents.json @@ -1,6 +1,6 @@ { "info" : { - "version" : 1, - "author" : "xcode" + "author" : "xcode", + "version" : 1 } -} \ No newline at end of file +} diff --git a/playground/ios/playground/Images.xcassets/SplashIcon.imageset/Contents.json b/playground/ios/playground/Images.xcassets/SplashIcon.imageset/Contents.json new file mode 100644 index 00000000000..fa0ae86e2de --- /dev/null +++ b/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 + } +} diff --git a/playground/ios/playground/Images.xcassets/SplashIcon.imageset/logo@1x.jpg b/playground/ios/playground/Images.xcassets/SplashIcon.imageset/logo@1x.jpg new file mode 100644 index 00000000000..e613ca27e46 Binary files /dev/null and b/playground/ios/playground/Images.xcassets/SplashIcon.imageset/logo@1x.jpg differ diff --git a/playground/ios/playground/Images.xcassets/SplashIcon.imageset/logo@2x.jpg b/playground/ios/playground/Images.xcassets/SplashIcon.imageset/logo@2x.jpg new file mode 100644 index 00000000000..27adca8c118 Binary files /dev/null and b/playground/ios/playground/Images.xcassets/SplashIcon.imageset/logo@2x.jpg differ diff --git a/playground/ios/playground/Images.xcassets/SplashIcon.imageset/logo@3x.jpg b/playground/ios/playground/Images.xcassets/SplashIcon.imageset/logo@3x.jpg new file mode 100644 index 00000000000..53ccefdf60b Binary files /dev/null and b/playground/ios/playground/Images.xcassets/SplashIcon.imageset/logo@3x.jpg differ diff --git a/playground/ios/playground/LaunchScreen.storyboard b/playground/ios/playground/LaunchScreen.storyboard index d6b5e4b687e..7714642052f 100644 --- a/playground/ios/playground/LaunchScreen.storyboard +++ b/playground/ios/playground/LaunchScreen.storyboard @@ -1,9 +1,9 @@ - + - + @@ -16,28 +16,19 @@ - - + + + + + + + - - - - - - + + @@ -46,4 +37,7 @@ + + + diff --git a/website/docs/docs/docs-perfect-splash-screen.mdx b/website/docs/docs/docs-perfect-splash-screen.mdx new file mode 100644 index 00000000000..bf4772b79ee --- /dev/null +++ b/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”: + + + +Name your image set “SplashIcon" and add three images for your splash icon @1x, @2x and @3x. + + + +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: + + + +Click the "+" icon to add an ImageView to you storyboard: + + + +Select your "SplashIcon" image: + + + +Next, you need to add constraints to your image so it is sized and positioned correctly on device: + + + +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: + + + + + +## 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 ( + + + ); + + 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 ``, `` and `` 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 + } + } +}); +``` diff --git a/website/sidebars.js b/website/sidebars.js index 2c86d57c3f2..5b68540db10 100755 --- a/website/sidebars.js +++ b/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: { diff --git a/website/static/img/splash_screen_ios_1.png b/website/static/img/splash_screen_ios_1.png new file mode 100644 index 00000000000..e4a94066289 Binary files /dev/null and b/website/static/img/splash_screen_ios_1.png differ diff --git a/website/static/img/splash_screen_ios_2.png b/website/static/img/splash_screen_ios_2.png new file mode 100644 index 00000000000..26b78237295 Binary files /dev/null and b/website/static/img/splash_screen_ios_2.png differ diff --git a/website/static/img/splash_screen_ios_3.png b/website/static/img/splash_screen_ios_3.png new file mode 100644 index 00000000000..3daa0732a11 Binary files /dev/null and b/website/static/img/splash_screen_ios_3.png differ diff --git a/website/static/img/splash_screen_ios_4.png b/website/static/img/splash_screen_ios_4.png new file mode 100644 index 00000000000..9c009c5a15b Binary files /dev/null and b/website/static/img/splash_screen_ios_4.png differ diff --git a/website/static/img/splash_screen_ios_5.png b/website/static/img/splash_screen_ios_5.png new file mode 100644 index 00000000000..9a681a99e7d Binary files /dev/null and b/website/static/img/splash_screen_ios_5.png differ diff --git a/website/static/img/splash_screen_ios_6.jpeg b/website/static/img/splash_screen_ios_6.jpeg new file mode 100644 index 00000000000..252cd19a657 Binary files /dev/null and b/website/static/img/splash_screen_ios_6.jpeg differ diff --git a/website/static/img/splash_screen_ios_7.png b/website/static/img/splash_screen_ios_7.png new file mode 100644 index 00000000000..9d1a5b9cdb3 Binary files /dev/null and b/website/static/img/splash_screen_ios_7.png differ diff --git a/website/static/img/splash_screen_ios_8.png b/website/static/img/splash_screen_ios_8.png new file mode 100644 index 00000000000..aac7cdba7cb Binary files /dev/null and b/website/static/img/splash_screen_ios_8.png differ