feat: fix id and wrong press animation + add buttonStyle

Author: mzaien

src/PinCodeKey.tsx

@@ -4,14 +4,18 @@ import {
   type ColorValue,
   Easing,
   Pressable,
+  type RegisteredStyle,
   Text,
   type TextStyle,
   TouchableOpacity,
+  type ViewStyle,
 } from 'react-native';
 import type { NumberProp } from 'react-native-svg';
 import BackspaceKeyIcon from './BackspaceKeyIcon';
 import BioMetricIcon from './BioMetricIcon';
 
+const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
+
 function PinCodeKey({
   item,
   onKeyPress,
@@ -29,6 +33,7 @@ function PinCodeKey({
   disable = false,
   animated = false,
   animationProps,
+  style,
 }: {
   item: string | number;
   onKeyPress: (value: any) => void;
@@ -51,9 +56,9 @@ function PinCodeKey({
     pressInDuration?: number;
     pressOutDuration?: number;
   };
+    style?: RegisteredStyle<ViewStyle>;
 }) {
   // animations
-  const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
   const anim = React.useRef(new Animated.Value(0)).current;
 
   const bgColor = anim.interpolate({
@@ -150,9 +155,9 @@ function PinCodeKey({
             justifyContent: 'center',
             alignItems: 'center',
             flex: 1,
-            borderRadius: 12,
             backgroundColor: bgColor,
           },
+          style,
         ]}
         disabled={disable}
       >
@@ -163,11 +168,14 @@ function PinCodeKey({
   return (
     <TouchableOpacity
       onPress={() => getOnPress()}
-      style={{
-        justifyContent: 'center',
-        alignItems: 'center',
-        flex: 1,
-      }}
+      style={[
+        {
+          justifyContent: 'center',
+          alignItems: 'center',
+          flex: 1,
+        },
+        style,
+      ]}
       disabled={disable}
     >
       {getContent()}

src/keypad.tsx

@@ -1,5 +1,11 @@
-import React, { type ComponentProps, useId } from 'react';
-import type { ColorValue, StyleProp, TextStyle, ViewStyle } from 'react-native';
+import React, { type ComponentProps } from 'react';
+import type {
+  ColorValue,
+  RegisteredStyle,
+  StyleProp,
+  TextStyle,
+  ViewStyle,
+} from 'react-native';
 import type { NumberProp } from 'react-native-svg';
 import PinCodeKey from './PinCodeKey';
 import PinCodeRow from './PinCodeRow';
@@ -21,6 +27,7 @@ export const Keypad = ({
   disable = false,
   animated = false,
   rowStyle,
+  buttonStyle,
   animationProps,
 }: {
   onKeyPress: (value: any) => void;
@@ -39,6 +46,7 @@ export const Keypad = ({
   disable?: boolean;
   animated?: boolean;
   rowStyle?: StyleProp<ViewStyle>;
+  buttonStyle?: RegisteredStyle<ViewStyle>;
   animationProps?: ComponentProps<typeof PinCodeKey>['animationProps'];
 }) => {
   // ---------------------------------------------------
@@ -50,7 +58,6 @@ export const Keypad = ({
     [7, 8, 9],
     ['auth', 0, 'delete'],
   ];
-  const id = useId();
   // ---------------------------------------------------
   // @ Main View
   // ---------------------------------------------------
@@ -59,7 +66,7 @@ export const Keypad = ({
       {keys.map((list: any) => (
         <PinCodeRow
           rowReverse={rowReverse}
-          key={`${id}-keypad-row`}
+          key={`row-${list.join('-')}`}
           style={rowStyle}
         >
           {list.map((item: string | number) => (
@@ -81,6 +88,7 @@ export const Keypad = ({
               disable={disable}
               animated={animated}
               animationProps={animationProps}
+              style={buttonStyle}
             />
           ))}
         </PinCodeRow>