Merge pull request #17 from anday013/fix/focus-color-issue

fix: prevent focusColor override

Author: anday013

dist/src/OtpInput/OtpInput.js

@@ -20,8 +20,8 @@ exports.OtpInput = (0, react_1.forwardRef)((props, ref) => {
             const isFocusedInput = index === focusedInputIndex;
             return (<react_native_1.Pressable key={`${char}-${index}`} onPress={handlePress} style={[
                     OtpInput_styles_1.styles.codeContainer,
-                    focusColor && isFocusedInput ? { borderColor: focusColor } : {},
                     pinCodeContainerStyle,
+                    focusColor && isFocusedInput ? { borderColor: focusColor } : {},
                 ]} testID="otp-input">
                 {isFocusedInput && !hideStick ? (<VerticalStick_1.VerticalStick focusColor={focusColor} style={focusStickStyle} focusStickBlinkingDuration={focusStickBlinkingDuration}/>) : (<react_native_1.Text style={[OtpInput_styles_1.styles.codeText, pinCodeTextStyle]}>{char}</react_native_1.Text>)}
               </react_native_1.Pressable>);

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-otp-entry",
-  "version": "1.1.9",
+  "version": "1.1.10",
   "description": "A fully modifiable OTP input Component for React Native",
   "main": "dist/src/index.js",
   "types": "dist/src/index.d.ts",

src/OtpInput/OtpInput.test.tsx

@@ -22,6 +22,17 @@ describe("OtpInput", () => {
       expect(stick).toBeTruthy();
     });
 
+    test("focusColor should not be overridden by theme", () => {
+      renderOtpInput({
+        focusColor: "#000",
+        theme: { pinCodeContainerStyle: { borderColor: "#fff" } },
+      });
+
+      const inputs = screen.getAllByTestId("otp-input");
+
+      expect(inputs[0]).toHaveStyle({ borderColor: "#000" });
+    });
+
     // Test if the number of rendered inputs is equal to the number of digits
     test.each([1, 2, 3, 4, 5, 6, 7, 8, 9, 10])(
       "should render the correct number of inputs: %i",

src/OtpInput/OtpInput.tsx

@@ -43,8 +43,8 @@ export const OtpInput = forwardRef<OtpInputRef, OtpInputProps>((props, ref) => {
                 onPress={handlePress}
                 style={[
                   styles.codeContainer,
-                  focusColor && isFocusedInput ? { borderColor: focusColor } : {},
                   pinCodeContainerStyle,
+                  focusColor && isFocusedInput ? { borderColor: focusColor } : {},
                 ]}
                 testID="otp-input"
               >

src/OtpInput/__snapshots__/OtpInput.test.tsx.snap

@@ -64,10 +64,10 @@ exports[`OtpInput UI should render correctly 1`] = `
             "minHeight": 60,
             "minWidth": 44,
           },
+          undefined,
           {
             "borderColor": "#A4D0A4",
           },
-          undefined,
         ]
       }
       testID="otp-input"
@@ -139,8 +139,8 @@ exports[`OtpInput UI should render correctly 1`] = `
             "minHeight": 60,
             "minWidth": 44,
           },
-          {},
           undefined,
+          {},
         ]
       }
       testID="otp-input"
@@ -197,8 +197,8 @@ exports[`OtpInput UI should render correctly 1`] = `
             "minHeight": 60,
             "minWidth": 44,
           },
-          {},
           undefined,
+          {},
         ]
       }
       testID="otp-input"
@@ -255,8 +255,8 @@ exports[`OtpInput UI should render correctly 1`] = `
             "minHeight": 60,
             "minWidth": 44,
           },
-          {},
           undefined,
+          {},
         ]
       }
       testID="otp-input"
@@ -313,8 +313,8 @@ exports[`OtpInput UI should render correctly 1`] = `
             "minHeight": 60,
             "minWidth": 44,
           },
-          {},
           undefined,
+          {},
         ]
       }
       testID="otp-input"
@@ -371,8 +371,8 @@ exports[`OtpInput UI should render correctly 1`] = `
             "minHeight": 60,
             "minWidth": 44,
           },
-          {},
           undefined,
+          {},
         ]
       }
       testID="otp-input"