react-native-otp-entry - npm Package Compare versions

Comparing version 1.6.1 to 1.7.0

dist/OtpInput/OtpInput.js

@@ -10,12 +10,12 @@ "use strict";
 exports.OtpInput = (0, react_1.forwardRef)((props, ref) => {
-    const { models: { text, inputRef, focusedInputIndex, hasCursor }, actions: { clear, handlePress, handleTextChange, focus, handleFocus, handleBlur }, forms: { setTextWithRef }, } = (0, useOtpInput_1.useOtpInput)(props);
+    const { models: { text, inputRef, focusedInputIndex, isFocused }, actions: { clear, handlePress, handleTextChange, focus, handleFocus, handleBlur }, forms: { setTextWithRef }, } = (0, useOtpInput_1.useOtpInput)(props);
     const { disabled, numberOfDigits = 6, autoFocus = true, hideStick, focusColor = "#A4D0A4", focusStickBlinkingDuration, secureTextEntry = false, theme = {}, textInputProps, } = props;
     const { containerStyle, inputsContainerStyle, pinCodeContainerStyle, pinCodeTextStyle, focusStickStyle, focusedPinCodeContainerStyle, filledPinCodeContainerStyle, disabledPinCodeContainerStyle, } = theme;
     (0, react_1.useImperativeHandle)(ref, () => ({ clear, focus, setValue: setTextWithRef }));
-    const generatePinCodeContainerStyle = (isFocusedInput, char) => {
+    const generatePinCodeContainerStyle = (isFocusedContainer, char) => {
         const stylesArray = [OtpInput_styles_1.styles.codeContainer, pinCodeContainerStyle];
-        if (focusColor && isFocusedInput) {
+        if (focusColor && isFocusedContainer) {
             stylesArray.push({ borderColor: focusColor });
         }
-        if (focusedPinCodeContainerStyle && isFocusedInput) {
+        if (focusedPinCodeContainerStyle && isFocusedContainer) {
             stylesArray.push(focusedPinCodeContainerStyle);
@@ -31,18 +31,18 @@ }
     };
-    return (<react_native_1.View style={[OtpInput_styles_1.styles.container, containerStyle]}>
-      <react_native_1.View style={[OtpInput_styles_1.styles.inputsContainer, inputsContainerStyle]}>
-        {Array(numberOfDigits)
+    return (<react_native_1.View style={[OtpInput_styles_1.styles.container, containerStyle, inputsContainerStyle]}>
+      {Array(numberOfDigits)
             .fill(0)
             .map((_, index) => {
             const char = text[index];
-            const isFocusedInput = index === focusedInputIndex && !disabled && Boolean(hasCursor);
-            return (<react_native_1.Pressable key={`${char}-${index}`} disabled={disabled} onPress={handlePress} style={generatePinCodeContainerStyle(isFocusedInput, char)} 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>);
+            const isFocusedInput = index === focusedInputIndex && !disabled && Boolean(isFocused);
+            const isFilledLastInput = text.length === numberOfDigits && index === text.length - 1;
+            const isFocusedContainer = isFocusedInput || (isFilledLastInput && Boolean(isFocused));
+            return (<react_native_1.Pressable key={`${char}-${index}`} disabled={disabled} onPress={handlePress} style={generatePinCodeContainerStyle(isFocusedContainer, char)} 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" keyboardType="numeric" textContentType="oneTimeCode" ref={inputRef} autoFocus={autoFocus} secureTextEntry={secureTextEntry} autoComplete={react_native_1.Platform.OS === "android" ? "sms-otp" : "one-time-code"} aria-disabled={disabled} editable={!disabled} testID="otp-input-hidden" onFocus={handleFocus} onBlur={handleBlur} {...textInputProps} style={[OtpInput_styles_1.styles.hiddenInput, textInputProps?.style]}/>
     </react_native_1.View>);
 });

dist/OtpInput/OtpInput.styles.d.ts

 export declare const styles: {
     container: {
+        width: string;
         flexDirection: "row";
-    };
-    inputsContainer: {
-        flexDirection: "row";
-        flex: number;
         justifyContent: "space-between";
@@ -9,0 +6,0 @@ };

dist/OtpInput/OtpInput.styles.js

@@ -7,7 +7,4 @@ "use strict";
     container: {
+        width: "100%",
         flexDirection: "row",
-    },
-    inputsContainer: {
-        flexDirection: "row",
-        flex: 1,
         justifyContent: "space-between",
@@ -14,0 +11,0 @@ },

dist/OtpInput/OtpInput.types.d.ts

@@ -8,2 +8,3 @@ import { ColorValue, TextInputProps, TextStyle, ViewStyle } from "react-native";
     onFilled?: (text: string) => void;
+    blurOnFilled?: boolean;
     hideStick?: boolean;
@@ -23,2 +24,5 @@ focusStickBlinkingDuration?: number;
     containerStyle?: ViewStyle;
+    /**
+     * @deprecated Use `containerStyle` instead
+     */
     inputsContainerStyle?: ViewStyle;
@@ -25,0 +29,0 @@ pinCodeContainerStyle?: ViewStyle;

dist/OtpInput/useOtpInput.d.ts

 /// <reference types="react" />
 import { TextInput } from "react-native";
 import { OtpInputProps } from "./OtpInput.types";
-export declare const useOtpInput: ({ onTextChange, onFilled, numberOfDigits, disabled, autoFocus, }: OtpInputProps) => {
+export declare const useOtpInput: ({ onTextChange, onFilled, numberOfDigits, disabled, autoFocus, blurOnFilled, }: OtpInputProps) => {
     models: {
@@ -9,3 +9,3 @@ text: string;
         focusedInputIndex: number;
-        hasCursor: boolean;
+        isFocused: boolean;
     };
@@ -12,0 +12,0 @@ actions: {

dist/OtpInput/useOtpInput.js

@@ -6,5 +6,5 @@ "use strict";
 const react_native_1 = require("react-native");
-const useOtpInput = ({ onTextChange, onFilled, numberOfDigits = 6, disabled, autoFocus = true, }) => {
+const useOtpInput = ({ onTextChange, onFilled, numberOfDigits = 6, disabled, autoFocus = true, blurOnFilled, }) => {
     const [text, setText] = (0, react_1.useState)("");
-    const [hasCursor, setHasCursor] = (0, react_1.useState)(autoFocus);
+    const [isFocused, setIsFocused] = (0, react_1.useState)(autoFocus);
     const inputRef = (0, react_1.useRef)(null);
@@ -26,2 +26,3 @@ const focusedInputIndex = text.length;
             onFilled?.(value);
+            blurOnFilled && inputRef.current?.blur();
         }
@@ -40,9 +41,9 @@ };
     const handleFocus = () => {
-        setHasCursor(true);
+        setIsFocused(true);
     };
     const handleBlur = () => {
-        setHasCursor(false);
+        setIsFocused(false);
     };
     return {
-        models: { text, inputRef, focusedInputIndex, hasCursor },
+        models: { text, inputRef, focusedInputIndex, isFocused },
         actions: { handlePress, handleTextChange, clear, focus, handleFocus, handleBlur },
@@ -49,0 +50,0 @@ forms: { setText, setTextWithRef },

package.json

 {
   "name": "react-native-otp-entry",
-  "version": "1.6.1",
+  "version": "1.7.0",
   "description": "A fully modifiable OTP Input Component for React Native",
@@ -5,0 +5,0 @@ "main": "dist/index.js",

README.MD

@@ -5,2 +5,3 @@ # react-native-otp-entry
 [![npm](https://img.shields.io/npm/dm/react-native-otp-entry.svg?&kill_cache=1)]()
+[![install size](https://packagephobia.com/badge?p=react-native-otp-entry)](https://packagephobia.com/result?p=react-native-otp-entry)
 [![cov](https://anday013.github.io/react-native-otp-entry/badges/coverage.svg?&kill_cache=1)](https://github.com/anday013/react-native-otp-entry/actions)
@@ -66,5 +67,7 @@ [![License](https://img.shields.io/badge/license-MIT-blue.svg?&kill_cache=1)](https://github.com/your-username/react-native-otp-entry/blob/main/LICENSE)
      onFilled={(text) => console.log(`OTP is ${text}`)}
+     textInputProps={{
+       accessibilityLabel: "One-Time Password",
+     }}
      theme={{
        containerStyle: styles.container,
-       inputsContainerStyle: styles.inputsContainer,
        pinCodeContainerStyle: styles.pinCodeContainer,
@@ -85,11 +88,12 @@ pinCodeTextStyle: styles.pinCodeText,
 | `numberOfDigits`             | number                 | The number of digits to be displayed in the OTP entry.                                                         |
-| `autoFocus`                  | boolean                | Default: true. Set autofocus.                                                                                  |
+| `textInputProps`             | TextInputProps         | Extra props passed to underlying hidden TextInput (see: https://reactnative.dev/docs/textinput)                |
+| `autoFocus`                  | boolean                | _Default: true_. Sets autofocus.                                                                               |
 | `focusColor`                 | ColorValue             | The color of the input field border and stick when it is focused.                                              |
 | `onTextChange`               | (text: string) => void | A callback function is invoked when the OTP text changes. It receives the updated text as an argument.         |
 | `onFilled`                   | (text: string) => void | A callback function is invoked when the OTP input is fully filled. It receives a full otp code as an argument. |
-| `hideStick`                  | boolean                | Hide cursor of the focused input.                                                                              |
+| `blurOnFilled`               | boolean                | _Default: false_. Blurs (unfocuses) the input when the OTP input is fully filled.                              |
+| `hideStick`                  | boolean                | _Default: false_. Hides cursor of the focused input.                                                           |
 | `theme`                      | Theme                  | Custom styles for each element.                                                                                |
 | `focusStickBlinkingDuration` | number                 | The duration (in milliseconds) for the focus stick to blink.                                                   |
-| `disabled`                   | boolean                | Default: false. Disable the input                                                                              |
-| `textInputProps`             | TextInputProps         | Extra props passed to underlying hidden TextInput (see: https://reactnative.dev/docs/textinput)                |
+| `disabled`                   | boolean                | _Default: false_. Disables the input                                                                           |
 
@@ -99,3 +103,2 @@ | Theme                           | Type      | Description                                                                        |
 | `containerStyle`                | ViewStyle | Custom styles for the root `View`.                                                 |
-| `inputsContainerStyle`          | ViewStyle | Custom styles for the container that holds the input fields.                       |
 | `pinCodeContainerStyle`         | ViewStyle | Custom styles for the container that wraps each individual digit in the OTP entry. |
@@ -108,4 +111,8 @@ | `pinCodeTextStyle`              | TextStyle | Custom styles for the text within each individual digit in the OTP entry.          |
 
-Note: The `ViewStyle` and `TextStyle` types are imported from `react-native` and represent the style objects used in React Native for views and text, respectively.
+**Note:** The `ViewStyle` and `TextStyle` types are imported from `react-native` and represent the style objects used in React Native for views and text, respectively.
 
+**Tip:** If you have difficulties while applying `gap` or in any other style property to set a suitable space between the OTP input containers, please set the `width` in `containerStyle` to `'auto'` or `undefined`, as it is been set to `'100%'` by default.
+
+![Theme](otp.drawio.svg)
+
 ## Ref
@@ -112,0 +119,0 @@

Fixed alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

21743

3.06%

Number of lines in readme file

132

5.6%

Number of medium supply chain risk alerts

0

-100%

Worsened metrics

Lines of code

285

-0.35%

No dependency changes