Merge pull request #33 from EddWills95/allow-autocomplete-prop

feat: add `autoComplete` to `TextInput`

README.MD

@@ -77,7 +77,8 @@ The `react-native-otp-entry` component accepts the following props:
 | `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.                                                                              |
 | `theme`                      | Theme                  | Custom styles for each element.                                                                                |
-| `focusStickBlinkingDuration` | number                 | The duration (in milliseconds) for the focus stick to blink.                                                   |
+| `focusStickBlinkingDuration` | number                 | The duration (in milliseconds) for the focus stick to blink.
+| `autoComplete`               | string                 | passed to underlying TextInput (see: https://reactnative.dev/docs/textinput#autocomplete) |
 
 | Theme                          | Type      | Description                                                                        |
 | ------------------------------ | --------- | ---------------------------------------------------------------------------------- |

dist/src/OtpInput/OtpInput.js

@@ -8,7 +8,7 @@ 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, theme = {}, } = props;
+    const { numberOfDigits, autoFocus = true, hideStick, focusColor = "#A4D0A4", focusStickBlinkingDuration, secureTextEntry = false, autoComplete = "sms-otp", theme = {}, } = props;
     const { containerStyle, inputsContainerStyle, pinCodeContainerStyle, pinCodeTextStyle, focusStickStyle, focusedPinCodeContainerStyle, } = theme;
     (0, react_1.useImperativeHandle)(ref, () => ({ clear, focus, setValue: setTextWithRef }));
     return (<react_native_1.View style={[OtpInput_styles_1.styles.container, containerStyle]}>
@@ -32,6 +32,6 @@ exports.OtpInput = (0, react_1.forwardRef)((props, ref) => {
               </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} 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={autoComplete} testID="otp-input-hidden"/>
     </react_native_1.View>);
 });

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

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

package.json

@@ -36,7 +36,7 @@
     "jest": "^29.7.0",
     "prettier": "^3.0.2",
     "react": "18.2.0",
-    "react-native": "0.71.8",
+    "react-native": "0.71.9",
     "ts-jest": "^29.1.1",
     "ts-node": "^10.9.1",
     "typescript": "^5.1.3"

src/OtpInput/OtpInput.tsx

@@ -83,6 +83,7 @@ export const OtpInput = forwardRef<OtpInputRef, OtpInputProps>((props, ref) => {
         autoFocus={autoFocus}
         style={styles.hiddenInput}
         secureTextEntry={secureTextEntry}
+        autoComplete="one-time-code"
         testID="otp-input-hidden"
       />
     </View>

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

@@ -402,6 +402,7 @@ exports[`OtpInput UI should render correctly 1`] = `
     </View>
   </View>
   <TextInput
+    autoComplete="one-time-code"
     autoFocus={true}
     inputMode="numeric"
     maxLength={6}