added insert pin interface

src/components/CustomDialpad.tsx

@@ -2,6 +2,7 @@ import { SafeAreaView, StyleSheet, Text, View, Dimensions } from "react-native";
 import React, {FC,  useState } from "react";
 import DialpadKeypad from "./DialpadKeypad";
 import Button from "./Button";
+import DialpadPin from "./DialpadPin";
 
  const { width, height } = Dimensions.get("window");
 
@@ -16,8 +17,11 @@ const CustomDialpad: FC<CustomDialpadProps> = props => {
   const dialPadSize = width * 0.2;
   const dialPadTextSize = dialPadSize * 0.36;
   const [code, setCode] = useState([]);
-
   const pinLength = 6;
+  const pinContainerSize = width / 2;
+  const pinSize = pinContainerSize / pinLength;
+
+
 
   const updateCode = (item: never) => {
     if (item === "X") {
@@ -32,7 +36,8 @@ const CustomDialpad: FC<CustomDialpadProps> = props => {
      <View style={styles.textContainer}>
        <Text style={styles.pinText}>Create PIN</Text>
        <Text style={styles.pinSubText}>Enter your secure six-digit code</Text>
-       <DialpadKeypad dialPadContent={dialPadContent} pinLength={pinLength} dialPadSize={dialPadSize} dialPadTextSize={dialPadTextSize} setCode={updateCode} code={code}/>
+       <DialpadPin pinLength={pinLength} pinSize={pinSize} code={code} dialPadContent={dialPadContent} />
+       <DialpadKeypad dialPadContent={dialPadContent} pinLength={pinLength} 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>

src/components/DialpadKeypad.tsx

@@ -8,16 +8,16 @@ type DialpadKeypadProps = {
   dialPadSize: number;
   dialPadTextSize: number;
   code: number[];
-  setCode: (item: never) => void;
+  updateCodeFunc: (item: never) => void;
 };
 
 const  DialpadKeypad: FC<DialpadKeypadProps> = props => {
-  const {dialPadContent, pinLength, dialPadSize, dialPadTextSize} = props;
+  const {dialPadContent, pinLength, dialPadSize, dialPadTextSize, code, updateCodeFunc} = props;
 
   return (
     <FlatList data={dialPadContent} numColumns={3} keyExtractor={(_, index) => index.toString()} renderItem={({ item }) => {
        return (
-         <TouchableOpacity  disabled={item === ""}>
+         <TouchableOpacity  disabled={item === ""} onPress={() => updateCodeFunc(item as never)}>
            <View style={[
                {
                  backgroundColor: item === "" ? "transparent" : "#fff",

src/components/DialpadPin.tsx

@@ -0,0 +1,81 @@
+import {FC } from "react";
+import { StyleSheet, Text, View, FlatList, TouchableOpacity } from "react-native";
+import Icon from 'react-native-vector-icons/Feather';
+
+type DialpadPinProps = {
+  pinSize: number;
+  pinLength: number;
+  code: any[];
+  dialPadContent: any[];
+};
+
+const  DialpadPin: FC<DialpadPinProps> = props => {
+  const {dialPadContent, pinLength, code, pinSize} = props;
+
+  return (
+    <View style={styles.dialPadPinContainer}>
+     {Array(pinLength)
+       .fill(undefined)
+       .map((_, index) => {
+         const item = dialPadContent[index];
+         const isSelected =
+           typeof item === "number" && code[index] !== undefined;
+         return (
+           <View
+             key={index}
+             style={{
+               width: pinSize,
+               height: pinSize,
+               borderRadius: pinSize / 2,
+               overflow: "hidden",
+               margin: 5,
+             }}
+           >
+             <View
+               style={[
+                 {
+                   borderRadius: pinSize / 2,
+                   borderColor: !isSelected ? "lightgrey" : "#3F1D38",
+                 },
+                 styles.pinContentContainer,
+               ]}
+             >
+               {isSelected && (
+                 <View
+                   style={[
+                     {
+                       width: pinSize * 0.5,
+                       height: pinSize * 0.5,
+                       borderRadius: pinSize * 0.35,
+                     },
+                     styles.pinContent,
+                   ]}
+                 />
+               )}
+             </View>
+           </View>
+         );
+       })}
+   </View>
+  )
+};
+
+const styles = StyleSheet.create({
+  dialPadPinContainer: {
+    flexDirection: "row",
+    marginBottom: 30,
+    alignItems: "flex-end",
+  },
+  pinContentContainer: {
+    flex: 1,
+    backgroundColor: "#fff",
+    borderWidth: 1,
+    justifyContent: "center",
+    alignItems: "center",
+  },
+  pinContent: {
+    backgroundColor: "#5E454B",
+  }
+  });
+
+export default DialpadPin;