login page design

frontend/src/auth/Login.js

+import { useNavigation } from "@react-navigation/native";
+import React from "react";
+import { SafeAreaView, ScrollView, View, StyleSheet, ImageBackground, Text, TextInput, TouchableOpacity, Image } from "react-native";
+
+const Login = () => {
+
+    const navigation = useNavigation();
+
+    return(
+        <SafeAreaView>
+            <ScrollView>
+                <View style={styles.continer}>               
+                    <ImageBackground style={styles.backgroundImage} source={require('../../assets/login/login_background.png')} resizeMode="cover">                   
+                    <View>
+                        <Image style={styles.logo} source={require('../../assets/login/logo.png')} resizeMode="contain"></Image>
+                    </View>
+                    <View elevation={5} style={styles.main_container}>
+                        <Text style={styles.main_title}>Sign In</Text>
+                        <View style={styles.form_input}>
+                            <TextInput style={styles.text_input} placeholder="Enter Email"></TextInput>
+                        </View>
+
+                        <View style={styles.form_input}>
+                            <TextInput keyboardType="visible-password" style={styles.text_input} placeholder="Enter Password"></TextInput>
+                        </View>
+
+                        <View style={styles.form_input}>
+                            <TouchableOpacity onPress={()=> { navigation.navigate("Home")}} style={styles.btn}>
+                                <Text style={styles.btn_text}>
+                                    Sign In
+                                </Text>
+                            </TouchableOpacity>
+                        </View>
+
+                        <View style={styles.text_if}>
+                        <TouchableOpacity onPress={()=> { navigation.navigate("Register")}}>
+                                <Text style={styles.btn_text}>
+                                If you don't have account? Sign Up
+                                </Text>
+                                </TouchableOpacity>
+                        </View>
+                    </View>
+                    </ImageBackground>
+                </View>
+            </ScrollView>
+        </SafeAreaView>
+    )
+}
+
+const styles = StyleSheet.create({
+
+    continer:{
+        flex:1
+    },
+    backgroundImage:{
+        width: '100%',
+        height: 900
+    },
+    logo:{
+        marginTop: 100,
+        marginLeft: 50,
+        width: '80%',
+        height: '40%'
+    },
+    main_container:{
+        marginTop: -170,
+        marginLeft: 30,
+        width: 350,
+        height: 450,
+        backgroundColor: "#ffffff",
+        borderColor: '#000000',
+        borderRadius: 50,
+        shadowColor: "#000000",
+        shadowOpacity: 0.8,
+        shadowRadius: 2,
+        shadowOffset: {
+            height: 1,
+            width: 1
+        },
+    },
+    main_title:{
+        textAlign: 'center',
+        fontSize: 40,
+        color: '#000000'
+    },
+    form_input:{
+        marginTop: 20,
+        padding: 20,
+    },text_input:{
+        padding: 15,
+        fontSize: 16,
+        borderWidth: 1,
+        borderRadius: 50,
+        backgroundColor: '#EDEDED',
+        color:'#000000'
+        
+    },btn:{
+        padding: 15,
+        borderRadius: 50,
+        backgroundColor: '#1DCE92',
+        width: 150,
+        textAlign: 'center',
+        alignItems: 'center',
+        marginLeft: 80   
+    },
+    btn_text:{
+        fontSize: 20,
+        fontWeight: 'bold',
+        color:'#000000'
+    },
+    text_if:{
+        fontSize: 20,
+        fontWeight: 'bold',
+        color:'#000000',
+        textAlign: 'center',
+        alignItems: 'center',
+        marginTop: 10 
+    }
+
+})
+
+export default Login;
\ No newline at end of file