half-way fix

new-gui/.expo/packager-info.json

@@ -1,9 +1,10 @@
 {
-  "expoServerPort": 19000,
-  "expoServerNgrokUrl": "https://mg-3p3.anonymous.new-gui.exp.direct",
-  "packagerNgrokUrl": "https://packager.mg-3p3.anonymous.new-gui.exp.direct",
-  "ngrokPid": 16404,
+  "expoServerPort": null,
+  "expoServerNgrokUrl": null,
+  "packagerNgrokUrl": null,
+  "ngrokPid": null,
   "devToolsPort": 19002,
-  "packagerPort": 19001,
-  "packagerPid": 8216
+  "packagerPort": null,
+  "packagerPid": null,
+  "webpackServerPort": null
 }

new-gui/.expo/settings.json

@@ -1,7 +1,7 @@
 {
   "hostType": "lan",
   "lanType": "ip",
-  "dev": false,
-  "minify": true,
+  "dev": true,
+  "minify": false,
   "urlRandomness": "mg-3p3"
 }

new-gui/src/commons/serverRequest/index.js

@@ -1,3 +1,3 @@
-//const HOST = "52.39.77.219";
-const HOST = "192.168.1.8";
+const HOST = "52.39.77.219";
+//const HOST = "192.168.1.8";
 export const SERVER_URL = "http://" + HOST + ":8080";

new-gui/src/components/UserInformationPanel/index.js

@@ -1,7 +1,7 @@
 import { mapDispatchToProps, mapStateToProps } from "../../commons/redux";
 import React, { Component } from "react";
 import { KeyboardAvoidingView,Platform,StatusBar,View,SafeAreaView, Text,Alert,
-     SectionList, StyleSheet, TouchableOpacity,Image,TextInput,Dimensions,ImageBackground } from "react-native";
+     SectionList, StyleSheet, TouchableOpacity,Image,TextInput,Dimensions,ImageBackground,Keyboard,Animated } from "react-native";
 import { connect } from "react-redux";
 import { withNavigation } from "react-navigation";
 import { Ionicons } from '@expo/vector-icons';
@@ -13,14 +13,42 @@ import { CheckBox,Input, Button } from "react-native-elements";
 const FETCH_URL  = SERVER_URL + "/user/fetch-user";
 const UPDATE_URL = SERVER_URL + "/user/update-user";
 
-const scaleAvatar=0.3
+const scaleAvatar=0.15
 
 class EditableLabel extends Component{
 
+    constructor(props){
+        super(props);
+        this.keyboardHeight = new Animated.Value(0);
+    }
+
+
     componentWillMount(){
         this.setState({editable:false,myText:this.props.value});
+        this.keyboardDidShowSub = Keyboard.addListener('keyboardDidShow', this.keyboardDidShow);
+        this.keyboardDidHideSub = Keyboard.addListener('keyboardDidHide', this.keyboardDidHide);
     }
 
+    componentWillUnmount() {
+        this.keyboardDidShowSub.remove();
+        this.keyboardDidHideSub.remove();
+    }
+
+    keyboardDidShow = (event) => {
+        Animated.timing(this.keyboardHeight, {
+          duration: 0.1,
+          toValue: event.endCoordinates.height,
+        }).start();
+    };
+
+    keyboardDidHide = (event) => {
+        Animated.timing(this.keyboardHeight, {
+          duration: 0.1,
+          toValue: 0,
+        }).start();
+    };
+
+
     renderInput()
     {
         if(this.props.type === "number" || this.props.type === "string")
@@ -252,7 +280,6 @@ class UserInformationComponent extends Component {
                 <Image style={styles.avatarImage}  source={require('../../images/person.png')}></Image>
                 </Svg>
                 <Text style={styles.userName}>{this.state.userInfo.username}</Text>
-                <KeyboardAvoidingView style={{flex:1}} behavior = 'position' enabled>
                 <SectionList
                     stickySectionHeadersEnabled={true}
                     renderItem={({item, index, section}) => {
@@ -295,7 +322,6 @@ class UserInformationComponent extends Component {
                     ]}
                     keyExtractor={(item, index) => item + index}
                 />
-                </KeyboardAvoidingView>
             </View>
         );
         else

new-gui/src/components/UserLoginPanel/index.js

@@ -2,7 +2,7 @@ import React, { Component } from 'react';
 import {
   StyleSheet, Text, View, TextInput, TouchableOpacity, 
   Alert, TouchableWithoutFeedback, Keyboard, AsyncStorage,
-  KeyboardAvoidingView
+  KeyboardAvoidingView,Animated
 } from 'react-native';
 
 import { Input } from "react-native-elements";
@@ -24,6 +24,37 @@ class UserLoginPanel extends Component {
         header: null
     }
 
+    constructor(props){
+        super(props);
+        this.keyboardHeight = new Animated.Value(0);
+    }
+
+    componentWillMount () {
+        this.keyboardDidShowSub = Keyboard.addListener('keyboardDidShow', this.keyboardDidShow);
+        this.keyboardDidHideSub = Keyboard.addListener('keyboardDidHide', this.keyboardDidHide);
+    }
+
+    componentWillUnmount() {
+        this.keyboardDidShowSub.remove();
+        this.keyboardDidHideSub.remove();
+    }
+
+    keyboardDidShow = (event) => {
+          Animated.timing(this.keyboardHeight, {
+            duration: 0.1,
+            toValue: event.endCoordinates.height,
+          }).start();
+      };
+
+      keyboardDidHide = (event) => {
+          Animated.timing(this.keyboardHeight, {
+            duration: 0.1,
+            toValue: 0,
+          }).start();
+      };
+
+
+
     // save user data in frontend storage
     _storeTokenData = async(token) => {
         try {
@@ -74,8 +105,7 @@ class UserLoginPanel extends Component {
 	render(){
 		return(
             <TouchableWithoutFeedback onPress={()=> Keyboard.dismiss()}>
-                <View style={styles.container}>
-                <KeyboardAvoidingView style={{flex:1}} behavior="padding" enabled>
+                <Animated.View style={[styles.container,{paddingBottom: this.keyboardHeight}]}>
                     <Logo/>
                     <View style={styles.formContainer}>
                         <Input
@@ -109,8 +139,7 @@ class UserLoginPanel extends Component {
                             <Text style={styles.signupButton}>Signup</Text>
                         </TouchableOpacity>
                     </View>
-                    </KeyboardAvoidingView>
-                </View>       
+                    </Animated.View> 
             </TouchableWithoutFeedback>
 		);
 	}

new-gui/src/components/UserSignupPanel/index.js

@@ -1,5 +1,5 @@
 import React, { Component } from "react";
-import { View, StyleSheet, ScrollView, Picker, Alert, AsyncStorage,KeyboardAvoidingView } from "react-native";
+import { Keyboard,View, StyleSheet, ScrollView, Picker, Alert, AsyncStorage, Animated } from "react-native";
 
 import { Button, CheckBox, Input, Text } from "react-native-elements";
 
@@ -9,6 +9,37 @@ const SIGNUP_URL = SERVER_URL + "/sign-up";
 
 class UserSignupPanel extends Component {
 
+    constructor(props){
+        super(props);
+        this.keyboardHeight = new Animated.Value(0);
+    }
+
+    componentWillMount () {
+        this.keyboardDidShowSub = Keyboard.addListener('keyboardDidShow', this.keyboardDidShow);
+        this.keyboardDidHideSub = Keyboard.addListener('keyboardDidHide', this.keyboardDidHide);
+    }
+
+    componentWillUnmount() {
+        this.keyboardDidShowSub.remove();
+        this.keyboardDidHideSub.remove();
+    }
+
+    keyboardDidShow = (event) => {
+        Animated.timing(this.keyboardHeight, {
+          duration: 0.1,
+          toValue: event.endCoordinates.height,
+        }).start();
+    };
+
+    keyboardDidHide = (event) => {
+        Animated.timing(this.keyboardHeight, {
+          duration: 0.1,
+          toValue: 0,
+        }).start();
+    };
+
+
+
     state = {
         username : "",
         usernameError : "",
@@ -137,7 +168,7 @@ class UserSignupPanel extends Component {
 
     render() {
         return (
-            <KeyboardAvoidingView style={{flex:1}} behavior="position">
+            <Animated.View style={{paddingBottom: this.keyboardHeight}}>
             <ScrollView style={styles.scrollViewContainer}>
                 <View style={styles.sectionView}>
                     <Text h4
@@ -318,7 +349,7 @@ class UserSignupPanel extends Component {
                     onPress={() => this.onSubmitSignUpForm()}
                 ></Button>
             </ScrollView>
-            </KeyboardAvoidingView>
+            </Animated.View>
         );
     }
 }