Set up proper loading screen rather than text

- just re-used the loading balls, centered vertically and horizontally
- also set use of the native driver to put the animations on the UI thread rather than main JS loop:
http://facebook.github.io/react-native/blog/2017/02/14/using-native-driver-for-animated

app/src/features/onboarding/ui/components/welcome.styles.ts

@@ -14,5 +14,6 @@ export default StyleSheet.create({
     btn: {
         position: 'absolute',
         bottom: 35,
+        height: 50,
     },
 })

app/src/ui/components/loading-balls.tsx

@@ -30,14 +30,17 @@ class LoadingBalls extends React.PureComponent<Props, State> {
                 Animated.timing(this.state.leftOffset, {
                     toValue: LoadingBalls.FINAL_SPACING,
                     duration: LoadingBalls.DURATION,
+                    useNativeDriver: true,
                 }),
                 Animated.timing(this.state.sizeInc, {
                     toValue: LoadingBalls.FINAL_SIZE,
                     duration: LoadingBalls.DURATION,
+                    useNativeDriver: true,
                 }),
                 Animated.timing(this.state.sizeDec, {
                     toValue: LoadingBalls.INIT_SIZE,
                     duration: LoadingBalls.DURATION,
+                    useNativeDriver: true,
                 }),
             ]),
         ).start()

app/src/ui/components/loading-screen.styles.ts

@@ -0,0 +1,9 @@
+import { StyleSheet } from 'react-native'
+
+export default StyleSheet.create({
+    container: {
+        flex: 1,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+})

app/src/ui/components/loading-screen.tsx

@@ -0,0 +1,15 @@
+import React from 'react'
+import { View } from 'react-native'
+
+import LoadingBalls from './loading-balls'
+import styles from './loading-screen.styles'
+
+export default class LoadingScreen extends React.PureComponent {
+    render() {
+        return (
+            <View style={styles.container}>
+                <LoadingBalls />
+            </View>
+        )
+    }
+}

app/src/ui/index.tsx

@@ -4,6 +4,7 @@ import { AppRegistry, View, Text } from 'react-native'
 import { name as appName } from '../../app.json'
 import { createApp, createShareUI } from './navigation'
 import { UIDependencies } from './types'
+import LoadingScreen from './components/loading-screen'
 
 export class UI {
     private setupResolve!: (dependencies: UIDependencies) => void
@@ -27,17 +28,17 @@ export class UI {
                 this.setState(() => ({ dependencies }))
             }
 
+            protected renderLoading() {
+                return <LoadingScreen />
+            }
+
             abstract render(): JSX.Element
         }
 
         class AppContainer extends AbstractContainer {
             render() {
                 if (!this.state.dependencies) {
-                    return (
-                        <View>
-                            <Text>Loading!?!!</Text>
-                        </View>
-                    )
+                    return this.renderLoading()
                 }
 
                 const AppContainer = createApp(this.state.dependencies)
@@ -48,11 +49,7 @@ export class UI {
         class ShareContainer extends AbstractContainer {
             render() {
                 if (!this.state.dependencies) {
-                    return (
-                        <View>
-                            <Text>Loading!?!!</Text>
-                        </View>
-                    )
+                    return this.renderLoading()
                 }
 
                 const AppContainer = createShareUI(this.state.dependencies)