initial log in page

package.json

@@ -15,10 +15,10 @@
     "expo-status-bar": "~1.4.4",
     "react": "18.2.0",
     "react-native": "0.71.3",
-    "react-native-safe-area-context": "4.5.0",
-    "react-native-screens": "~3.20.0",
     "react-native-gesture-handler": "~2.9.0",
     "react-native-reanimated": "~2.14.4",
+    "react-native-safe-area-context": "4.5.0",
+    "react-native-screens": "~3.20.0",
     "react-native-svg": "13.4.0"
   },
   "devDependencies": {

src/Routes/Login/Login.tsx

@@ -1,12 +1,52 @@
 import * as React from 'react';
-import {View, Text} from 'react-native';
+import {View, Text,  TextInput} from 'react-native';
 import styles from '../../styles';
 import Background from '../../Components/Background/Background';
+import { SafeAreaView} from "react-native";
+import { StatusBar } from "expo-status-bar";
+import { useState } from "react";
+import {Button,TouchableOpacity,} from "react-native";
+
+
 
 export default function Login() {
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  
   return (
     <Background>
-      <Text style={{...styles.text_white, ...{fontSize: 32}}}>Login</Text>
+       <Text style={{...styles.text_white, ...{fontSize: 32}}}>LOG IN</Text>
+      <SafeAreaView>
+      <View style={styles.container}>
+      <StatusBar style="auto" />
+      <View style={styles.inputView}>
+        <TextInput 
+            style={styles.TextInput}
+            placeholder="Email."
+            placeholderTextColor="#003f5c"
+            onChangeText={(email) => setEmail(email)}
+          /> 
+          </View>   
+        
+        <View style={styles.inputView}>
+        <TextInput
+          style={styles.TextInput}
+          placeholder="Password."
+          placeholderTextColor="#003f5c"
+          secureTextEntry={true}
+          onChangeText={(password) => setPassword(password)}
+        />
+      </View>
+
+      <TouchableOpacity>
+        <Text style={styles.forgot_button}>Forgot Password?</Text> 
+      </TouchableOpacity> 
+      <TouchableOpacity style={styles.loginBtn}>
+      <Text style={styles.loginText}>LOGIN</Text>
+      </TouchableOpacity>
+      </View>
+      </SafeAreaView>
     </Background>   
-  );
+); 
 }
+ 

src/styles.tsx

@@ -1,4 +1,6 @@
 import {StyleSheet} from 'react-native';
+
+
 const styles = StyleSheet.create({
   background: {
     backgroundColor: '#002d4c',
@@ -30,6 +32,52 @@ const styles = StyleSheet.create({
     flexDirection: 'column',
     alignItems: 'center',
   },
+  input: {
+    height: 40,
+    margin: 12,
+    borderWidth: 1,
+  },
+ 
+  inputView: {
+    backgroundColor: "skyblue",
+    borderRadius: 30,
+    width: "70%",
+    height: 45,
+    marginBottom: 20,
+    
+  },
+  TextInput: {
+    height: 50,
+    flex: 1,
+    padding: 10,
+    marginLeft: 5,
+  },
+  forgot_button: {
+    fontWeight: 'bold',
+    color: 'white',
+    height: 30,
+    marginBottom: 30,
+  },
+  loginBtn: {
+    width: "50%",
+    borderRadius: 25,
+    height: 50,
+    alignItems: "center",
+    justifyContent: "center",
+    marginTop: 30,
+    backgroundColor: "skyblue",
+  },
+  loginText:{
+    color: '#003f5c',
+    fontWeight: 'bold',
+    fontSize: 20,
+  },
+  container: {
+    marginTop: 200,
+    flex: 1,
+    alignItems: "center",
+    justifyContent: "center",
+  },
 });
 
 export default styles;