Adding loading screen and changing splash screen to app logo.

src/App.js

@@ -4,6 +4,7 @@ import { NavigationContainer } from "@react-navigation/native";
 import navigationTheme from "./app/navigation/navigationTheme";
 import "./app/config/globals.js";
 import openDatabase from "./app/database/database-connection";
+import { AppLoading } from "expo";
 
 import initDatabase from "./app/database/database-init";
 import FlashMessage from "react-native-flash-message";
@@ -17,6 +18,7 @@ import jwtDecode from "jwt-decode";
 
 export default function App() {
   const [user, setUser] = useState();
+  const [isReady, setIsReady] = useState();
 
   const restoreToken = async () => {
     const token = await authStorage.getToken();
@@ -25,9 +27,10 @@ export default function App() {
     return setUser(jwtDecode(token));
   };
 
-  useEffect(() => {
-    restoreToken();
-  }, []);
+  if (!isReady)
+    return (
+      <AppLoading startAsync={restoreToken} onFinish={() => setIsReady(true)} />
+    );
 
   global.userDataBase = openDatabase();
   initDatabase(global.userDataBase);

src/app.json

@@ -6,7 +6,7 @@
     "orientation": "portrait",
     "icon": "./app/assets/icon.png",
     "splash": {
-      "image": "./app/assets/splash.png",
+      "image": "./app/assets/icons/splash.png",
       "resizeMode": "contain",
       "backgroundColor": "#ffffff"
     },

src/app/config/assets.js

@@ -2,6 +2,7 @@ import Pluviometer from "../assets/pluviometer/pluviometer-logo.svg";
 import RainIcon from "../assets/rain/rain-icon.svg";
 import RiverIcon from "../assets/river/river-logo.svg";
 import FloodZones from "../assets/floodZonesAssets/floodZones-logo.svg";
+import AppLogoTitle from "../assets/icons/logo_title.svg";
 
 import RiverFlood from "../assets/river/river_extravasado.svg";
 import RiverLow from "../assets/river/river_low.svg";
@@ -79,4 +80,5 @@ export default {
   },
   pluviometer: require("../assets/pluviometer/diario_pluviometrico.png"),
   PluviometerIcon: Pluviometer,
+  AppLogoTitle: AppLogoTitle,
 };

src/app/screens/LoginScreen.js

@@ -15,6 +15,7 @@ import login from "../api/auth";
 import jwdDecode from "jwt-decode";
 import { AuthContext } from "../auth/context";
 import authStorage from "../auth/storage";
+import assets from "../config/assets";
 
 const phoneRegex = RegExp(
   /^\(?[\(]?([0-9]{2})?\)?[)\b]?([0-9]{4,5})[-. ]?([0-9]{4})$/
@@ -58,7 +59,8 @@ export default function LoginScreen(props) {
           handleSubmit(name, password, setLoginFailed)
         }
       >
-        <Text style={styles.title}>Pega Chuva</Text>
+        {/* <Text style={styles.title}>Pega Chuva</Text> */}
+        <assets.AppLogoTitle style={styles.title} />
 
         <ErrorMessage error="Email ou senha inválidos" visible={loginFailed} />
         <FormField
@@ -100,7 +102,6 @@ const styles = StyleSheet.create({
   },
   title: {
     alignSelf: "center",
-    fontSize: dimensions.text.header,
     marginBottom: dimensions.spacing.big_padding,
   },
 });