From 9611920ae543d629327b4eafaf1ae46a11cf2de8 Mon Sep 17 00:00:00 2001 From: Edd Williams Date: Sun, 7 Jan 2024 18:41:18 +0000 Subject: [PATCH 1/7] add autocomplete to input --- src/OtpInput/OtpInput.tsx | 2 ++ src/OtpInput/OtpInput.types.ts | 3 ++- 2 files changed, 4 insertions(+), 1 deletion(-) diff --git a/src/OtpInput/OtpInput.tsx b/src/OtpInput/OtpInput.tsx index baed2ab..eeaeb13 100644 --- a/src/OtpInput/OtpInput.tsx +++ b/src/OtpInput/OtpInput.tsx @@ -18,6 +18,7 @@ export const OtpInput = forwardRef((props, ref) => { focusColor = "#A4D0A4", focusStickBlinkingDuration, secureTextEntry = false, + autoComplete = "sms-otp", theme = {}, } = props; const { @@ -79,6 +80,7 @@ export const OtpInput = forwardRef((props, ref) => { autoFocus={autoFocus} style={styles.hiddenInput} secureTextEntry={secureTextEntry} + autoComplete={autoComplete} testID="otp-input-hidden" /> diff --git a/src/OtpInput/OtpInput.types.ts b/src/OtpInput/OtpInput.types.ts index 5c95cc5..defdecc 100644 --- a/src/OtpInput/OtpInput.types.ts +++ b/src/OtpInput/OtpInput.types.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; @@ -10,6 +10,7 @@ export interface OtpInputProps { focusStickBlinkingDuration?: number; secureTextEntry?: boolean; theme?: Theme; + autoComplete?: TextInputProps["autoComplete"]; } export interface OtpInputRef { From 03fedd51cbb0ca20da7775e8271b89671456d21a Mon Sep 17 00:00:00 2001 From: Edd Williams Date: Sun, 7 Jan 2024 18:49:43 +0000 Subject: [PATCH 2/7] add build file --- dist/src/OtpInput/OtpInput.js | 4 ++-- dist/src/OtpInput/OtpInput.types.d.ts | 3 ++- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/dist/src/OtpInput/OtpInput.js b/dist/src/OtpInput/OtpInput.js index c9cc872..48cbba5 100644 --- a/dist/src/OtpInput/OtpInput.js +++ b/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 ( @@ -32,6 +32,6 @@ exports.OtpInput = (0, react_1.forwardRef)((props, ref) => { ); })} - + ); }); diff --git a/dist/src/OtpInput/OtpInput.types.d.ts b/dist/src/OtpInput/OtpInput.types.d.ts index 36641ab..d5d383b 100644 --- a/dist/src/OtpInput/OtpInput.types.d.ts +++ b/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; From 0af785c2578c215acd9eaa16acfb48e6da3dbfbc Mon Sep 17 00:00:00 2001 From: Edd Williams Date: Sun, 7 Jan 2024 18:52:36 +0000 Subject: [PATCH 3/7] add to readme --- README.MD | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/README.MD b/README.MD index 70052cc..77645fc 100644 --- a/README.MD +++ b/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 | | ------------------------------ | --------- | ---------------------------------------------------------------------------------- | From 7ef659f31e6ec5da63f346a5bd9bd628682643c9 Mon Sep 17 00:00:00 2001 From: Edd Williams Date: Sun, 7 Jan 2024 19:08:45 +0000 Subject: [PATCH 4/7] update snapshot --- src/OtpInput/__snapshots__/OtpInput.test.tsx.snap | 1 + 1 file changed, 1 insertion(+) diff --git a/src/OtpInput/__snapshots__/OtpInput.test.tsx.snap b/src/OtpInput/__snapshots__/OtpInput.test.tsx.snap index 560b9c0..b392b29 100644 --- a/src/OtpInput/__snapshots__/OtpInput.test.tsx.snap +++ b/src/OtpInput/__snapshots__/OtpInput.test.tsx.snap @@ -396,6 +396,7 @@ exports[`OtpInput UI should render correctly 1`] = ` Date: Mon, 8 Jan 2024 08:27:43 +0000 Subject: [PATCH 5/7] bump react native version --- package-lock.json | 8 ++++---- package.json | 2 +- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/package-lock.json b/package-lock.json index cf44830..9ac6e84 100644 --- a/package-lock.json +++ b/package-lock.json @@ -16,7 +16,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" @@ -9553,9 +9553,9 @@ "dev": true }, "node_modules/react-native": { - "version": "0.71.8", - "resolved": "https://registry.npmjs.org/react-native/-/react-native-0.71.8.tgz", - "integrity": "sha512-ftMAuhpgTkbHU9brrqsEyxcNrpYvXKeATY+if22Nfhhg1zW+6wn95w9otwTnA3xHkljPCbng8mUhmmERjGEl7g==", + "version": "0.71.9", + "resolved": "https://registry.npmjs.org/react-native/-/react-native-0.71.9.tgz", + "integrity": "sha512-V82zPt6LEQpHGtI0nmsEvjPp70o8CO0OwKfo3H8pMFH+lJJJQduVCn1KrPgPxja7q8GxUUo7hErr5WToHMH+/g==", "dev": true, "dependencies": { "@jest/create-cache-key-function": "^29.2.1", diff --git a/package.json b/package.json index 2245f9c..ba0c542 100644 --- a/package.json +++ b/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" From d1cf9cb90f0145c1c8b7764ec58a3b5e5b9e928e Mon Sep 17 00:00:00 2001 From: Edd Williams Date: Mon, 8 Jan 2024 08:28:00 +0000 Subject: [PATCH 6/7] fix autocomplete to one time code --- src/OtpInput/OtpInput.tsx | 3 +-- src/OtpInput/OtpInput.types.ts | 3 +-- 2 files changed, 2 insertions(+), 4 deletions(-) diff --git a/src/OtpInput/OtpInput.tsx b/src/OtpInput/OtpInput.tsx index eeaeb13..fdc5d39 100644 --- a/src/OtpInput/OtpInput.tsx +++ b/src/OtpInput/OtpInput.tsx @@ -18,7 +18,6 @@ export const OtpInput = forwardRef((props, ref) => { focusColor = "#A4D0A4", focusStickBlinkingDuration, secureTextEntry = false, - autoComplete = "sms-otp", theme = {}, } = props; const { @@ -80,7 +79,7 @@ export const OtpInput = forwardRef((props, ref) => { autoFocus={autoFocus} style={styles.hiddenInput} secureTextEntry={secureTextEntry} - autoComplete={autoComplete} + autoComplete="one-time-code" testID="otp-input-hidden" /> diff --git a/src/OtpInput/OtpInput.types.ts b/src/OtpInput/OtpInput.types.ts index defdecc..5c95cc5 100644 --- a/src/OtpInput/OtpInput.types.ts +++ b/src/OtpInput/OtpInput.types.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; @@ -10,7 +10,6 @@ export interface OtpInputProps { focusStickBlinkingDuration?: number; secureTextEntry?: boolean; theme?: Theme; - autoComplete?: TextInputProps["autoComplete"]; } export interface OtpInputRef { From d519da2324f06acee6bc0d1448b5a723d0fbe750 Mon Sep 17 00:00:00 2001 From: Edd Williams Date: Mon, 8 Jan 2024 08:29:37 +0000 Subject: [PATCH 7/7] update snapshot --- src/OtpInput/__snapshots__/OtpInput.test.tsx.snap | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/OtpInput/__snapshots__/OtpInput.test.tsx.snap b/src/OtpInput/__snapshots__/OtpInput.test.tsx.snap index b392b29..a3b7a81 100644 --- a/src/OtpInput/__snapshots__/OtpInput.test.tsx.snap +++ b/src/OtpInput/__snapshots__/OtpInput.test.tsx.snap @@ -396,7 +396,7 @@ exports[`OtpInput UI should render correctly 1`] = `