Dev/3rd party

App/index.js

@@ -3,40 +3,74 @@ import { Provider } from 'react-redux';
 import { createRootNavigator } from './router';
 import { isSignedIn } from './auth';
 import store from './store';
-import { Font } from 'expo';
+import { Font, Asset, AppLoading, SplashScreen } from 'expo';
+import { Image, View } from 'react-native';
 
 export default class App extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
       signedIn: false,
-      checkedSignIn: false
+      isSplashReady: false,
+      isAppReady: false,
     };
   }
 
   async componentWillMount() {
-    await Font.loadAsync({
-      'vincHand': require('./assets/vinchand.ttf'),
-    });
-
     isSignedIn()
-      .then(res => this.setState({ signedIn: res, checkedSignIn: true }))
+      .then(res => this.setState({ signedIn: res }))
       .catch(error => console.error(error));
   }
 
   render() {
-    const { checkedSignIn, signedIn } = this.state;
+    const { signedIn, isSplashReady, isAppReady } = this.state;
 
-    if (!checkedSignIn) {
-      return null;
+    if (!isSplashReady) {
+      return (
+        <AppLoading
+          startAsync={this._cacheSplashResourcesAsync}
+          onFinish={() => this.setState({ isSplashReady: true })}
+          onError={console.warn}
+          autoHideSplash={true}
+        />
+      );
+    }
+
+    if (!isAppReady) {
+      return (
+        <View style={{ flex: 1 }}>
+          <Image
+            source={require('./assets/splash.png')}
+            onLoad={this._cacheResourcesAsync}
+          />
+        </View>
+      );
     }
 
     const Layout = createRootNavigator(signedIn);
 
     return (
       <Provider store={store}>
+
         <Layout />
       </Provider>
     );
+
   }
+
+
+  _cacheSplashResourcesAsync = async () => {
+    const image = require('./assets/splash.png');
+    return Asset.fromModule(image).downloadAsync();
+  };
+
+  _cacheResourcesAsync = async () => {
+    SplashScreen.hide();
+
+    await Font.loadAsync({
+      'vincHand': require('./assets/vinchand.ttf'),
+    });
+
+    this.setState({ isAppReady: true });
+  };
 }

App/redux/auth.js

@@ -31,7 +31,9 @@ const loginFailure = error => ({
   payload: { error: error }
 });
 
-export const removeCurrentUser = () => ({ type: AUTH_REMOVE_CURRENT_USER });
+export const removeCurrentUser = () => ({
+  type: AUTH_REMOVE_CURRENT_USER
+});
 
 const initialState = {
   userToken: null,
@@ -60,6 +62,7 @@ export default function reducer (state = initialState, action) {
     case AUTH_REMOVE_CURRENT_USER:
       return {
         ...state,
+        loading: false,
         userToken: null
       };
 

App/screens/Login.js

@@ -1,11 +1,14 @@
 import React from 'react';
-import {Text, TextInput, KeyboardAvoidingView, ScrollView, Button} from 'react-native';
+import {Text, TextInput, KeyboardAvoidingView, ScrollView, Button, View} from 'react-native';
 import { connect } from 'react-redux';
 import styles from '../theme/ApplicationStyles';
 import OfflineModal from '../components/Offline';
 import {email, password} from '../configs/sensitive';
 import { login } from '../redux/auth';
 import * as Animatable from 'react-native-animatable';
+import { DangerZone } from 'expo';
+let { Lottie } = DangerZone;
+import emptyBox from '../assets/empty-box.json';
 
 class Login extends React.Component {
   constructor(props) {
@@ -14,9 +17,13 @@ class Login extends React.Component {
     this.state = {
       email: email || '',
       password: password || '',
-      error: ''
+      error: '',
+      animation: emptyBox
     };
+  }
 
+  componentDidMount() {
+    this._playAnimation();
   }
 
   handleChangeEmail = (value) => {
@@ -41,8 +48,21 @@ class Login extends React.Component {
       <KeyboardAvoidingView behavior="position" style={styles.container}>
         <ScrollView>
           <OfflineModal/>
-          <Text style={styles.h1}>Friday's Shop</Text>
 
+          {this.state.animation &&
+          <Lottie
+            ref={animation => {
+              this.animation = animation;
+            }}
+            style={{
+              width: 100,
+              height: 100
+            }}
+            source={this.state.animation}
+            loop={false}
+          />}
+
+          <Text style={styles.h1}>Friday's Shop</Text>
           { error ?
             <Animatable.Text animation="pulse" easing="ease-out" iterationCount="infinite" style={styles.error}>❤ {error.message}️</Animatable.Text>
             : null }
@@ -81,8 +101,14 @@ class Login extends React.Component {
           />
         </ScrollView>
       </KeyboardAvoidingView>
-  );
- }
+    );
+  }
+
+  _playAnimation = () => {
+      this.animation.reset();
+      this.animation.play();
+  }
+
 }
 
 const mapStateToProps = state => ({

app.json

@@ -1,5 +1,10 @@
 {
   "expo": {
-    "sdkVersion": "27.0.0"
+    "sdkVersion": "32.0.0"
+  },
+  "splash": {
+    "image": "./App/assets/splash.png",
+    "resizeMode": "cover",
+    "backgroundColor": "#00000"
   }
 }

babel.config.js

@@ -0,0 +1,14 @@
+module.exports = function(api) {
+  api.cache(true);
+  return {
+    presets: ['babel-preset-expo'],
+    plugins: [
+      [
+        '@babel/transform-runtime',
+        {
+          regenerator: true,
+        },
+      ],
+    ],
+  };
+};