Merge pull request #29 from esteemapp/redesign/login

Redesign/login

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/components/formInput/view/formInputStyles.js

@@ -5,7 +5,7 @@ export default EStyleSheet.create({
     borderTopLeftRadius: 8,
     borderTopRightRadius: 8,
     marginHorizontal: 30,
-    marginVertical: 20,
+    marginVertical: 10,
     flexDirection: "row",
     backgroundColor: "#f5f5f5",
     height: 60,

src/components/informationArea/view/informationAreaStyles.js

@@ -5,7 +5,7 @@ export default EStyleSheet.create({
     flexDirection: "row",
     paddingLeft: 50,
     paddingRight: 32,
-    marginTop: 10,
+    marginTop: 20,
   },
   infoIcon: {
     flex: 0.125,

src/components/loginHeader/view/loginHeaderView.js

@@ -26,7 +26,7 @@ class LoginHeaderView extends Component {
   // Component Functions
 
   render() {
-    const { description, title } = this.props;
+    const { description, title, onPress, isKeyboardOpen } = this.props;
 
     return (
       <View styles={styles.container}>
@@ -36,21 +36,23 @@ class LoginHeaderView extends Component {
             source={require("../../../assets/esteem.png")}
           />
           <View style={styles.headerButton}>
-            <GreetingHeaderButton text="Sign up" />
+            <GreetingHeaderButton onPress={onPress} text="Sign up" />
           </View>
         </View>
-        <View style={styles.body}>
-          <View style={styles.titleText}>
-            <Text style={styles.title}>{title}</Text>
-            <Text style={styles.description}>{description}</Text>
+        {!isKeyboardOpen && (
+          <View style={styles.body}>
+            <View style={styles.titleText}>
+              <Text style={styles.title}>{title}</Text>
+              <Text style={styles.description}>{description}</Text>
+            </View>
+            <View style={{ flex: 0.7 }}>
+              <Image
+                style={styles.mascot}
+                source={require("../../../assets/love_mascot.png")}
+              />
+            </View>
           </View>
-          <View style={{ flex: 0.7 }}>
-            <Image
-              style={styles.mascot}
-              source={require("../../../assets/love_mascot.png")}
-            />
-          </View>
-        </View>
+        )}
         <LineBreak />
       </View>
     );

src/components/mainButton/index.js

@@ -0,0 +1,3 @@
+import MainButton from "./view/mainButtonView";
+
+export { MainButton };

src/components/mainButton/view/mainButtonStyles.js

@@ -0,0 +1,48 @@
+import EStyleSheet from "react-native-extended-stylesheet";
+
+export default EStyleSheet.create({
+  wrapper: {},
+  touchable: {
+    maxWidth: 200,
+    minWidth: 56,
+    height: 56,
+    borderRadius: 30,
+    backgroundColor: "#357ce6",
+    flexDirection: "row",
+    margin: 5,
+    shadowOffset: {
+      height: 5,
+    },
+    shadowColor: "#5f5f5fbf",
+    shadowOpacity: 0.3,
+  },
+  icon: {
+    alignSelf: "center",
+    fontSize: 25,
+    marginLeft: 20,
+  },
+  text: {
+    color: "white",
+    fontWeight: "400",
+    alignSelf: "center",
+    fontSize: 14,
+    paddingLeft: 10,
+    paddingRight: 20,
+  },
+  secondText: {
+    fontWeight: "bold",
+  },
+  activityIndicator: {
+    minWidth: 56,
+    height: 56,
+  },
+  body: {
+    flexDirection: "row",
+  },
+  image: {
+    marginLeft: 20,
+    alignSelf: "center",
+    width: 20,
+    height: 20,
+  },
+});

src/components/mainButton/view/mainButtonView.js

@@ -0,0 +1,93 @@
+import React, { Component, Fragment } from "react";
+import {
+  ActivityIndicator,
+  Image,
+  Text,
+  TouchableOpacity,
+  View,
+} from "react-native";
+import Ionicons from "react-native-vector-icons/Ionicons";
+
+// Constants
+
+// Components
+
+// Styles
+import styles from "./mainButtonStyles";
+
+class MainButton extends Component {
+  /* Props
+    * ------------------------------------------------
+    *   @prop { string }     isLoading       - TODO:
+    *   @prop { string }     text              - TODO:
+    *   @prop { boolean }    secondText      - TODO:
+    *   @prop { boolean }    iconColor        - TODO:
+    *   @prop { boolean }    iconName           - TODO:
+    *   @prop { boolean }    isDisable   - TODO:
+    *
+    * 
+    */
+  constructor(props) {
+    super(props);
+
+    this.state = {};
+  }
+
+  // Component Life Cycles
+
+  // Component Functions
+  _handleOnPress = () => {
+    const { onPress, isDisable, source } = this.props;
+
+    onPress && !isDisable && onPress();
+  };
+
+  _getBody = () => {
+    const {
+      isLoading,
+      text,
+      secondText,
+      iconColor,
+      iconName,
+      source,
+    } = this.props;
+
+    if (isLoading) {
+      return (
+        <ActivityIndicator color="white" style={styles.activityIndicator} />
+      );
+    } else if (text) {
+      return (
+        <Fragment>
+          {source ? (
+            <Image source={source} style={styles.image} resizeMode="contain" />
+          ) : (
+            <Ionicons color={iconColor} name={iconName} style={styles.icon} />
+          )}
+          <Text style={styles.text}>
+            {text}
+            {secondText && <Text style={styles.secondText}>{secondText}</Text>}
+          </Text>
+        </Fragment>
+      );
+    }
+    return <Ionicons color={iconColor} name={iconName} style={styles.icon} />;
+  };
+
+  render() {
+    const { wrapperStyle, isDisable } = this.props;
+
+    return (
+      <View style={wrapperStyle}>
+        <TouchableOpacity
+          onPress={() => this._handleOnPress()}
+          style={styles.touchable}
+        >
+          <View style={styles.body}>{this._getBody()}</View>
+        </TouchableOpacity>
+      </View>
+    );
+  }
+}
+
+export default MainButton;

src/components/tabBar/view/tabBarView.js

@@ -1,151 +1,143 @@
 import React, { Component } from "react";
 import {
-    Text,
-    View,
-    Animated,
-    TouchableNativeFeedback,
-    TouchableOpacity,
-    Platform,
-    Dimensions,
+  Text,
+  View,
+  Animated,
+  TouchableNativeFeedback,
+  TouchableOpacity,
+  Platform,
+  Dimensions,
 } from "react-native";
 
 // Styles
 import styles from "./tabBarStyles";
 
 export default class TabBar extends Component {
-    /* Props
+  /* Props
     * ------------------------------------------------ TODO: Fill fallowlines
     *   @prop { type }    name            - Description.
     *   @prop { type }    name            - Description.
     * 
     */
 
-    constructor(props) {
-        super(props);
+  constructor(props) {
+    super(props);
 
-        this.state = {};
-    }
+    this.state = {};
+  }
 
-    _renderTab = (name, page, isTabActive, onPressHandler) => {
-        const { activeColor, inactiveColor } = this.props;
-        const textColor = isTabActive ? activeColor : inactiveColor;
-        const fontWeight = isTabActive ? "bold" : "normal";
-        const Button = Platform.OS == "ios" ? ButtonIos : ButtonAndroid;
-        // TODO: make generic component!!
+  _renderTab = (name, page, isTabActive, onPressHandler) => {
+    const { activeColor, inactiveColor } = this.props;
+    const textColor = isTabActive ? activeColor : inactiveColor;
+    const fontWeight = isTabActive ? "bold" : "normal";
+    const Button = Platform.OS == "ios" ? ButtonIos : ButtonAndroid;
+    // TODO: make generic component!!
 
-        return (
-            <Button
-                style={styles.tabButton}
-                key={name}
-                accessible={true}
-                accessibilityLabel={name}
-                accessibilityTraits="button"
-                onPress={() => onPressHandler(page)}
-            >
-                <View style={styles.tab}>
-                    <Text style={[{ color: textColor, fontWeight }]}>
-                        {name}
-                    </Text>
-                </View>
-            </Button>
-        );
+    return (
+      <Button
+        style={styles.tabButton}
+        key={name}
+        accessible={true}
+        accessibilityLabel={name}
+        accessibilityTraits="button"
+        onPress={() => onPressHandler(page)}
+      >
+        <View style={styles.tab}>
+          <Text style={[{ color: textColor, fontWeight }]}>{name}</Text>
+        </View>
+      </Button>
+    );
+  };
+
+  _renderUnderline = () => {
+    const {
+      activeColor,
+      tabs,
+      tabUnderlineDefaultWidth,
+      tabUnderlineScaleX,
+      scrollValue,
+      underlineStyle,
+    } = this.props;
+
+    const containerWidth = Dimensions.get("window").width;
+    const numberOfTabs = tabs.length;
+    const underlineWidth =
+      tabUnderlineDefaultWidth || containerWidth / (numberOfTabs * 2);
+    const scale = tabUnderlineScaleX || 2;
+    const deLen = (containerWidth / numberOfTabs - underlineWidth) / 2;
+    const tabUnderlineStyle = {
+      position: "absolute",
+      width: underlineWidth,
+      height: 2,
+      borderRadius: 2,
+      backgroundColor: activeColor,
+      bottom: 0,
+      left: deLen,
     };
 
-    _renderUnderline = () => {
-        const {
-            activeColor,
-            tabs,
-            tabUnderlineDefaultWidth,
-            tabUnderlineScaleX,
-            scrollValue,
-            underlineStyle,
-        } = this.props;
+    const translateX = scrollValue.interpolate({
+      inputRange: [0, 1],
+      outputRange: [0, containerWidth / numberOfTabs],
+    });
 
-        const containerWidth = Dimensions.get("window").width;
-        const numberOfTabs = tabs.length;
-        const underlineWidth =
-            tabUnderlineDefaultWidth || containerWidth / (numberOfTabs * 2);
-        const scale = tabUnderlineScaleX || 2;
-        const deLen = (containerWidth / numberOfTabs - underlineWidth) / 2;
-        const tabUnderlineStyle = {
-            position: "absolute",
-            width: underlineWidth,
-            height: 2,
-            borderRadius: 2,
-            backgroundColor: activeColor,
-            bottom: 0,
-            left: deLen,
-        };
+    const scaleValue = defaultScale => {
+      const number = 4;
+      const arr = new Array(number * 2);
 
-        const translateX = scrollValue.interpolate({
-            inputRange: [0, 1],
-            outputRange: [0, containerWidth / numberOfTabs],
-        });
-
-        const scaleValue = defaultScale => {
-            const number = 4;
-            const arr = new Array(number * 2);
-
-            return arr.fill(0).reduce(
-                function(pre, cur, idx) {
-                    idx == 0
-                        ? pre.inputRange.push(cur)
-                        : pre.inputRange.push(pre.inputRange[idx - 1] + 0.5);
-                    idx % 2
-                        ? pre.outputRange.push(defaultScale)
-                        : pre.outputRange.push(1);
-                    return pre;
-                },
-                { inputRange: [], outputRange: [] }
-            );
-        };
-
-        const scaleX = scrollValue.interpolate(scaleValue(scale));
-
-        return (
-            <Animated.View
-                style={[
-                    tabUnderlineStyle,
-                    {
-                        transform: [{ translateX }, { scaleX }],
-                    },
-                    underlineStyle,
-                ]}
-            />
-        );
+      return arr.fill(0).reduce(
+        function(pre, cur, idx) {
+          idx == 0
+            ? pre.inputRange.push(cur)
+            : pre.inputRange.push(pre.inputRange[idx - 1] + 0.5);
+          idx % 2
+            ? pre.outputRange.push(defaultScale)
+            : pre.outputRange.push(1);
+          return pre;
+        },
+        { inputRange: [], outputRange: [] }
+      );
     };
 
-    render() {
-        const { activeTab, backgroundColor, goToPage, style } = this.props;
+    const scaleX = scrollValue.interpolate(scaleValue(scale));
 
-        return (
-            <View
-                style={[
-                    styles.tabs,
-                    { backgroundColor: backgroundColor },
-                    style,
-                ]}
-            >
-                {this.props.tabs.map((name, page) => {
-                    const isTabActive = activeTab === page;
-                    return this._renderTab(name, page, isTabActive, goToPage);
-                })}
-                {this._renderUnderline()}
-            </View>
-        );
-    }
+    return (
+      <Animated.View
+        style={[
+          tabUnderlineStyle,
+          {
+            transform: [{ translateX }, { scaleX }],
+          },
+          underlineStyle,
+        ]}
+      />
+    );
+  };
+
+  render() {
+    const { activeTab, backgroundColor, goToPage, style } = this.props;
+
+    return (
+      <View style={[styles.tabs, { backgroundColor: backgroundColor }, style]}>
+        {this.props.tabs.map((name, page) => {
+          const isTabActive = activeTab === page;
+          return this._renderTab(name, page, isTabActive, goToPage);
+        })}
+        {this._renderUnderline()}
+      </View>
+    );
+  }
 }
 
 const ButtonAndroid = props => (
-    <TouchableNativeFeedback
-        delayPressIn={0}
-        background={TouchableNativeFeedback.SelectableBackground()}
-        {...props}
-    >
-        {props.children}
-    </TouchableNativeFeedback>
+  <TouchableNativeFeedback
+    delayPressIn={0}
+    background={TouchableNativeFeedback.SelectableBackground()}
+    {...props}
+  >
+    {props.children}
+  </TouchableNativeFeedback>
 );
 
 const ButtonIos = props => (
-    <TouchableOpacity {...props}>{props.children}</TouchableOpacity>
+  <TouchableOpacity {...props}>{props.children}</TouchableOpacity>
 );

src/screens/login/screen/loginScreen.js

@@ -1,68 +1,26 @@
 import React, { Component } from "react";
-import {
-  View,
-  ActivityIndicator,
-  Text,
-  Image,
-  TouchableOpacity,
-  TextInput,
-  BackHandler,
-  Linking,
-  StatusBar,
-} from "react-native";
-
-import { Navigation } from "react-native-navigation";
-import Ionicons from "react-native-vector-icons/Ionicons";
-import FastImage from "react-native-fast-image";
-
-import { TabBar } from "../../../components/tabBar";
-import { LoginHeader } from "../../../components/loginHeader";
-import { FormInput } from "../../../components/formInput";
-import { InformationArea } from "../../../components/informationArea";
+import { View, BackHandler, Linking, StatusBar } from "react-native";
+import { KeyboardAwareScrollView } from "react-native-keyboard-aware-scroll-view";
 import ScrollableTabView from "@esteemapp/react-native-scrollable-tab-view";
+
+// Internal Components
+import { FormInput } from "../../../components/formInput";
+import { GreetingHeaderButton } from "../../../components/buttons";
+import { InformationArea } from "../../../components/informationArea";
 import { Login } from "../../../providers/steem/auth";
-
+import { LoginHeader } from "../../../components/loginHeader";
+import { MainButton } from "../../../components/mainButton";
+import { Navigation } from "react-native-navigation";
+import { TabBar } from "../../../components/tabBar";
 import { addNewAccount } from "../../../redux/actions/accountAction";
-
-import { lookupAccounts } from "../../../providers/steem/dsteem";
 import { goToAuthScreens } from "../../../navigation";
+import { lookupAccounts } from "../../../providers/steem/dsteem";
+import STEEM_CONNECT_LOGO from "../../../assets/steem_connect.png";
 
 // Styles
 import styles from "./loginStyles";
 
 class LoginScreen extends Component {
-  static get options() {
-    return {
-      _statusBar: {
-        visible: true,
-        drawBehind: false,
-      },
-      topBar: {
-        animate: true,
-        hideOnScroll: false,
-        drawBehind: false,
-        noBorder: true,
-        visible: true,
-        elevation: 0,
-        leftButtons: {},
-        rightButtons: [
-          {
-            id: "signup",
-            text: "Sign Up",
-            color: "#a7adaf",
-            marginRight: 50,
-          },
-        ],
-      },
-      layout: {
-        backgroundColor: "#f5fcff",
-      },
-      bottomTabs: {
-        visible: false,
-        drawBehind: true,
-      },
-    };
-  }
   constructor(props) {
     super(props);
     Navigation.events().bindComponent(this);
@@ -72,6 +30,7 @@ class LoginScreen extends Component {
       password: "",
       isLoading: false,
       isUsernameValid: true,
+      keyboardIsOpen: false,
     };
   }
 
@@ -127,15 +86,13 @@ class LoginScreen extends Component {
     this.setState({ password: value });
   };
 
-  navigationButtonPressed({ buttonId }) {
-    if (buttonId === "signup") {
-      Linking.openURL("https://signup.steemit.com/?ref=esteem").catch(err =>
-        console.error("An error occurred", err)
-      );
-    }
-  }
+  _handleSignUp = () => {
+    Linking.openURL("https://signup.steemit.com/?ref=esteem").catch(err =>
+      console.error("An error occurred", err)
+    );
+  };
 
-  loginwithSc2 = () => {
+  _loginwithSc2 = () => {
     Navigation.push(this.props.componentId, {
       component: {
         name: "navigation.eSteem.SteemConnect",
@@ -152,170 +109,88 @@ class LoginScreen extends Component {
   };
 
   render() {
+    const { isLoading, username, isUsernameValid, keyboardIsOpen } = this.state;
     return (
       <View style={{ flex: 1 }}>
         <StatusBar hidden translucent />
         <LoginHeader
+          isKeyboardOpen={keyboardIsOpen}
           title="Sign in"
           description="To get all the benefits using eSteem"
+          onPress={() => this._handleSignUp()}
         />
-        <ScrollableTabView
-          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={this.state.isUsernameValid}
-              onChange={value => this.handleUsername(value)}
-              placeholder="Username"
-              isEditable
-              type="username"
-              isFirstImage
-              value={this.state.username}
-            />
-            <FormInput
-              rightIconName="md-lock"
-              leftIconName="md-close-circle"
-              isValid={this.state.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"
-            />
-            <View style={{ flexDirection: "row", margin: 30 }}>
-              <View style={{ flex: 0.6 }}>
-                <TouchableOpacity
-                  onPress={goToAuthScreens}
-                  style={{
-                    alignContent: "center",
-                    padding: "9%",
-                  }}
-                >
-                  <Text
-                    style={{
-                      color: "#788187",
-                      alignSelf: "center",
-                      fontWeight: "bold",
-                    }}
-                  >
-                    Cancel
-                  </Text>
-                </TouchableOpacity>
-              </View>
-              <TouchableOpacity
+                iconName="ios-information-circle-outline"
+              />
+              {/* It will remove */}
+              <GreetingHeaderButton onPress={goToAuthScreens} text="cancel" />
+              <MainButton
+                wrapperStyle={styles.mainButtonWrapper}
                 onPress={this._handleOnPressLogin}
-                style={{
-                  flex: 0.4,
-                  width: 100,
-                  height: 50,
-                  borderRadius: 30,
-                  backgroundColor: "#357ce6",
-                  flexDirection: "row",
-                }}
-              >
-                {!this.state.isLoading ? (
-                  <View
-                    style={{
-                      flex: 1,
-                      flexDirection: "row",
-                    }}
-                  >
-                    <Ionicons
-                      color="white"
-                      name="md-person"
-                      style={{
-                        alignSelf: "center",
-                        fontSize: 25,
-                        flex: 0.4,
-                        left: 15,
-                      }}
-                    />
-                    <Text
-                      style={{
-                        color: "white",
-                        fontWeight: "600",
-                        alignSelf: "center",
-                        fontSize: 16,
-                        flex: 0.6,
-                      }}
-                    >
-                      LOGIN
-                    </Text>
-                  </View>
-                ) : (
-                  <ActivityIndicator
-                    color="white"
-                    style={{ alignSelf: "center", flex: 1 }}
-                  />
-                )}
-              </TouchableOpacity>
+                iconName="md-person"
+                iconColor="white"
+                text="LOGIN"
+                isLoading={isLoading}
+              />
             </View>
-          </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"
-            />
-            <View
-              style={{
-                alignItems: "flex-end",
-                backgroundColor: "#ffffff",
-              }}
-            >
-              <TouchableOpacity
-                onPress={this.loginwithSc2}
-                style={{
-                  width: 200,
-                  height: 50,
-                  borderRadius: 30,
-                  backgroundColor: "#357ce6",
-                  flexDirection: "row",
-                  margin: 20,
-                }}
-              >
-                <View style={{ flex: 1, flexDirection: "row" }}>
-                  <Ionicons
-                    color="white"
-                    name="md-person"
-                    style={{
-                      alignSelf: "center",
-                      fontSize: 25,
-                      marginHorizontal: 20,
-                    }}
-                  />
-                  <Text
-                    style={{
-                      color: "white",
-                      fontWeight: "400",
-                      alignSelf: "center",
-                      fontSize: 16,
-                    }}
-                  >
-                    steem
-                    <Text style={{ fontWeight: "800" }}>connect</Text>
-                  </Text>
-                </View>
-              </TouchableOpacity>
+            <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>
-          </View>
-        </ScrollableTabView>
+          </ScrollableTabView>
+        </KeyboardAwareScrollView>
       </View>
     );
   }

src/screens/login/screen/loginStyles.js

@@ -36,9 +36,18 @@ 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",
+    right: 24,
+    bottom: 24,
+    flexDirection: "row",
   },
 });