Designed pin code screen

src/components/formInput/formInput.js

@@ -0,0 +1,12 @@
+import React from "react";
+import { View, TextInput } from "react-native";
+
+import styles from "../../styles/formInput.styles";
+
+const FormInput = props => (
+    <View style={styles.container}>
+        <TextInput style={styles.input} {...props} />
+    </View>
+);
+
+export default FormInput;

src/components/index.js

@@ -0,0 +1,8 @@
+import Logo from "./logo/logo";
+import Comment from "./comment/comment";
+import PostCard from "./post-card/postCard";
+import Reply from "./reply/reply";
+import Search from "./search/search";
+import FormInput from "./formInput/formInput";
+
+export { Logo, Comment, PostCard, Reply, Search, FormInput };

src/components/logo/logo.js

@@ -0,0 +1,17 @@
+import React from "react";
+import { View, Image } from "react-native";
+
+import LOGO from "../../assets/esteem.jpg";
+import styles from "../../styles/logo.styles";
+
+const Logo = props => (
+    <View style={styles.container}>
+        <Image
+            source={props.source ? props.source : LOGO}
+            style={[styles.logo, props.style]}
+            resizeMode="contain"
+        />
+    </View>
+);
+
+export default Logo;

src/navigation.js

@@ -316,6 +316,7 @@ export const goToNoAuthScreens = () =>
                 id: "LoginScreen",
                 children: [
                     {
+                        // TODO before commit navigation.eSteem.Login
                         component: {
                             name: "navigation.eSteem.Login",
                         },

src/screens/index.js

@@ -1,5 +1,6 @@
 import { Navigation } from "react-native-navigation";
 
+// SCREENS
 import Splash from "./splash/splashContainer";
 import SideMenu from "./sideMenuScreen";
 import Home from "./home/home";
@@ -14,6 +15,9 @@ import Editor from "./editor/editor";
 import Discover from "./discover/discover";
 import Settings from "./settings/settings";
 import Notifications from "./notifications/notification";
+import PinCode from "./pinCode/pinCodeContainer";
+
+// COMPONENTS
 import PostCard from "../components/post-card/postCard";
 import Search from "../components/search/search";
 
@@ -40,6 +44,7 @@ function registerScreens() {
     Navigation.registerComponent("navigation.eSteem.Author", () => Author);
     Navigation.registerComponent("navigation.eSteem.PostCard", () => PostCard);
     Navigation.registerComponent("navigation.eSteem.Search", () => Search);
+    Navigation.registerComponent("navigation.eSteem.PinCode", () => PinCode);
 }
 
 module.exports = {

src/screens/login/login.js

@@ -43,6 +43,7 @@ class LoginPage extends Component {
 
         Login(username, password)
             .then(result => {
+                console.log("============", result);
                 if (result === true) {
                     RNRestart.Restart();
                 }

src/screens/pinCode/pinCodeContainer.js

@@ -0,0 +1,16 @@
+import React from "react";
+import { Text, View } from "react-native";
+
+import PinCodeScreen from "./pinCodeScreen";
+
+class PinCodeContainer extends React.Component {
+    constructor(props) {
+        super(props);
+    }
+
+    render() {
+        return <PinCodeScreen />;
+    }
+}
+
+export default PinCodeContainer;

src/screens/pinCode/pinCodeScreen.js

@@ -0,0 +1,55 @@
+import React from "react";
+import { Text, TouchableOpacity } from "react-native";
+import { Container, Content, Icon, Item, Input } from "native-base";
+
+import { Logo, FormInput } from "../../components";
+
+import styles from "../../styles/pinCode.styles";
+
+class PinCodeScreen extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            showPassword: false,
+        };
+    }
+    render() {
+        return (
+            <Container style={styles.container}>
+                <Content>
+                    <Logo style={styles.logo} />
+                    <Text style={styles.title}>Enter Pin Code</Text>
+                    <Item style={styles.input}>
+                        <Input
+                            secureTextEntry={!this.state.showPassword}
+                            keyboardType="numeric"
+                            maxLength={4}
+                        />
+                        <TouchableOpacity
+                            onPress={() =>
+                                this.setState({
+                                    showPassword: !this.state.showPassword,
+                                })
+                            }
+                        >
+                            <Icon
+                                style={styles.icon}
+                                active
+                                name="lock"
+                                type="EvilIcons"
+                                backgroundColor={"#fff"}
+                            />
+                        </TouchableOpacity>
+                    </Item>
+                    <TouchableOpacity>
+                        <Text style={styles.forgotButtonText}>
+                            Oh, I forgot it…
+                        </Text>
+                    </TouchableOpacity>
+                </Content>
+            </Container>
+        );
+    }
+}
+
+export default PinCodeScreen;

src/styles/formInput.styles.js

@@ -0,0 +1,18 @@
+import { createStyle } from "react-native-theming";
+import { Dimensions } from "react-native";
+
+const deviceWidth = Dimensions.get("window").width;
+
+export default createStyle({
+    container: {
+        flex: 1,
+        alignItems: "center",
+        justifyContent: "center",
+    },
+    input: {
+        backgroundColor: "#f5f5f5",
+        borderRadius: 5,
+        padding: 15,
+        minWidth: deviceWidth / 2,
+    },
+});

src/styles/logo.styles.js

@@ -0,0 +1,18 @@
+import { createStyle } from "react-native-theming";
+import { Dimensions } from "react-native";
+
+const deviceWidth = Dimensions.get("window").width;
+const deviceHeight = Dimensions.get("window").height;
+
+export default createStyle({
+    container: {
+        flex: 1,
+        alignItems: "center",
+        justifyContent: "center",
+    },
+    logo: {
+        width: deviceWidth / 3,
+        height: deviceHeight / 6,
+        backgroundColor: "transparent",
+    },
+});

src/styles/pinCode.styles.js

@@ -0,0 +1,41 @@
+import { createStyle } from "react-native-theming";
+import { Dimensions } from "react-native";
+
+const deviceHeight = Dimensions.get("window").height;
+const deviceWidth = Dimensions.get("window").width;
+
+export default createStyle({
+    container: {
+        flex: 1,
+        alignItems: "center",
+        justifyContent: "center",
+    },
+    title: {
+        color: "#357ce6",
+        fontSize: 20,
+        fontWeight: "bold",
+        marginTop: 25,
+        alignSelf: "center",
+        marginBottom: 25,
+    },
+    logo: {
+        marginTop: deviceHeight / 8,
+    },
+    forgotButtonText: {
+        color: "#788187",
+        fontSize: 14,
+        marginTop: 25,
+        alignSelf: "center",
+        marginBottom: 25,
+    },
+    input: {
+        backgroundColor: "#f5f5f5",
+        borderColor: "#fff",
+        borderRadius: 5,
+        paddingLeft: 15,
+        minWidth: deviceWidth / 2,
+    },
+    icon: {
+        color: "#357ce6",
+    },
+});