fix keyboard overlap issue

MobileApp/screens/loginScreen.js

@@ -3,7 +3,7 @@ import { StyleSheet, TextInput, Button, Image, Dimensions, View, Text, ActivityI
 import EditScreenInfo from '../components/EditScreenInfo';
 // import { Text, View } from '../components/Themed';
 import { TouchableOpacity } from 'react-native';
-import { Toast } from 'native-base';
+import { ScrollView, Toast } from 'native-base';
 import { ERROR_TOAST_PROPS } from '../util/util';
 import { screenWidth, styles } from '../util/styles';
 import TTS_logo from '../assets/images/TTS_logo.jpeg'
@@ -31,7 +31,7 @@ const LoginForm = ({ onLogin, navigation }) => {
     }
 
     return (
-        <View>
+        <View >
             <TextInput style={styles.input}
                 defaultValue={username}
                 onChangeText={(e) => {
@@ -64,7 +64,7 @@ const LoginForm = ({ onLogin, navigation }) => {
 
                 onPress={onSubmit}
                 disabled={loading}
-            >{loading ? <ActivityIndicator /> :  <Text style={styles.buttonText}>LOGIN</Text> }
+            >{loading ? <ActivityIndicator /> : <Text style={styles.buttonText}>LOGIN</Text>}
 
             </TouchableOpacity>
         </View>
@@ -74,7 +74,7 @@ const LoginForm = ({ onLogin, navigation }) => {
 
 export const LoginScreen = ({ onLogin, navigation }) => {
     return (
-        <View style={styles.loginScreenContainer}>
+        <ScrollView style={styles.loginScreenContainer}>
             <View style={{ alignContent: 'center', justifyContent: 'center' }}>
                 <Image source={TTS_logo} style={{ height: screenWidth - 30, width: screenWidth - 30, margin: 'auto' }} />
             </View>
@@ -89,15 +89,10 @@ export const LoginScreen = ({ onLogin, navigation }) => {
                 <Text style={{ textAlign: 'center' }}>Don't have an account? </Text>
                 <Text style={{ fontWeight: 'bold', textAlign: 'center', }} onPress={() => navigation.replace('Signup')}>Sign up</Text>
             </View>
-
-            <View style={styles.loginContainer}>
-                {/* r<Image resizeMode="contain" style={styles.logo} source={require('../../components/images/logo-dark-bg.png')} /> */}
-            </View>
-
             <View style={styles.formContainer}>
                 <LoginForm onLogin={onLogin} />
             </View>
-        </View>
+        </ScrollView>
 
     );
 }
\ No newline at end of file

MobileApp/util/styles.jsx

 import { StyleSheet, Dimensions } from "react-native"
 
 export const screenWidth = Dimensions.get('window').width
+export const screenHeight = Dimensions.get('window').height
 
 
 export const PRIMARY_COLOR = '#2f95dc'
@@ -16,7 +17,8 @@ export const styles = StyleSheet.create({
     loginContainer: {
         alignItems: 'center',
         flexGrow: 1,
-        justifyContent: 'center'
+        justifyContent: 'center',
+        backgroundColor: 'blue'
     },
     logo: {
         position: 'absolute',
@@ -25,7 +27,11 @@ export const styles = StyleSheet.create({
     },
     loginScreenContainer: {
         padding: 20,
-        backgroundColor: 'white'
+        backgroundColor: 'white',
+        flex: 1,
+    },
+    formContainer: {
+        // backgroundColor: 'green'
     },
     input: {
         height: 40,