build: release version 1.4.1

Author: anday013

dist/src/OtpInput/OtpInput.js

@@ -8,8 +8,8 @@ const VerticalStick_1 = require("./VerticalStick");
 const useOtpInput_1 = require("./useOtpInput");
 exports.OtpInput = (0, react_1.forwardRef)((props, ref) => {
     const { models: { text, inputRef, focusedInputIndex }, actions: { clear, handlePress, handleTextChange, focus }, forms: { setTextWithRef }, } = (0, useOtpInput_1.useOtpInput)(props);
-    const { numberOfDigits, autoFocus = true, hideStick, focusColor = "#A4D0A4", focusStickBlinkingDuration, secureTextEntry = false, autoComplete = "sms-otp", theme = {}, } = props;
-    const { containerStyle, inputsContainerStyle, pinCodeContainerStyle, pinCodeTextStyle, focusStickStyle, focusedPinCodeContainerStyle, } = theme;
+    const { numberOfDigits, autoFocus = true, hideStick, focusColor = "#A4D0A4", focusStickBlinkingDuration, secureTextEntry = false, theme = {}, } = props;
+    const { containerStyle, inputsContainerStyle, pinCodeContainerStyle, pinCodeTextStyle, focusStickStyle, focusedPinCodeContainerStyle, filledPinCodeContainerStyle, } = theme;
     (0, react_1.useImperativeHandle)(ref, () => ({ clear, focus, setValue: setTextWithRef }));
     return (<react_native_1.View style={[OtpInput_styles_1.styles.container, containerStyle]}>
       <react_native_1.View style={[OtpInput_styles_1.styles.inputsContainer, inputsContainerStyle]}>
@@ -25,13 +25,16 @@ exports.OtpInput = (0, react_1.forwardRef)((props, ref) => {
                     focusedPinCodeContainerStyle && isFocusedInput
                         ? { ...focusedPinCodeContainerStyle }
                         : {},
+                    filledPinCodeContainerStyle && Boolean(char)
+                        ? { ...filledPinCodeContainerStyle }
+                        : {},
                 ]} 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 && secureTextEntry ? "•" : char}
                   </react_native_1.Text>)}
               </react_native_1.Pressable>);
         })}
       </react_native_1.View>
-      <react_native_1.TextInput value={text} onChangeText={handleTextChange} maxLength={numberOfDigits} inputMode="numeric" textContentType="oneTimeCode" ref={inputRef} autoFocus={autoFocus} style={OtpInput_styles_1.styles.hiddenInput} secureTextEntry={secureTextEntry} autoComplete={autoComplete} testID="otp-input-hidden"/>
+      <react_native_1.TextInput value={text} onChangeText={handleTextChange} maxLength={numberOfDigits} inputMode="numeric" textContentType="oneTimeCode" ref={inputRef} autoFocus={autoFocus} style={OtpInput_styles_1.styles.hiddenInput} secureTextEntry={secureTextEntry} autoComplete="one-time-code" testID="otp-input-hidden"/>
     </react_native_1.View>);
 });

dist/src/OtpInput/OtpInput.test.js

@@ -56,6 +56,17 @@ describe("OtpInput", () => {
             const inputs = react_native_1.screen.getAllByTestId("otp-input");
             expect(inputs).toHaveLength(numberOfDigits);
         });
+        test("filledPinCodeContainerStyle should allow for new style when digit is present", () => {
+            renderOtpInput({
+                theme: { filledPinCodeContainerStyle: { borderBottomColor: "red" } },
+            });
+            const input = react_native_1.screen.getByTestId("otp-input-hidden");
+            react_native_1.fireEvent.changeText(input, "12");
+            const inputs = react_native_1.screen.getAllByTestId("otp-input");
+            expect(inputs[0]).toHaveStyle({ borderBottomColor: "red" });
+            expect(inputs[1]).toHaveStyle({ borderBottomColor: "red" });
+            expect(inputs[2]).not.toHaveStyle({ borderBottomColor: "red" });
+        });
     });
     describe("Logic", () => {
         test("should split text on screen from the text written in the hidden input", () => {

dist/src/OtpInput/OtpInput.types.d.ts

@@ -1,4 +1,4 @@
-import { ColorValue, TextInputProps, TextStyle, ViewStyle } from "react-native";
+import { ColorValue, TextStyle, ViewStyle } from "react-native";
 export interface OtpInputProps {
     numberOfDigits: number;
     autoFocus?: boolean;
@@ -9,7 +9,6 @@ export interface OtpInputProps {
     focusStickBlinkingDuration?: number;
     secureTextEntry?: boolean;
     theme?: Theme;
-    autoComplete?: TextInputProps["autoComplete"];
 }
 export interface OtpInputRef {
     clear: () => void;
@@ -20,6 +19,7 @@ export interface Theme {
     containerStyle?: ViewStyle;
     inputsContainerStyle?: ViewStyle;
     pinCodeContainerStyle?: ViewStyle;
+    filledPinCodeContainerStyle?: ViewStyle;
     pinCodeTextStyle?: TextStyle;
     focusStickStyle?: ViewStyle;
     focusedPinCodeContainerStyle?: ViewStyle;

package-lock.json

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