added pin input

src/Main.tsx

@@ -19,10 +19,10 @@ const Main = () => {
   const isDarkMode = useColorScheme() === 'dark';
   const [isModalVisible, setIsModalVisible] = useState<boolean>(false);
   const [step, setStep] = useState(Step.Discovery);
-  const [pin, setPin] = useState(null || String);
 
   const didMount = useRef(false);
   const stepRef = useRef(step);
+  const pinRef = useRef("");
 
   const keycardConnectHandler = async () => {
     try {
@@ -41,7 +41,7 @@ const Main = () => {
           }
           break;
         case Step.Initialization:
-          await Keycard.init(pin);
+          await Keycard.init(pinRef.current);
           setStep(Step.Loading);
           break;
         case Step.Loading:
@@ -55,8 +55,8 @@ const Main = () => {
           break;
       }
 
-      if (pin) {
+      if (pinRef.current) {
-        await Keycard.unpair(pin);
+        await Keycard.unpair(pinRef.current);
       }
     } catch (err) {
       console.log(err);
@@ -94,7 +94,7 @@ const Main = () => {
   }
 
   const initPin = async (p: string) => {
-    setPin(p);
+    pinRef.current = p;
     return connectCard();
   }
 

src/components/steps/InitializationScreen.tsx

@@ -1,5 +1,5 @@
-import {FC } from "react";
+import {FC, useState } from "react";
-import { StyleSheet, Text, View } from "react-native";
+import { StyleSheet, Text, TextInput, View } from "react-native";
 import Button from "../Button";
 
 type InitializationScreenProps = {
@@ -8,12 +8,14 @@ type InitializationScreenProps = {
 
 const  InitializationScreen: FC<InitializationScreenProps> = props => {
   const {onPressFunc} = props;
+  const [pin, onChangePin] = useState('');
 
   return (
     <View>
       <View>
-        <Text style={styles.heading}> Hello world</Text>
+        <Text style={styles.heading}> Insert pin</Text>
-        <Button label="Next" disabled={false} btnColor="#4A646C" btnWidth="100%" onChangeFunc={() => {onPressFunc("000000")}} btnJustifyContent='center'></Button>
+        <TextInput onChangeText={onChangePin} value={pin} placeholder="******" keyboardType="number-pad" maxLength={6}/>
+        <Button label="Next" disabled={false} btnColor="#4A646C" btnWidth="100%" onChangeFunc={() => {onPressFunc(pin)}} btnJustifyContent='center'></Button>
       </View>
       <View>
     </View>

src/components/steps/LoadingScreen.tsx

@@ -0,0 +1,30 @@
+import {FC } from "react";
+import { StyleSheet, Text, View } from "react-native";
+import Button from "../Button";
+
+type LoadingScreenProps = {
+  onPressFunc: () => void;
+};
+
+const  LoadingScreen: FC<LoadingScreenProps> = props => {
+  const {onPressFunc} = props;
+
+  return (
+    <View>
+      <View>
+        <Text style={styles.heading}> Load mnemonic</Text>
+        <Button label="Next" disabled={false} btnColor="#4A646C" btnWidth="100%" onChangeFunc={onPressFunc} btnJustifyContent='center'></Button>
+      </View>
+      <View>
+    </View>
+    </View>
+  )};
+
+const styles = StyleSheet.create({
+  heading: {
+    textAlign: 'center',
+    fontSize: 16
+  }
+});
+
+export default LoadingScreen;