diff --git a/app/src/features/onboarding/ui/components/welcome.styles.ts b/app/src/features/onboarding/ui/components/welcome.styles.ts index 753539116..694888176 100644 --- a/app/src/features/onboarding/ui/components/welcome.styles.ts +++ b/app/src/features/onboarding/ui/components/welcome.styles.ts @@ -14,5 +14,6 @@ export default StyleSheet.create({ btn: { position: 'absolute', bottom: 35, + height: 50, }, }) diff --git a/app/src/ui/components/loading-balls.tsx b/app/src/ui/components/loading-balls.tsx index f70fc36e4..f3d6df947 100644 --- a/app/src/ui/components/loading-balls.tsx +++ b/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() diff --git a/app/src/ui/components/loading-screen.styles.ts b/app/src/ui/components/loading-screen.styles.ts new file mode 100644 index 000000000..f92f2fdc7 --- /dev/null +++ b/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', + }, +}) diff --git a/app/src/ui/components/loading-screen.tsx b/app/src/ui/components/loading-screen.tsx new file mode 100644 index 000000000..7ea61d3c3 --- /dev/null +++ b/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> + ) + } +} diff --git a/app/src/ui/index.tsx b/app/src/ui/index.tsx index 81f669d22..46c937df0 100644 --- a/app/src/ui/index.tsx +++ b/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)