Added numeric keyboard component

.eslintrc.js

@@ -14,7 +14,7 @@ module.exports = {
     },
     plugins: ["react"],
     rules: {
-        indent: ["error", "space"],
+        indent: ["error", 2],
         "linebreak-style": ["error", "unix"],
         quotes: ["error", "double"],
         semi: ["error", "always"],

src/components/buttons/index.js

@@ -1,3 +1,4 @@
 import GreetingHeaderButton from "./views/greetingHeaderButtonView";
+import CircularButton from "./views/circularButtonView";
 
-export { GreetingHeaderButton };
+export { GreetingHeaderButton, CircularButton };

src/components/buttons/views/circularButtonStyles.js

@@ -0,0 +1,18 @@
+import EStyleSheet from "react-native-extended-stylesheet";
+
+export default EStyleSheet.create({
+  button: {
+    width: 60,
+    height: 60,
+    borderRadius: 60 / 2,
+    borderColor: "#357ce6",
+    borderWidth: 1,
+    backgroundColor: "transparent",
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  buttonText: {
+    color: "#357ce6",
+    fontSize: 16,
+  },
+});

src/components/buttons/views/circularButtonView.js

@@ -0,0 +1,15 @@
+import React from "react";
+import { TouchableOpacity, Text } from "react-native";
+
+import styles from "./circularButtonStyles";
+
+const CircularButtonView = ({ text, onPress, style }) => (
+  <TouchableOpacity
+    style={[styles.button, style]}
+    onPress={() => onPress && onPress()}
+  >
+    <Text style={styles.buttonText}>{text}</Text>
+  </TouchableOpacity>
+);
+
+export default CircularButtonView;

src/components/index.js

@@ -4,5 +4,17 @@ import PostCard from "./post-card/postCard";
 import Reply from "./reply/reply";
 import Search from "./search/search";
 import { FormInput } from "./formInput";
+import { CircularButton, GreetingHeaderButton } from "./buttons";
+import { NumericKeyboard } from "./numericKeyboard";
 
-export { Logo, Comment, PostCard, Reply, Search, FormInput };
+export {
+  Logo,
+  Comment,
+  PostCard,
+  Reply,
+  Search,
+  FormInput,
+  CircularButton,
+  GreetingHeaderButton,
+  NumericKeyboard,
+};

src/components/numericKeyboard/index.js

@@ -0,0 +1,3 @@
+import NumericKeyboard from "./views/numericKeyboardView";
+
+export { NumericKeyboard };

src/components/numericKeyboard/views/numericKeyboardStyles.js

@@ -0,0 +1,16 @@
+import EStyleSheet from "react-native-extended-stylesheet";
+
+export default EStyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: "center",
+    justifyContent: "center",
+    marginTop: 20,
+  },
+  buttonGroup: {
+    flex: 1,
+    flexDirection: "row",
+    marginBottom: 15,
+    justifyContent: "space-between",
+  },
+});

src/components/numericKeyboard/views/numericKeyboardView.js

@@ -0,0 +1,57 @@
+import React, { Fragment, Component } from "react";
+import { View } from "react-native";
+
+import { CircularButton } from "../../";
+
+import styles from "./numericKeyboardStyles";
+
+class NumericKeyboard extends Component {
+  /* Props
+    * ------------------------------------------------ TODO: Fill fallowlines
+    *   @prop { type }    name            - Description.
+    *   @prop { type }    name            - Description.
+    * 
+    */
+  constructor(props) {
+    super(props);
+    this.state = {};
+  }
+
+  // Component Life Cycles
+
+  // Component Functions
+
+  render() {
+    return (
+      <View style={styles.container}>
+        <View style={styles.buttonGroup}>
+          <CircularButton text={1} />
+          <CircularButton
+            style={{ marginLeft: 15, marginRight: 15 }}
+            text={2}
+          />
+          <CircularButton text={3} />
+        </View>
+        <View style={styles.buttonGroup}>
+          <CircularButton text={4} />
+          <CircularButton
+            style={{ marginLeft: 15, marginRight: 15 }}
+            text={5}
+          />
+          <CircularButton text={6} />
+        </View>
+        <View style={styles.buttonGroup}>
+          <CircularButton text={7} />
+          <CircularButton
+            style={{ marginLeft: 15, marginRight: 15 }}
+            text={8}
+          />
+          <CircularButton text={9} />
+        </View>
+        <CircularButton text={0} />
+      </View>
+    );
+  }
+}
+
+export default NumericKeyboard;

src/globalStyles.js

@@ -1,47 +1,47 @@
 import EStyleSheet from "react-native-extended-stylesheet";
 
 export default EStyleSheet.create({
-    container: {
-        flex: 1,
-        alignItems: "center",
-        justifyContent: "center",
-    },
-    title: {},
-    text: {
-        fontFamily: "$primaryFont",
-        letterSpacing: "$primaryLatterSpacing",
-    },
-    subTitle: {
-        fontFamily: "$primaryFont",
-        letterSpacing: "$primaryLatterSpacing",
-    },
-    subText: {
-        fontFamily: "$primaryFont",
-        letterSpacing: "$primaryLatterSpacing",
-    },
-    shadow: {
-        shadowOpacity: 0.8,
-        shadowColor: "$shadowColor",
-        shadowOffset: {
-            width: 0,
-            height: 6,
-        },
-    },
-    errorText: {
-        fontFamily: "$primaryFont",
-        letterSpacing: "$primaryLatterSpacing",
-        width: "$deviceWidth / 1.4",
-        fontSize: 10,
-        padding: 5,
-        height: 50,
-        flex: 1,
-        color: "#ff1954",
-        paddingTop: 10,
-        textAlign: "center",
-    },
-    label: {
-        fontFamily: "$primaryFont",
-        letterSpacing: "$primaryLatterSpacing",
-        fontSize: 12,
+  container: {
+    flex: 1,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  title: {},
+  text: {
+    fontFamily: "$primaryFont",
+    letterSpacing: "$primaryLatterSpacing",
+  },
+  subTitle: {
+    fontFamily: "$primaryFont",
+    letterSpacing: "$primaryLatterSpacing",
+  },
+  subText: {
+    fontFamily: "$primaryFont",
+    letterSpacing: "$primaryLatterSpacing",
+  },
+  shadow: {
+    shadowOpacity: 0.8,
+    shadowColor: "$shadowColor",
+    shadowOffset: {
+      width: 0,
+      height: 6,
     },
+  },
+  errorText: {
+    fontFamily: "$primaryFont",
+    letterSpacing: "$primaryLatterSpacing",
+    width: "$deviceWidth / 1.4",
+    fontSize: 10,
+    padding: 5,
+    height: 50,
+    flex: 1,
+    color: "#ff1954",
+    paddingTop: 10,
+    textAlign: "center",
+  },
+  label: {
+    fontFamily: "$primaryFont",
+    letterSpacing: "$primaryLatterSpacing",
+    fontSize: 12,
+  },
 });

src/screens/pinCode/pinCodeScreen.js

@@ -2,96 +2,97 @@ import React from "react";
 import { Text, TouchableOpacity, Animated } from "react-native";
 import { Container, Content, Icon, Item, Input } from "native-base";
 
-import { Logo } from "../../components";
+import { Logo, NumericKeyboard } from "../../components";
 
 import styles from "../../styles/pinCode.styles";
 import globalStyles from "../../globalStyles";
 
 class PinCodeScreen extends React.Component {
-    constructor(props) {
-        super(props);
-        this.state = {
-            showPassword: false,
-            pin: "",
-        };
-    }
-
-    _handleOnChangeInput = text => {
-        const { setPinCode } = this.props;
-        if (text.length === 4) {
-            setPinCode(text);
-            this.setState({ pin: "" });
-        } else {
-            this.setState({ pin: text });
-        }
+  constructor(props) {
+    super(props);
+    this.state = {
+      showPassword: false,
+      pin: "",
     };
+  }
 
-    render() {
-        const test = new Animated.Value(0);
-        const tilt = test.interpolate({
-            inputRange: [0, 0.3, 0.6, 0.9],
-            outputRange: [0, -50, 50, 0],
-        });
-        const pass = [0, 1];
-        return (
-            <Container style={globalStyles.container}>
-                <Content>
-                    <Logo style={styles.logo} />
-                    <Text style={styles.title}>Enter Pin Code</Text>
-                    <Animated.View
-                        style={{
-                            transform: [{ translateX: tilt }],
-                            flexDirection: "row",
-                            alignSelf: "center",
-                        }}
-                    >
-                        {[...Array(4)].map((val, index) => {
-                            if (pass[index] === undefined) {
-                                return (
-                                    <Animated.View
-                                        key={"passwordItem-" + index}
-                                        style={{
-                                            alignItems: "center",
-                                            justifyContent: "center",
-                                            height: 20,
-                                            margin: 5,
-                                            width: 20,
-                                            borderRadius: 20 / 2,
-                                            borderWidth: 1,
-                                            borderColor: "#357ce6",
-                                            backgroundColor: "#fff",
-                                        }}
-                                    />
-                                );
-                            } else {
-                                return (
-                                    <Animated.View
-                                        key={"passwordItem-" + index}
-                                        style={{
-                                            alignItems: "center",
-                                            justifyContent: "center",
-                                            height: 20,
-                                            margin: 5,
-                                            width: 20,
-                                            borderRadius: 20 / 2,
-                                            borderWidth: 1,
-                                            borderColor: "#357ce6",
-                                            backgroundColor: "#357ce6",
-                                        }}
-                                    />
-                                );
-                            }
-                        })}
-                    </Animated.View>
-                    <Item style={styles.input}>
-                        {/* <Input
+  _handleOnChangeInput = text => {
+    const { setPinCode } = this.props;
+    if (text.length === 4) {
+      setPinCode(text);
+      this.setState({ pin: "" });
+    } else {
+      this.setState({ pin: text });
+    }
+  };
+
+  render() {
+    const test = new Animated.Value(0);
+    const tilt = test.interpolate({
+      inputRange: [0, 0.3, 0.6, 0.9],
+      outputRange: [0, -50, 50, 0],
+    });
+    const pass = [0, 1];
+    return (
+      <Container style={globalStyles.container}>
+        <Content>
+          <Logo style={styles.logo} />
+          <Text style={styles.title}>Enter Pin Code</Text>
+          <Animated.View
+            style={{
+              transform: [{ translateX: tilt }],
+              flexDirection: "row",
+              alignSelf: "center",
+            }}
+          >
+            {[...Array(4)].map((val, index) => {
+              if (pass[index] === undefined) {
+                return (
+                  <Animated.View
+                    key={"passwordItem-" + index}
+                    style={{
+                      alignItems: "center",
+                      justifyContent: "center",
+                      height: 20,
+                      margin: 5,
+                      width: 20,
+                      borderRadius: 20 / 2,
+                      borderWidth: 1,
+                      borderColor: "#357ce6",
+                      backgroundColor: "#fff",
+                    }}
+                  />
+                );
+              } else {
+                return (
+                  <Animated.View
+                    key={"passwordItem-" + index}
+                    style={{
+                      alignItems: "center",
+                      justifyContent: "center",
+                      height: 20,
+                      margin: 5,
+                      width: 20,
+                      borderRadius: 20 / 2,
+                      borderWidth: 1,
+                      borderColor: "#357ce6",
+                      backgroundColor: "#357ce6",
+                    }}
+                  />
+                );
+              }
+            })}
+          </Animated.View>
+          <NumericKeyboard />
+          <Item style={styles.input}>
+            {/* <Input
                             secureTextEntry={!this.state.showPassword}
                             keyboardType="numeric"
                             maxLength={4}
                             onChangeText={e => this._handleOnChangeInput(e)}
                             value={this.state.pin}
                         /> */}
-                        {/* <TouchableOpacity
+            {/* <TouchableOpacity
                             onPress={() =>
                                 this.setState({
                                     showPassword: !this.state.showPassword,
@@ -106,20 +107,18 @@ class PinCodeScreen extends React.Component {
                                 backgroundColor={"#fff"}
                             />
                         </TouchableOpacity> */}
-                    </Item>
-                    <TouchableOpacity>
-                        <Text style={styles.forgotButtonText}>
-                            Oh, I forgot it…
-                        </Text>
-                    </TouchableOpacity>
+          </Item>
+          <TouchableOpacity>
+            <Text style={styles.forgotButtonText}>Oh, I forgot it…</Text>
+          </TouchableOpacity>
 
-                    <Text style={styles.forgotButtonText}>
-                        {this.props.informationText}
-                    </Text>
-                </Content>
-            </Container>
-        );
-    }
+          <Text style={styles.forgotButtonText}>
+            {this.props.informationText}
+          </Text>
+        </Content>
+      </Container>
+    );
+  }
 }
 
 export default PinCodeScreen;

src/screens/registerScreens.js

@@ -26,112 +26,112 @@ import PostCard from "../components/post-card/postCard";
 import Search from "../components/search/search";
 
 export const registerScreens = () => {
-    Navigation.registerComponentWithRedux(
-        "navigation.eSteem.Splash",
-        () => Splash,
-        Provider,
-        store
-    );
-    Navigation.registerComponentWithRedux(
-        "navigation.eSteem.Home",
-        () => Home,
-        Provider,
-        store
-    );
-    Navigation.registerComponentWithRedux(
-        "navigation.eSteem.Hot",
-        () => Hot,
-        Provider,
-        store
-    );
-    Navigation.registerComponentWithRedux(
-        "navigation.eSteem.Feed",
-        () => Feed,
-        Provider,
-        store
-    );
-    Navigation.registerComponentWithRedux(
-        "navigation.eSteem.Post",
-        () => SinglePost,
-        Provider,
-        store
-    );
-    Navigation.registerComponentWithRedux(
-        "navigation.eSteem.Login",
-        () => Login,
-        Provider,
-        store
-    );
-    Navigation.registerComponentWithRedux(
-        "navigation.eSteem.Wallet",
-        () => Wallet,
-        Provider,
-        store
-    );
-    Navigation.registerComponentWithRedux(
-        "navigation.eSteem.Editor",
-        () => Editor,
-        Provider,
-        store
-    );
-    Navigation.registerComponentWithRedux(
-        "navigation.eSteem.Discover",
-        () => Discover,
-        Provider,
-        store
-    );
-    Navigation.registerComponentWithRedux(
-        "navigation.eSteem.Settings",
-        () => Settings,
-        Provider,
-        store
-    );
-    Navigation.registerComponentWithRedux(
-        "navigation.eSteem.Notifications",
-        () => Notification,
-        Provider,
-        store
-    );
-    Navigation.registerComponentWithRedux(
-        "navigation.eSteem.SideMenuScreen",
-        () => SideMenu,
-        Provider,
-        store
-    );
-    Navigation.registerComponentWithRedux(
-        "navigation.eSteem.Profile",
-        () => Profile,
-        Provider,
-        store
-    );
-    Navigation.registerComponentWithRedux(
-        "navigation.eSteem.Author",
-        () => Author,
-        Provider,
-        store
-    );
-    Navigation.registerComponentWithRedux(
-        "navigation.eSteem.PostCard",
-        () => PostCard,
-        Provider,
-        store
-    );
-    Navigation.registerComponentWithRedux(
-        "navigation.eSteem.Search",
-        () => Search,
-        Provider,
-        store
-    );
-    Navigation.registerComponentWithRedux(
-        "navigation.eSteem.PinCode",
-        () => PinCode,
-        Provider,
-        store
-    );
-    Navigation.registerComponentWithRedux(
-        "navigation.eSteem.SteemConnect",
-        () => SteemConnect,
-        Provider,
-        store
-    );
+  Navigation.registerComponentWithRedux(
+    "navigation.eSteem.Splash",
+    () => Splash,
+    Provider,
+    store
+  );
+  Navigation.registerComponentWithRedux(
+    "navigation.eSteem.Home",
+    () => Home,
+    Provider,
+    store
+  );
+  Navigation.registerComponentWithRedux(
+    "navigation.eSteem.Hot",
+    () => Hot,
+    Provider,
+    store
+  );
+  Navigation.registerComponentWithRedux(
+    "navigation.eSteem.Feed",
+    () => Feed,
+    Provider,
+    store
+  );
+  Navigation.registerComponentWithRedux(
+    "navigation.eSteem.Post",
+    () => SinglePost,
+    Provider,
+    store
+  );
+  Navigation.registerComponentWithRedux(
+    "navigation.eSteem.Login",
+    () => Login,
+    Provider,
+    store
+  );
+  Navigation.registerComponentWithRedux(
+    "navigation.eSteem.Wallet",
+    () => Wallet,
+    Provider,
+    store
+  );
+  Navigation.registerComponentWithRedux(
+    "navigation.eSteem.Editor",
+    () => Editor,
+    Provider,
+    store
+  );
+  Navigation.registerComponentWithRedux(
+    "navigation.eSteem.Discover",
+    () => Discover,
+    Provider,
+    store
+  );
+  Navigation.registerComponentWithRedux(
+    "navigation.eSteem.Settings",
+    () => Settings,
+    Provider,
+    store
+  );
+  Navigation.registerComponentWithRedux(
+    "navigation.eSteem.Notifications",
+    () => Notification,
+    Provider,
+    store
+  );
+  Navigation.registerComponentWithRedux(
+    "navigation.eSteem.SideMenuScreen",
+    () => SideMenu,
+    Provider,
+    store
+  );
+  Navigation.registerComponentWithRedux(
+    "navigation.eSteem.Profile",
+    () => Profile,
+    Provider,
+    store
+  );
+  Navigation.registerComponentWithRedux(
+    "navigation.eSteem.Author",
+    () => Author,
+    Provider,
+    store
+  );
+  Navigation.registerComponentWithRedux(
+    "navigation.eSteem.PostCard",
+    () => PostCard,
+    Provider,
+    store
+  );
+  Navigation.registerComponentWithRedux(
+    "navigation.eSteem.Search",
+    () => Search,
+    Provider,
+    store
+  );
+  Navigation.registerComponentWithRedux(
+    "navigation.eSteem.PinCode",
+    () => PinCode,
+    Provider,
+    store
+  );
+  Navigation.registerComponentWithRedux(
+    "navigation.eSteem.SteemConnect",
+    () => SteemConnect,
+    Provider,
+    store
+  );
 };