changed png added aware scroll view && created keyboard logic if it open

package-lock.json

@@ -7710,6 +7710,15 @@
             "graceful-fs": "^4.1.2",
             "jsonfile": "^2.1.0"
           }
+        },
+        "react-native-keyboard-aware-scroll-view": {
+          "version": "0.5.0",
+          "resolved": "https://registry.npmjs.org/react-native-keyboard-aware-scroll-view/-/react-native-keyboard-aware-scroll-view-0.5.0.tgz",
+          "integrity": "sha512-nGXsACZBCiWuwRrZy+UjiSJqb4tZ/6ePHUSY8M+09g4VfNm/ogvvWpwBa6B999NZ6DwhZTKBjVWeZxX9XG8bbQ==",
+          "requires": {
+            "prop-types": "^15.6.0",
+            "react-native-iphone-x-helper": "^1.0.1"
+          }
         }
       }
     },
@@ -8867,17 +8876,17 @@
       }
     },
     "react-native-iphone-x-helper": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/react-native-iphone-x-helper/-/react-native-iphone-x-helper-1.0.3.tgz",
-      "integrity": "sha512-QHzpx4fv9u30VVU1DMgotiZsUB+m4BRjypca2rOczyj3cZBny5I+QDplrpFIBhzsa1iADNkziWa7kInzmKs00Q=="
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/react-native-iphone-x-helper/-/react-native-iphone-x-helper-1.2.0.tgz",
+      "integrity": "sha512-xIeTo4s77wwKgBZLVRIZC9tM9/PkXS46Ul76NXmvmixEb3ZwqGdQesR3zRiLMOoIdfOURB6N9bba9po7+x9Bag=="
     },
     "react-native-keyboard-aware-scroll-view": {
-      "version": "0.5.0",
-      "resolved": "https://registry.npmjs.org/react-native-keyboard-aware-scroll-view/-/react-native-keyboard-aware-scroll-view-0.5.0.tgz",
-      "integrity": "sha512-nGXsACZBCiWuwRrZy+UjiSJqb4tZ/6ePHUSY8M+09g4VfNm/ogvvWpwBa6B999NZ6DwhZTKBjVWeZxX9XG8bbQ==",
+      "version": "0.7.2",
+      "resolved": "https://registry.npmjs.org/react-native-keyboard-aware-scroll-view/-/react-native-keyboard-aware-scroll-view-0.7.2.tgz",
+      "integrity": "sha512-FCVKAmM5jHwbWZFW/zUOhid18OoSGcbyx2jGk+q6eVjjtj+RPomeqX0aAHf2ALXYJ1BuC5+OtXhFA/hp8ombcQ==",
       "requires": {
-        "prop-types": "^15.6.0",
-        "react-native-iphone-x-helper": "^1.0.1"
+        "prop-types": "^15.6.2",
+        "react-native-iphone-x-helper": "^1.0.3"
       }
     },
     "react-native-lightbox": {

package.json

@@ -25,6 +25,7 @@
     "react-native-extended-stylesheet": "^0.10.0",
     "react-native-fast-image": "^4.0.14",
     "react-native-html-renderer": "^1.0.0",
+    "react-native-keyboard-aware-scroll-view": "^0.7.2",
     "react-native-markdown-editor": "^1.0.1",
     "react-native-modal": "^6.5.0",
     "react-native-modal-popover": "0.0.10",

src/components/buttons/views/greetingHeaderButtonView.js

@@ -1,5 +1,5 @@
 import React, { Fragment } from "react";
-import { TouchableWithoutFeedback, Text } from "react-native";
+import { TouchableWithoutFeedback, Text, View } from "react-native";
 
 import styles from "./greetingHeaderButtonStyles";
 
@@ -9,7 +9,9 @@ const GreetingHeaderButtonView = ({ text, onPress, style }) => (
       style={[styles.button, style]}
       onPress={() => onPress && onPress()}
     >
-      <Text style={styles.buttonText}>{text}</Text>
+      <View>
+        <Text style={styles.buttonText}>{text}</Text>
+      </View>
     </TouchableWithoutFeedback>
   </Fragment>
 );

src/screens/login/screen/loginScreen.js

@@ -14,7 +14,7 @@ import { addNewAccount } from "../../../redux/actions/accountAction";
 import { goToAuthScreens } from "../../../navigation";
 import { lookupAccounts } from "../../../providers/steem/dsteem";
 import STEEM_CONNECT_LOGO from "../../../assets/steem_connect.png";
-
+import { KeyboardAwareScrollView } from "react-native-keyboard-aware-scroll-view";
 // Styles
 import styles from "./loginStyles";
 
@@ -60,6 +60,7 @@ class LoginScreen extends Component {
       password: "",
       isLoading: false,
       isUsernameValid: true,
+      keyboardIsOpen: false,
     };
   }
 
@@ -138,83 +139,88 @@ class LoginScreen extends Component {
   };
 
   render() {
-    const { isLoading, username, isUsernameValid } = this.state;
+    const { isLoading, username, isUsernameValid, keyboardIsOpen } = this.state;
     return (
       <View style={{ flex: 1 }}>
         <StatusBar hidden translucent />
         <LoginHeader
-          isKeyboardOpen={false}
+          isKeyboardOpen={keyboardIsOpen}
           title="Sign in"
           description="To get all the benefits using eSteem"
           onPress={() => this._handleSignUp()}
         />
-        <ScrollableTabView
-          locked={isLoading}
-          style={styles.tabView}
-          renderTabBar={() => (
-            <TabBar
-              style={styles.tabbar}
-              tabUnderlineDefaultWidth={100} // default containerWidth / (numberOfTabs * 4)
-              tabUnderlineScaleX={2} // default 3
-              activeColor={"#357ce6"}
-              inactiveColor={"#222"}
-            />
-          )}
+        <KeyboardAwareScrollView
+          onKeyboardWillShow={() => this.setState({ keyboardIsOpen: true })}
+          onKeyboardWillHide={() => this.setState({ keyboardIsOpen: false })}
         >
-          <View tabLabel="Sign in" style={styles.tabbarItem}>
-            <FormInput
-              rightIconName="md-at"
-              leftIconName="md-close-circle"
-              isValid={isUsernameValid}
-              onChange={value => this.handleUsername(value)}
-              placeholder="Username"
-              isEditable
-              type="username"
-              isFirstImage
-              value={username}
-            />
-            <FormInput
-              rightIconName="md-lock"
-              leftIconName="md-close-circle"
-              isValid={isUsernameValid}
-              onChange={value => this._handleOnPasswordChange(value)}
-              placeholder="Password or WIF"
-              isEditable
-              secureTextEntry
-              type="password"
-            />
-            <InformationArea
-              description="User credentials are kept locally on the device. Credentials are
+          <ScrollableTabView
+            locked={isLoading}
+            style={styles.tabView}
+            renderTabBar={() => (
+              <TabBar
+                style={styles.tabbar}
+                tabUnderlineDefaultWidth={100} // default containerWidth / (numberOfTabs * 4)
+                tabUnderlineScaleX={2} // default 3
+                activeColor={"#357ce6"}
+                inactiveColor={"#222"}
+              />
+            )}
+          >
+            <View tabLabel="Sign in" style={styles.tabbarItem}>
+              <FormInput
+                rightIconName="md-at"
+                leftIconName="md-close-circle"
+                isValid={isUsernameValid}
+                onChange={value => this.handleUsername(value)}
+                placeholder="Username"
+                isEditable
+                type="username"
+                isFirstImage
+                value={username}
+              />
+              <FormInput
+                rightIconName="md-lock"
+                leftIconName="md-close-circle"
+                isValid={isUsernameValid}
+                onChange={value => this._handleOnPasswordChange(value)}
+                placeholder="Password or WIF"
+                isEditable
+                secureTextEntry
+                type="password"
+              />
+              <InformationArea
+                description="User credentials are kept locally on the device. Credentials are
                 removed upon logout!"
-              iconName="ios-information-circle-outline"
-            />
-            {/* It will remove */}
-            <GreetingHeaderButton onPress={goToAuthScreens} text="cancel" />
-            <MainButton
-              wrapperStyle={styles.mainButtonWrapper}
-              onPress={this._handleOnPressLogin}
-              iconName="md-person"
-              iconColor="white"
-              text="LOGIN"
-              isLoading={isLoading}
-            />
-          </View>
-          <View tabLabel="SteemConnect" style={styles.steemConnectTab}>
-            <InformationArea
-              description="If you don't want to keep your password encrypted and saved on your device, you can use Steemconnect."
-              iconName="ios-information-circle-outline"
-            />
+                iconName="ios-information-circle-outline"
+              />
+              {/* It will remove */}
+              <GreetingHeaderButton onPress={goToAuthScreens} text="cancel" />
+              <MainButton
+                wrapperStyle={styles.mainButtonWrapper}
+                onPress={this._handleOnPressLogin}
+                iconName="md-person"
+                iconColor="white"
+                text="LOGIN"
+                isLoading={isLoading}
+              />
+            </View>
+            <View tabLabel="SteemConnect" style={styles.steemConnectTab}>
+              <InformationArea
+                description="If you don't want to keep your password encrypted and saved on your device, you can use Steemconnect."
+                iconName="ios-information-circle-outline"
+              />
 
-            <MainButton
-              wrapperStyle={styles.mainButtonWrapper}
-              onPress={this._loginwithSc2}
-              iconName="md-person"
-              source={STEEM_CONNECT_LOGO}
-              text="steem"
-              secondText="connect"
-            />
-          </View>
-        </ScrollableTabView>
+              <MainButton
+                wrapperStyle={styles.mainButtonWrapper}
+                onPress={this._loginwithSc2}
+                iconName="md-person"
+                source={STEEM_CONNECT_LOGO}
+                text="steem"
+                secondText="connect"
+              />
+            </View>
+          </ScrollableTabView>
+        </KeyboardAwareScrollView>
       </View>
     );
   }

src/screens/login/screen/loginStyles.js

@@ -36,11 +36,13 @@ export default EStyleSheet.create({
     flex: 1,
     backgroundColor: "#ffffff",
     minWidth: "$deviceWidth",
+    height: "$deviceHeight / 1.95",
   },
   steemConnectTab: {
     backgroundColor: "#fff",
     minWidth: "$deviceWidth",
     flex: 1,
+    height: "$deviceHeight / 1.95",
   },
   mainButtonWrapper: {
     position: "absolute",