Login Ready, changing app name

components/Login.js

@@ -1,5 +1,5 @@
 import { StatusBar } from 'expo-status-bar';
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import { Text, View, StyleSheet, Image } from 'react-native';
 import { TextInput, Button } from 'react-native-paper';
 import API from './../API.js';
@@ -12,13 +12,23 @@ let LoginForm = () => {
   let [password, setPassword] = useState('');
   const navigation = useNavigation();
 
+  const loginCall = async ()=>{
+    let r = await API.logIn(email, password);
+    if (r.status === "ok") return navigation.reset({
+        index: 0,
+        routes: [{ name: 'MainNavigation' }],
+      });
+    alert('Please review the information')
+  };
+
   return (
     <View style={styles.mainView}>
       <Image
         style={styles.logo}
         source={require('./../assets/icon.png')}
       />
-      <Text style={styles.header}>Login</Text>
+      <Text style={styles.header}>EMI Social</Text>
+      <Text >Login</Text>
       <TextInput
         style={styles.input}
         onChangeText={text => setEmail(text)}
@@ -42,9 +52,9 @@ let LoginForm = () => {
         mode="outlined"
       />
       <Button
+        style={styles.button}
         onPress={async () => {
-          let r = await API.logIn(email, password);
-          if (r.status === "ok") navigation.navigate('Feed');
+          await loginCall();
         }}
       >submit</Button>
     </View>
@@ -61,7 +71,8 @@ const styles = StyleSheet.create({
     justifyContent: "flex-start",
     padding: 15,
     width: "100%",
-    alignContent: 'center'
+    alignContent: 'center',
+    alignItems: 'center',
   },
   header: {
     fontFamily: 'Helvetica-Bold',
@@ -78,6 +89,11 @@ const styles = StyleSheet.create({
     alignItems: 'center',
   },
   input:{
-    backgroundColor: 'white'
+    backgroundColor: 'white',
+    width: "80%"
+  },
+  button:{
+    marginTop: 10,
+
   }
 });