Merge pull request #57 from Safariblocks-LTD/JS015

separate screen, fix focus

App/navigation/navigation.tsx

@@ -14,7 +14,7 @@ import { createStackNavigator } from "@react-navigation/stack"
 import { Receive, SendToken } from '../components';
 import { QrScanner } from "../components/qrScanner"
 import { Home, Registration, CreateAccount } from "../screens"
-import { Login } from '../screens';
+import { Login, CreatePin } from '../screens';
 import { Dashboard } from '../screens';
 import RecoverAccount from "../screens/recoverAccount/component"
 import SeedPhrase from "../screens/seedphrase/component"
@@ -179,6 +179,16 @@ export const AuthenticationNavigation = () => {
           options={{
             header: () => <View></View>
 
+          }} />
+        <Stack.Screen name="Create Pin" component={CreatePin}
+          options={{
+            header: () => <View></View>
+
+          }} />
+              <Stack.Screen name="Login" component={Login}
+          options={{
+            header: () => <View></View>
+
           }} />
         <Stack.Screen name="Seed Phrase" component={SeedPhrase}
           options={{

App/screens/createPin/component.tsx

@@ -0,0 +1,101 @@
+
+import * as React from 'react';
+import {
+  StyleSheet,
+  TextInput,
+  View,
+  Text,
+  ScrollView,
+  Image,
+  Keyboard,
+  TouchableOpacity,
+  KeyboardAvoidingView,
+  Card,
+  Animated,
+  SafeAreaView
+} from "react-native";
+import { Icon } from 'react-native-elements';
+import { Center, Stack, VStack, Divider, Heading, HStack } from "native-base";
+import { StyleText, MyAppText, textStyles } from '../../components/common/appTexts';
+import Loader from '../../components/loading'
+import { NormalButton } from '../../components/common';
+import {
+  styles
+} from './styles';
+import SmoothPinCodeInput from 'react-native-smooth-pincode-input';
+
+
+
+
+type navigation = {
+  navigation: any
+}
+const { Value, Text: AnimatedText } = Animated;
+
+
+
+
+
+export const CreatePin = ({ navigation }: navigation) => {
+  const [loading, setLoading] = React.useState<boolean>()
+  const [code, setCode] = React.useState('')
+  const [confirmCode, setConfirmCode] = React.useState('')
+
+  const [value, setValue] = React.useState('');
+
+
+  const buttonPress = () => {
+
+  }
+
+  const styled = {
+    heading: (scale) => {
+      const fontSize = textStyles.fontSize * scale;
+
+      return {
+        lineHeight: fontSize * 1.4,
+        marginBottom: 12,
+        fontWeight: "bold",
+        fontSize,
+      };
+    }
+  }
+  return (
+    <ScrollView style={styles.container}>
+      <Loader loading={loading} />
+      <VStack space={10} style={styles.root}>
+        <VStack>
+          <MyAppText style={styles.title}>Create Pin</MyAppText>
+          <SmoothPinCodeInput
+            containerStyle={styles.cellContainer}
+            cellSpacing={40}
+            cellStyle={styles.cell}
+            // ref={pinInput}
+            value={code}
+            onTextChange={code => setCode(code)}
+            onFulfill={() => console.log('Do something')}
+            onBackspace={() => console.log('No more back.')}
+          />
+        </VStack>
+        <VStack>
+          <MyAppText style={styles.title}>Confirm Pin</MyAppText>
+          <SmoothPinCodeInput
+            containerStyle={styles.cellContainer}
+            cellSpacing={40}
+            cellStyle={styles.cell}
+            // ref={confirmPinInput}
+            value={confirmCode}
+            onTextChange={confirmCode => setConfirmCode(confirmCode)}
+            onFulfill={() => console.log('Do something')}
+            onBackspace={() => console.log('No more back.')}
+          />
+        </VStack>
+        <NormalButton title='Create Pin' clickHandler={buttonPress} style={styles.button} />
+      </VStack>
+    </ScrollView>
+  )
+}
+
+
+
+

App/screens/createPin/index.tsx

@@ -0,0 +1 @@
+export * from './component'

App/screens/createPin/styles.tsx

@@ -0,0 +1,132 @@
+import { StyleSheet } from "react-native";
+
+
+export const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        backgroundColor:"#F2EDED"
+    },
+
+    content: {
+        width: "100%",
+        height: "100%",
+        backgroundColor: "#FFFFFF",
+        justifyContent: "space-between",
+        alignItems: "center",
+        // borderWidth: 1
+    },
+
+    textbox: {
+        marginTop: 30,
+        alignItems: "center",
+        width: "60%",
+        justifyContent: "center",
+        //    borderWidth: 1
+    },
+
+    text: {
+        fontFamily: "Roboto",
+        fontSize: 30,
+        fontWeight: "bold",
+        fontStyle: "normal"
+    },
+
+    main: {
+        //    borderWidth: 1,
+        width: "100%",
+        alignItems: "flex-start",
+        paddingLeft: 30,
+        justifyContent: "space-around",
+        height: "30%",
+    },
+
+    up: {
+        display: "flex",
+        flexDirection: "row",
+        alignItems: "center",
+    },
+
+    icon1: {
+        marginRight: 30,
+    },
+
+    iconText: {
+        // marginRight: 120,
+        fontFamily: "Roboto",
+        fontSize: 18,
+        fontWeight: "500",
+        fontStyle: "normal"
+    },
+    iconText2: {
+        // marginRight: 60,
+        fontFamily: "Roboto",
+        fontSize: 18,
+        fontWeight: "500",
+        fontStyle: "normal"
+    },
+
+    icon2: {},
+
+    divider: {
+        marginLeft: 60,
+        width: "68%",
+        borderWidth: 1,
+        backgroundColor: "black",
+    },
+    down: {
+        display: "flex",
+        flexDirection: "row",
+        alignItems: "center",
+        justifyContent: "center",
+    },
+
+    footer: {
+        marginTop: '35%',
+    },
+
+    footerText: {
+        color: "black",
+        alignItems: "flex-end",
+        fontWeight: "400",
+        fontStyle: "normal",
+        fontSize: 14,
+    },
+    button: {
+        height: 40,
+        width: '40%',
+        borderRadius: 10,
+        marginTop: '25%',
+        alignSelf: 'center',
+        margin: 40
+
+        // jus
+    },
+    root: {
+        display: "flex",
+        flexDirection: "column",
+        // alignItems: "center",
+        justifyContent: "center",
+        padding: 20,
+        paddingTop: 50,
+    },
+    title: {
+        // paddingTop: 50,
+        color: '#000',
+        fontSize: 20,
+        // fontWeight: '700',
+        // textAlign: 'center',
+        paddingBottom: 40,
+        marginLeft: 30
+    },
+
+    cell: {
+        backgroundColor: '#FFF7F7',
+        borderRadius: 10
+    },
+    cellContainer: {
+        borderRadius: 10,
+        marginLeft: 30
+
+    },
+
+});

App/screens/index.tsx

@@ -13,3 +13,4 @@ export * from './success'
 export * from './error'
 export * from './token'
 export * from './login'
+export * from './createPin'

App/screens/login/component.tsx

@@ -38,53 +38,12 @@ const { Value, Text: AnimatedText } = Animated;
 
 export const Login = ({ navigation }: navigation) => {
   const [loading, setLoading] = React.useState<boolean>()
-  const [hasPin, setHasPin] = React.useState<boolean>(true)
+  const [code, setCode] = React.useState('')
 
   const [value, setValue] = React.useState('');
 
 
-  const buttonPress = () => {
-    setHasPin(false)
-  }
-  const Reset = () => {
-    return (
-      <ScrollView style={styles.container}>
-        <Loader loading={loading} />
-        <VStack space={10} style={styles.root}>
-          <VStack>
-            <MyAppText style={styles.title}>Create Pin</MyAppText>
-            <SmoothPinCodeInput
-              containerStyle={styles.cellContainer}
-              cellSpacing={40}
-              cellStyle={styles.cell}
-              // ref={pinInput}
-              // value={code}
-              // onTextChange={code => setState({ code })}
-              // onFulfill={this._checkCode}
-              onBackspace={() => console.log('No more back.')}
-            />
-          </VStack>
-          <VStack>
-            <MyAppText style={styles.title}>Confirm Pin</MyAppText>
-            <SmoothPinCodeInput
-              containerStyle={styles.cellContainer}
-              cellSpacing={40}
-              cellStyle={styles.cell}
-              // ref={confirmPinInput}
-              // value={code}
-              // onTextChange={code => setState({ code })}
-              // onFulfill={this._checkCode}
-              onBackspace={() => console.log('No more back.')}
-            />
-          </VStack>
 
-          <NormalButton title='Create Pin'clickHandler={buttonPress} style={styles.button} />
-
-        </VStack>
-
-      </ScrollView>
-    )
-  }
 
   const styled = {
     heading: (scale) => {
@@ -99,8 +58,6 @@ export const Login = ({ navigation }: navigation) => {
     }
   }
   return (
-
-   hasPin && hasPin ?
       <ScrollView style={styles.container}>
         <Loader loading={loading} />
         <VStack space={10} style={styles.root}>
@@ -111,24 +68,20 @@ export const Login = ({ navigation }: navigation) => {
               cellSpacing={40}
               cellStyle={styles.cell}
               // ref={pinInput}
-              // value={code}
-              // onTextChange={code => setState({ code })}
-              // onFulfill={this._checkCode}
+              value={code}
+              onTextChange={code => setCode(code)}
+              onFulfill={() => console.log('Do something')}
               onBackspace={() => console.log('No more back.')}
             />
           </VStack>
           <NormalButton title='Login' style={styles.button} />
           <Center style={styles.down}>
-            <TouchableOpacity onPress={buttonPress}>
+          <TouchableOpacity onPress={() => navigation.navigate("Create Pin")}>
               <MyAppText style={styles.footer}>Forgot Pin?</MyAppText>
             </TouchableOpacity>  
           </Center>
-
-
         </VStack>
-
       </ScrollView>
-      : <Reset />
   )
 }