From 4be2980de73277e6034d98faf145d6edf971ca32 Mon Sep 17 00:00:00 2001
From: webbrain-one <295484252+webbrain-one@users.noreply.github.com>
Date: Sun, 9 Aug 2026 05:43:39 +0300
Subject: [PATCH] Add pinColor prop to customize pin color

Fixes Issue #11. The hardcoded pin color can be invisible on matching backgrounds.
Adds a `pinColor` prop with a default value of 'white' to allow customization.
---
 src/EnterLayout.tsx | 7 ++++---
 src/PinCode.tsx     | 5 ++++-
 src/SetLayout.tsx   | 7 ++++---
 3 files changed, 12 insertions(+), 7 deletions(-)

diff --git a/src/EnterLayout.tsx b/src/EnterLayout.tsx
index 1972eae..9657f88 100644
--- a/src/EnterLayout.tsx
+++ b/src/EnterLayout.tsx
@@ -5,7 +5,7 @@ import { DEFAULT } from './common';
 import NumbersPanel from './components/NumbersPanel';
 import Pin from './components/Pin';
 
-const EnterLayout = ({ pin, styles, mode, textOptions, options, onSwitchMode, onEnter, onReset, onMaxAttempt }: {
+const EnterLayout = ({ pin, styles, mode, textOptions, options, onSwitchMode, onEnter, onReset, onMaxAttempt, pinColor = 'white' }: {
     pin: string | undefined;
     styles?: PinCodeT.EnterStyles;
     mode: PinCodeT.Modes;
@@ -15,6 +15,7 @@ const EnterLayout = ({ pin, styles, mode, textOptions, options, onSwitchMode, on
     onEnter: (newPin: string) => void;
     onMaxAttempt: () => void;
     onReset: () => void;
+    pinColor?: string;
 }) => {
     const [curPin, setCurPin] = useState('');
     const [disabled, disableButtons] = useState(false);
@@ -73,8 +74,8 @@ const EnterLayout = ({ pin, styles, mode, textOptions, options, onSwitchMode, on
         <View style={[DEFAULT.Styles.enter?.content, styles?.content]}>
             <Pin pin={curPin} pinLength={options?.pinLength || DEFAULT.Options.pinLength || 4}
                 style={styles?.pinContainer}
-                pinStyle={[DEFAULT.Styles.enter?.pin, styles?.pin]}
-                enteredPinStyle={[DEFAULT.Styles.enter?.enteredPin, styles?.enteredPin]} />
+                pinStyle={[DEFAULT.Styles.enter?.pin, styles?.pin, { backgroundColor: pinColor }]}
+                enteredPinStyle={[DEFAULT.Styles.enter?.enteredPin, styles?.enteredPin, { backgroundColor: pinColor }]} />
 
             <NumbersPanel disabled={disabled} onButtonPress={onNumberPress}
                 backSpace={options?.backSpace} backSpaceText={textOptions.enter?.backSpace}
diff --git a/src/PinCode.tsx b/src/PinCode.tsx
index 6492972..af43c25 100644
--- a/src/PinCode.tsx
+++ b/src/PinCode.tsx
@@ -15,12 +15,13 @@ const PinCode = ({
     options,
     textOptions,
     styles,
+    pinColor = 'white',
     onEnter,
     onSet,
     onSetCancel,
     onReset,
     onModeChanged
-}: PinCodeT.PinCodeProps) => {
+}: PinCodeT.PinCodeProps & { pinColor?: string }) => {
     const [curMode, setCurMode] = useState<PinCodeT.Modes>(mode);
     const [curOptions, setCurOptions] = useState<PinCodeT.Options>(DEFAULT.Options);
     const [curTextOptions, setCurTextOptions] = useState<PinCodeT.TextOptions>(DEFAULT.TextOptions);
@@ -72,6 +73,7 @@ const PinCode = ({
                 onMaxAttempt={() => switchMode(PinCodeT.Modes.Locked)}
                 onReset={() => switchMode(PinCodeT.Modes.Reset)}
                 styles={styles?.enter}
+                pinColor={pinColor}
             />
         }
         {(curMode == PinCodeT.Modes.Set) &&
@@ -81,6 +83,7 @@ const PinCode = ({
                 onReset={() => switchMode(PinCodeT.Modes.Reset)}
                 onSetCancel={onSetCancel}
                 styles={styles?.enter}
+                pinColor={pinColor}
             />
         }
         {(curMode == PinCodeT.Modes.Locked) &&
diff --git a/src/SetLayout.tsx b/src/SetLayout.tsx
index fb2295f..7a332bb 100644
--- a/src/SetLayout.tsx
+++ b/src/SetLayout.tsx
@@ -5,7 +5,7 @@ import { DEFAULT } from './common';
 import NumberButtons from './components/NumbersPanel';
 import Pin from './components/Pin';
 
-const SetLayout = ({ pin, styles, mode, textOptions, options, onSwitchMode, onSet, onSetCancel, onReset }: {
+const SetLayout = ({ pin, styles, mode, textOptions, options, onSwitchMode, onSet, onSetCancel, onReset, pinColor = 'white' }: {
     pin: string | undefined;
     styles?: PinCodeT.SetStyles;
     mode: PinCodeT.Modes;
@@ -15,6 +15,7 @@ const SetLayout = ({ pin, styles, mode, textOptions, options, onSwitchMode, onSe
     onSetCancel?: () => void;
     onSet: (newPin: string) => void;
     onReset: () => void;
+    pinColor?: string;
 }) => {
     const [curPin, setCurPin] = useState('');
     const [lastPin, setLastPin] = useState('');
@@ -69,8 +70,8 @@ const SetLayout = ({ pin, styles, mode, textOptions, options, onSwitchMode, onSe
         <View style={[DEFAULT.Styles.enter?.content, styles?.content]}>
             <Pin pin={curPin} pinLength={options?.pinLength || DEFAULT.Options.pinLength || 4}
                 style={styles?.pinContainer}
-                pinStyle={[DEFAULT.Styles.set?.pin, styles?.pin]}
-                enteredPinStyle={[DEFAULT.Styles.set?.enteredPin, styles?.enteredPin]} />
+                pinStyle={[DEFAULT.Styles.set?.pin, styles?.pin, { backgroundColor: pinColor }]}
+                enteredPinStyle={[DEFAULT.Styles.set?.enteredPin, styles?.enteredPin, { backgroundColor: pinColor }]} />
 
             <NumberButtons onButtonPress={onNumberPress}
                 backSpace={options?.backSpace} backSpaceText={textOptions.enter?.backSpace}