added repeat pin

src/components/steps/InitializationScreen.tsx

@@ -2,6 +2,11 @@ import {FC, useState } from "react";
 import { StyleSheet, Text, TextInput, View } from "react-native";
 import Button from "../Button";
 
+enum PinSteps {
+  InsertPin,
+  RepeatPin
+}
+
 type InitializationScreenProps = {
   onPressFunc: (pin: string) => void;
 };
@@ -9,16 +14,30 @@ type InitializationScreenProps = {
 const  InitializationScreen: FC<InitializationScreenProps> = props => {
   const {onPressFunc} = props;
   const [pin, onChangePin] = useState('');
+  const [btnDisabled, setBtnDisabled] = useState(true);
+  const [step, setStep] = useState(PinSteps.InsertPin);
+
+  const checkPin = (p: string) => {
+    pin === p ? setBtnDisabled(false) : setBtnDisabled(true);
+  }
 
   return (
     <View>
+      { step == PinSteps.InsertPin &&
       <View>
-        <Text style={styles.heading}> Insert pin</Text>
+      <Text style={styles.heading}> Insert pin</Text>
-        <TextInput onChangeText={onChangePin} value={pin} placeholder="******" keyboardType="number-pad" maxLength={6}/>
+      <TextInput onChangeText={onChangePin} value={pin} keyboardType="number-pad" maxLength={6}/>
-        <Button label="Next" disabled={false} btnColor="#4A646C" btnWidth="100%" onChangeFunc={() => {onPressFunc(pin)}} btnJustifyContent='center'></Button>
+      <Button label="Next" disabled={false} btnColor="#4A646C" btnWidth="100%" onChangeFunc={() => setStep(PinSteps.RepeatPin)} btnJustifyContent='center'></Button>
       </View>
+      }
+
+      { step == PinSteps.RepeatPin &&
       <View>
-    </View>
+      <Text style={styles.heading}> Repeat pin</Text>
+      <TextInput onChangeText={(val) => {checkPin(val)}} keyboardType="number-pad" maxLength={6}/>
+      <Button label="Next" disabled={btnDisabled} btnColor="#4A646C" btnWidth="100%" onChangeFunc={() => {onPressFunc(pin)}} btnJustifyContent='center'></Button>
+      </View>
+    }
     </View>
   )};