added pin interface

src/components/CustomDialpad.tsx

@@ -27,6 +27,9 @@ const CustomDialpad: FC<CustomDialpadProps> = props => {
     if (item === "X") {
       setCode((prev) => prev.slice(0, -1));
     } else {
+      if (code.length === pinLength) {
+        return;
+      }
       setCode((prev) => [...prev, item]);
     }
   }
@@ -37,11 +40,11 @@ const CustomDialpad: FC<CustomDialpadProps> = props => {
        <Text style={styles.pinText}>Create PIN</Text>
        <Text style={styles.pinSubText}>Enter your secure six-digit code</Text>
        <DialpadPin pinLength={pinLength} pinSize={pinSize} code={code} dialPadContent={dialPadContent} />
-       <DialpadKeypad dialPadContent={dialPadContent} pinLength={pinLength} dialPadSize={dialPadSize} dialPadTextSize={dialPadTextSize} updateCodeFunc={updateCode} code={code}/>
+       <DialpadKeypad dialPadContent={dialPadContent} dialPadSize={dialPadSize} dialPadTextSize={dialPadTextSize} updateCodeFunc={updateCode} code={code}/>
      </View>
      <View style={styles.btnContainer}>
      <Button label="Cancel" disabled={false} btnColor="#4A646C" btnWidth="50%" onChangeFunc={onCancelFunc} btnJustifyContent='center'></Button>
-     <Button label="Next" disabled={false} btnColor="#4A646C" btnWidth="50%" onChangeFunc={onNextFunc} btnJustifyContent='center'></Button>
+     <Button label="Next" disabled={false} btnColor="#4A646C" btnWidth="50%" onChangeFunc={() => onNextFunc(code.toString())} btnJustifyContent='center'></Button>
      </View>
    </SafeAreaView>
   )};

src/components/DialpadKeypad.tsx

@@ -4,7 +4,6 @@ import Icon from 'react-native-vector-icons/Feather';
 
 type DialpadKeypadProps = {
   dialPadContent: any[];
-  pinLength: number;
   dialPadSize: number;
   dialPadTextSize: number;
   code: number[];
@@ -12,7 +11,7 @@ type DialpadKeypadProps = {
 };
 
 const  DialpadKeypad: FC<DialpadKeypadProps> = props => {
-  const {dialPadContent, pinLength, dialPadSize, dialPadTextSize, code, updateCodeFunc} = props;
+  const {dialPadContent, dialPadSize, dialPadTextSize, code, updateCodeFunc} = props;
 
   return (
     <FlatList data={dialPadContent} numColumns={3} keyExtractor={(_, index) => index.toString()} renderItem={({ item }) => {

src/components/DialpadPin.tsx

@@ -1,6 +1,5 @@
-import {FC } from "react";
-import { StyleSheet, Text, View, FlatList, TouchableOpacity } from "react-native";
-import Icon from 'react-native-vector-icons/Feather';
+import {FC, useEffect, useRef } from "react";
+import { StyleSheet, View, Animated } from "react-native";
 
 type DialpadPinProps = {
   pinSize: number;
@@ -11,6 +10,27 @@ type DialpadPinProps = {
 
 const  DialpadPin: FC<DialpadPinProps> = props => {
   const {dialPadContent, pinLength, code, pinSize} = props;
+  const animatedValue = useRef(new Animated.Value(0)).current;
+
+  const animatedStyle = {
+    transform: [
+      {
+        scale: animatedValue.interpolate({
+          inputRange: [0, 3],
+          outputRange: [1, 1.3],
+          extrapolate: "clamp",
+        }),
+      },
+    ],
+  };
+
+  useEffect(() => {
+    Animated.timing(animatedValue, {
+      toValue: code.length,
+      duration: 300,
+      useNativeDriver: true,
+    }).start();
+  }, [code]);
 
   return (
     <View style={styles.dialPadPinContainer}>
@@ -18,8 +38,7 @@ const  DialpadPin: FC<DialpadPinProps> = props => {
        .fill(undefined)
        .map((_, index) => {
          const item = dialPadContent[index];
-         const isSelected =
-           typeof item === "number" && code[index] !== undefined;
+         const isSelected = typeof item === "number" && code[index] !== undefined;
          return (
            <View
              key={index}
@@ -40,18 +59,17 @@ const  DialpadPin: FC<DialpadPinProps> = props => {
                  styles.pinContentContainer,
                ]}
              >
-               {isSelected && (
-                 <View
-                   style={[
-                     {
-                       width: pinSize * 0.5,
-                       height: pinSize * 0.5,
-                       borderRadius: pinSize * 0.35,
-                     },
-                     styles.pinContent,
-                   ]}
-                 />
-               )}
+              {isSelected && (<Animated.View style={[
+            {
+           width: pinSize * 0.5,
+           height: pinSize * 0.5,
+           borderRadius: pinSize * 0.35,
+            },
+            animatedStyle,
+          styles.pinContent,
+      ]}
+   />
+  )}
              </View>
            </View>
          );

src/components/steps/InitializationScreen.tsx

@@ -26,7 +26,7 @@ const  InitializationScreen: FC<InitializationScreenProps> = props => {
 
   return (
     <View>
-      <CustomDialpad onCancelFunc={() => {}} onNextFunc={() => {}}></CustomDialpad>
+      <CustomDialpad onCancelFunc={() => {}} onNextFunc={(code: string | undefined) => {console.log(code)}}></CustomDialpad>
       { step == PinSteps.InsertPin &&
       <View>
       <Text style={styles.heading}> Insert pin</Text>