Adding Register option on the app

Views/Login.js

@@ -1,10 +1,15 @@
 import { StatusBar } from 'expo-status-bar';
-import React, { useEffect, useState } from 'react';
-import { StyleSheet, Text, View, TextInput, SafeAreaView } from 'react-native';
+import React, { use, useEffect, useState } from 'react';
+import { StyleSheet, Text, View, Image, SafeAreaView } from 'react-native';
 import API from './../API.js';
 import LoginForm from './../components/Login.js';
+import RegisterForm from './../components/Register.js';
+import i18n from "../i18nMessages.js";
+import { Button } from 'react-native-paper';
 
 export default function App({ navigation, route }) {
+    const [isLogin, setIsLogin] = useState(true);
+
     useEffect(() => {
         getData = async () => {
             let r = await API.isLoggedIn();
@@ -21,19 +26,54 @@ export default function App({ navigation, route }) {
 
     return (
         <SafeAreaView style={styles.container}>
-            <LoginForm />
-            <StatusBar style="auto" />
-            <View style={{ position: "absolute", top: 60, left: 10, opacity: 0.5 }} >
-                <Text onPress={()=>{
-                alert("Register your church on fellowshipapps.com");
-            }}>{"<- Not an EMI family member?"}</Text>
+            <Image
+                style={styles.logo}
+                source={require('./../assets/icon.png')}
+            />
+            <Text style={styles.header}>EMI Fellowship</Text>
+            <View style={{ flexDirection: "row", justifyContent: "center", width: "100%" }}>
+                <Button disabled={isLogin} onPress={() => setIsLogin(true)}>
+                    {i18n.t("message.login")}
+                </Button>
+                <Button disabled={!isLogin} onPress={() => setIsLogin(false)}>
+                    {i18n.t("message.register")}
+                </Button>
             </View>
+            {
+                isLogin ? <LoginForm /> : <RegisterForm />
+            }
+            <StatusBar style="auto" />
+            {/* <View style={{ position: "absolute", top: 60, left: 10, opacity: 0.5 }} >
+                <Text onPress={() => {
+                    alert("Register your church on fellowshipapps.com");
+                }}>{"<- Not an EMI family member?"}</Text>
+            </View>  */}
         </SafeAreaView>
     );
 }
 
 const styles = StyleSheet.create({
     container: {
+        backgroundColor: 'white',
         flex: 1,
+        flexDirection: "column",
+        justifyContent: "center",
+        width: "100%",
+        alignContent: 'center',
+        alignItems: 'center',
+    },
+    header: {
+        fontFamily: 'Helvetica-Bold',
+        fontSize: 42,
+        textAlign: "left",
+        paddingBottom: 15,
+        color: '#777',
+        alignContent: 'center'
+    },
+    logo: {
+        width: 250,
+        height: 250,
+        justifyContent: 'center',
+        alignItems: 'center',
     },
 });