Ui improvement for register and login

mobile/App.js

-import React from 'react';
-import { NavigationContainer } from '@react-navigation/native';
-import { createNativeStackNavigator } from '@react-navigation/native-stack';
-import LoginScreen from './Screens/loginScreen'
-import HomeScreen from './Screens/homeScreen'
-import RegistrationScreen from './Screens/registrationScreen'
+import React from "react";
+import { NavigationContainer } from "@react-navigation/native";
+import { createNativeStackNavigator } from "@react-navigation/native-stack";
+import LoginScreen from "./Screens/loginScreen";
+import HomeScreen from "./Screens/homeScreen";
+import RegistrationScreen from "./Screens/registrationScreen";
+
+/*const ImageHeader = (props) => (
+  <View style={{ backgroundColor: "#eee" }}>
+    <Image
+      style={StyleSheet.absoluteFill}
+      source={require("./mobile/images/lightlogo_preview_rev_1.png")}
+    />
+    <Header {...props} style={{ backgroundColor: "transparent" }} />
+  </View>
+);*/
 
 const Stack = createNativeStackNavigator();
 
 class App extends React.Component {
-
   //In the render here we define the application Screen routes
-  //with navigation, then in the classes we'll use the navigate 
+  //with navigation, then in the classes we'll use the navigate
   //method to move from one page to another
   render() {
-    let x = 1;
     console.log("App executed");
     return (
       <NavigationContainer>
-      <Stack.Navigator>
-        <Stack.Screen
-          name="Login"
-          component={LoginScreen}
-        />
-        <Stack.Screen
-            name="Home"
-            component={HomeScreen}
+        <Stack.Navigator
+          screenOptions={{
+            headerStyle: {
+              backgroundColor: "#90EAFC",
+            },
+            headerTintColor: "#black",
+            headerTitleStyle: {
+              fontWeight: "bold",
+            },
+          }}
+        >
+          <Stack.Screen
+            name="Login"
+            component={LoginScreen}
+            options={{
+              headerTitle: "Log in",
+              //header: (props) => <ImageHeader {...props} />,
+            }}
           />
-        <Stack.Screen
+          <Stack.Screen name="Home" component={HomeScreen} />
+          <Stack.Screen
             name="Registration"
             component={RegistrationScreen}
+            options={{
+              title: "Sign up",
+            }}
           />
-      </Stack.Navigator>
-    </NavigationContainer>
+        </Stack.Navigator>
+      </NavigationContainer>
     );
   }
 }
 
-
-
 export default App;

mobile/Screens/homeScreen.js

-import React, {Component} from 'react';
-import { StyleSheet, Text, View, Button, TextInput } from 'react-native';
-import {io} from "socket.io-client"; //socket.io-client
+import React, { Component } from "react";
+import { StyleSheet, Text, View, Button, TextInput } from "react-native";
+import { io } from "socket.io-client";
 
 class HomeScreen extends Component {
-
   constructor(props) {
     super(props);
     this.state = {
-      msg : ""
+      msg: "",
     };
   }
 
   componentDidMount() {
     this.socket = io("http://192.168.178.92:3000", {
-      transports: ['websocket'] //this line is fundamental
+      transports: ["websocket"], //this line is fundamental
     });
-    this.socket.on('msg', msg =>{
+    this.socket.on("msg", (msg) => {
       alert(msg);
-    })
+    });
   }
 
-  sendMessage(){
+  sendMessage() {
     this.socket.emit("msg", this.state.msg);
     this.setState({ msg: "" });
   }
@@ -29,15 +28,15 @@ class HomeScreen extends Component {
     return (
       <View style={styles.container}>
         <TextInput
-            style={styles.input}
-            placeholder="Send a message"
-            autoCorrect={false}
-            value={this.state.msg}
-            onSubmitEditing={() => this.sendMessage()}
-            onChangeText={msg => {
+          style={styles.input}
+          placeholder="Send a message"
+          autoCorrect={false}
+          value={this.state.msg}
+          onSubmitEditing={() => this.sendMessage()}
+          onChangeText={(msg) => {
             this.setState({ msg });
           }}
-            />
+        />
       </View>
     );
   }
@@ -45,21 +44,21 @@ class HomeScreen extends Component {
 
 // ...
 const styles = StyleSheet.create({
-    container: {
-      flex: 1,
-      backgroundColor: '#fff',
-      alignItems: 'center',
-      justifyContent: 'center',
-    },
-    input: {
-      position: 'absolute',
-      left: 0,
-      right: 0,
-      bottom: 0,
-      alignSelf: "stretch", 
-      height:40,
-      borderWidth:1
-    }
-  });
+  container: {
+    flex: 1,
+    backgroundColor: "#fff",
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  input: {
+    position: "absolute",
+    left: 0,
+    right: 0,
+    bottom: 0,
+    alignSelf: "stretch",
+    height: 40,
+    borderWidth: 1,
+  },
+});
 
-export default HomeScreen;
\ No newline at end of file
+export default HomeScreen;

mobile/Screens/loginScreen.js

-import React, {Component} from 'react';
-import { StyleSheet, Text, View, Button, TextInput } from 'react-native';
+import React, { Component } from "react";
+import {
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  View,
+  Button,
+  TextInput,
+} from "react-native";
 
 class LoginScreen extends Component {
-    constructor(props) {
-        super(props);
-        this.state = {
-          username: "",
-          password: ""
-        };
-      }
+  constructor(props) {
+    super(props);
+    this.state = {
+      username: "",
+      password: "",
+    };
+  }
 
-    submitLogin() {
-    
-      //here we're going to post the username and password inserted in the
-      //login page, in particulare this is a post request to the /signin route
-      //in the server that will response with status:200 if the credentials are in the 
-      //database and with status:422 if not
-      fetch('http://192.168.178.92:3000/signin', {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-        },
-        body: JSON.stringify({
-          username : this.state.username,
-          password : this.state.password
-        }),
-      }) //here we handle the status response of the server
-      .then(res =>{
-        if (res.status !== 200){
-          alert('Invalid username or password');
+  submitLogin() {
+    //here we're going to post the username and password inserted in the
+    //login page, in particulare this is a post request to the /signin route
+    //in the server that will response with status:200 if the credentials are in the
+    //database and with status:422 if not
+    fetch("http://192.168.178.92:3000/signin", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({
+        username: this.state.username,
+        password: this.state.password,
+      }),
+    }) //here we handle the status response of the server
+      .then((res) => {
+        if (res.status !== 200) {
+          alert("Invalid username or password");
+        } else {
+          alert("Succesful login");
+          this.props.navigation.navigate("Home");
         }
-        else{
-          alert('Succesful login')
-          this.props.navigation.navigate('Home')
-        }
-      })
-      //here we set again username and password as blank
-      //probably in the future we'll need to send the credentials to the home page 
-      //to create the user for the socket.io chat
-      this.setState({ username: "" });
-      this.setState({ password: "" });
-    }
-
-    render() {
-
-        return (
-        <View style={styles.container}>
-            <Text>LOGIN</Text>
+      });
+    //here we set again username and password as blank
+    //probably in the future we'll need to send the credentials to the home page
+    //to create the user for the socket.io chat
+    this.setState({ username: "" });
+    this.setState({ password: "" });
+  }
 
-            <TextInput
-            style={styles.TextInput}
-            placeholder = "Username"
-            autoCorrect = {false}
-            value = {this.state.username}
-            onChangeText = {username => {
-                this.setState({ username });
-              }}
-            />
-            
+  render() {
+    return (
+      <View style={styles.container}>
+        <Text>Username</Text>
+        <View style={styles.inputView}>
+          <TextInput
+            style={styles.inputText}
+            placeholder="Username"
+            autoCorrect={false}
+            value={this.state.username}
+            onChangeText={(username) => {
+              this.setState({ username });
+            }}
+          />
+        </View>
 
-            <TextInput
-            style={styles.TextInput}
+        <Text>Password</Text>
+        <View style={styles.inputView}>
+          <TextInput
+            style={styles.inputText}
             placeholder="Password"
             autoCorrect={false}
             secureTextEntry={true}
-            value = {this.state.password}
-            onChangeText = {password => {
-                this.setState({ password });
-              }}
-            />
+            value={this.state.password}
+            onChangeText={(password) => {
+              this.setState({ password });
+            }}
+          />
+        </View>
+
+        <TouchableOpacity
+          style={styles.loginBtn}
+          onPress={() => this.submitLogin()}
+        >
+          <Text>Log in</Text>
+        </TouchableOpacity>
 
-            <Button
-            title="Login"
-            onPress={() =>
-                this.submitLogin()
-              }
-            />
-            {/* this will be the button for the registration page */}
-            <Button
-            title="Go to Registration"
-            onPress={() => {
-                this.props.navigation.navigate('Registration')
-              }   
-            }
-            />
-          </View>
-        );
-    }
+        <TouchableOpacity
+          style={styles.signupBtn}
+          onPress={() => {
+            this.props.navigation.navigate("Registration");
+          }}
+        >
+          <Text>Go to sign up</Text>
+        </TouchableOpacity>
+      </View>
+    );
+  }
 }
 
 // ...
 const styles = StyleSheet.create({
-    container: {
-      flex: 1,
-      backgroundColor: '#fff',
-      alignItems: 'center',
-      justifyContent: 'center',
-    },
-    TextInput: {
-      height: 40,
-      width: 200,
-      borderWidth: 2,
-      padding:10
-    }
-  });
+  container: {
+    flex: 1,
+    backgroundColor: "#fff",
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  logo: {
+    fontWeight: "bold",
+    fontSize: 50,
+    color: "#fb5b5a",
+    marginBottom: 40,
+  },
+  inputView: {
+    width: "80%",
+    backgroundColor: "#90EAFC",
+    borderRadius: 25,
+    height: 50,
+    marginBottom: 15,
+    justifyContent: "center",
+    padding: 20,
+  },
+  inputText: {
+    height: 50,
+    color: "white",
+  },
+  forgot: {
+    color: "black",
+    fontSize: 11,
+  },
+  loginBtn: {
+    width: "40%",
+    backgroundColor: "#33B6F7",
+    borderRadius: 25,
+    height: 50,
+    alignItems: "center",
+    justifyContent: "center",
+    marginTop: 25,
+    marginBottom: 8,
+  },
+  signupBtn: {
+    width: "40%",
+    backgroundColor: "#59F66E",
+    borderRadius: 25,
+    height: 50,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+});
 
-export default LoginScreen;
\ No newline at end of file
+export default LoginScreen;

mobile/Screens/registrationScreen.js

-import React, {Component} from 'react';
-import { StyleSheet, Text, View, Button, TextInput } from 'react-native';
+import React, { Component } from "react";
+import {
+  StyleSheet,
+  Text,
+  View,
+  Button,
+  TextInput,
+  TouchableOpacity,
+} from "react-native";
 
 class RegistrationScreen extends Component {
-    constructor(props) {
-        super(props);
-        this.state = {
-          username: "",
-          password: ""
-        };
-      }
-
-    submitRegistration() {
-
-        //here we post the credentials to the signup route in the server
-        //and we wait for the response
-        fetch('http://192.168.178.92:3000/signup', {
-        method: 'POST',
-        headers: {
-            'Content-Type': 'application/json',
-        },
-        body: JSON.stringify({
-            username : this.state.username,
-            password : this.state.password
-        }),
-        })
-        .then(res =>{
-        if (res.status !== 200){
-            alert('Invalid username');
-        }
-        else{
-            alert('User registered');
-            this.props.navigation.navigate('Login');
-        }
-        })
+  constructor(props) {
+    super(props);
+    this.state = {
+      username: "",
+      password: "",
+    };
+  }
 
-        this.setState({ username: "" });
-        this.setState({ password: "" });
-    }
+  submitRegistration() {
+    //here we post the credentials to the signup route in the server
+    //and we wait for the response
+    fetch("http://192.168.178.92:3000/signup", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({
+        username: this.state.username,
+        password: this.state.password,
+      }),
+    }).then((res) => {
+      if (res.status !== 200) {
+        alert("Invalid username");
+      } else {
+        alert("User registered");
+        this.props.navigation.navigate("Login");
+      }
+    });
 
-    render() {
+    this.setState({ username: "" });
+    this.setState({ password: "" });
+  }
 
-        return (
-        <View style={styles.container}>
-            <Text>REGISTRATION</Text>
+  render() {
+    return (
+      <View style={styles.container}>
+        <Text>Username</Text>
+        <View style={styles.inputView}>
+          <TextInput
+            style={styles.inputText}
+            placeholder="Username"
+            autoCorrect={false}
+            value={this.state.username}
+            onChangeText={(username) => {
+              this.setState({ username });
+            }}
+          />
+        </View>
 
-            <TextInput
-            style={styles.TextInput}
-            placeholder = "Username"
-            autoCorrect = {false}
-            value = {this.state.username}
-            onChangeText = {username => {
-                this.setState({ username });
-              }}
-            />
-            
+        <Text>Password</Text>
+        <View style={styles.inputView}>
+          <TextInput
+            style={styles.inputText}
+            placeholder="Password"
+            autoCorrect={false}
+            secureTextEntry={true}
+            value={this.state.password}
+            onChangeText={(password) => {
+              this.setState({ password });
+            }}
+          />
+        </View>
 
-            <TextInput
-            style={styles.TextInput}
+        <Text>Repeat password</Text>
+        <View style={styles.inputView}>
+          <TextInput
+            style={styles.inputText}
             placeholder="Password"
             autoCorrect={false}
             secureTextEntry={true}
-            value = {this.state.password}
-            onChangeText = {password => {
-                this.setState({ password });
-              }}
-            />
+            value={this.state.password}
+            onChangeText={(password) => {
+              this.setState({ password });
+            }}
+          />
+        </View>
+
+        <TouchableOpacity
+          style={styles.signupBtn}
+          onPress={(e) => {
+            this.props.navigation.setOptions({ title: "User registered!" });
+            this.submitRegistration();
+          }}
+        >
+          <Text>Sign up</Text>
+        </TouchableOpacity>
 
-            <Button
-            title="Register"
-            onPress={() =>
-                this.submitRegistration()
-              }
-            />
-            {/* this will be the button for the registration page */}
-            <Button
-            title="Go to Login"
-            onPress={() =>
-                this.props.navigation.navigate('Login')
-            }
-            />
-          </View>
-        );
-    }
+        <TouchableOpacity
+          style={styles.loginBtn}
+          onPress={() => this.props.navigation.navigate("Login")}
+        >
+          <Text>Go to login</Text>
+        </TouchableOpacity>
+      </View>
+    );
+  }
 }
 
 // ...
 const styles = StyleSheet.create({
-    container: {
-      flex: 1,
-      backgroundColor: '#fff',
-      alignItems: 'center',
-      justifyContent: 'center',
-    },
-    TextInput: {
-      height: 40,
-      width: 200,
-      borderWidth: 2,
-      padding:10
-    }
-  });
+  container: {
+    flex: 1,
+    backgroundColor: "#fff",
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  logo: {
+    fontWeight: "bold",
+    fontSize: 50,
+    color: "#fb5b5a",
+    marginBottom: 40,
+  },
+  inputView: {
+    width: "80%",
+    backgroundColor: "#90EAFC",
+    borderRadius: 25,
+    height: 50,
+    marginBottom: 15,
+    justifyContent: "center",
+    padding: 20,
+  },
+  inputText: {
+    height: 50,
+    color: "white",
+  },
+  loginBtn: {
+    width: "40%",
+    backgroundColor: "#59F66E",
+    borderRadius: 25,
+    height: 50,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  signupBtn: {
+    width: "40%",
+    backgroundColor: "#33B6F7",
+    borderRadius: 25,
+    height: 50,
+    alignItems: "center",
+    justifyContent: "center",
+    marginTop: 25,
+    marginBottom: 8,
+  },
+});
 
-export default RegistrationScreen;
\ No newline at end of file
+export default RegistrationScreen;