diff --git a/src/OtpInput/OtpInput.tsx b/src/OtpInput/OtpInput.tsx index f1efc5d..4b5c395 100644 --- a/src/OtpInput/OtpInput.tsx +++ b/src/OtpInput/OtpInput.tsx @@ -23,6 +23,7 @@ export const OtpInput = forwardRef((props, ref) => { theme = {}, textInputProps, textProps, + buttonProps, type = "numeric", } = props; const { @@ -82,7 +83,13 @@ export const OtpInput = forwardRef((props, ref) => { disabled={disabled} onPress={handlePress} style={generatePinCodeContainerStyle(isFocusedContainer, char)} - testID="otp-input" + {...buttonProps} + testID={buttonProps?.testID ? `${buttonProps.testID}${index}` : `otp-input-${index}`} + {...(Platform.OS === "android" && { + accessibilityLabel: buttonProps?.testID + ? `${buttonProps.testID}${index}` + : `otp-input-${index}`, + })} > {isFocusedInput && !hideStick ? ( ((props, ref) => { ) : ( ((props, ref) => { aria-disabled={disabled} editable={!disabled} testID="otp-input-hidden" + {...(Platform.OS === "android" && { accessibilityLabel: "otp-input-hidden" })} onFocus={handleFocus} onBlur={handleBlur} caretHidden={Platform.OS === "ios"} diff --git a/src/OtpInput/OtpInput.types.ts b/src/OtpInput/OtpInput.types.ts index 6c50a3b..c4e2881 100644 --- a/src/OtpInput/OtpInput.types.ts +++ b/src/OtpInput/OtpInput.types.ts @@ -1,4 +1,11 @@ -import { ColorValue, TextInputProps, TextProps, TextStyle, ViewStyle } from "react-native"; +import { + ColorValue, + TextInputProps, + TextProps, + TextStyle, + ViewStyle, + PressableProps, +} from "react-native"; export interface OtpInputProps { numberOfDigits?: number; @@ -16,6 +23,7 @@ export interface OtpInputProps { disabled?: boolean; textInputProps?: TextInputProps; textProps?: TextProps; + buttonProps?: PressableProps; type?: "alpha" | "numeric" | "alphanumeric"; placeholder?: string; } diff --git a/src/OtpInput/VerticalStick.tsx b/src/OtpInput/VerticalStick.tsx index badd6e7..0c1aa0e 100644 --- a/src/OtpInput/VerticalStick.tsx +++ b/src/OtpInput/VerticalStick.tsx @@ -1,6 +1,6 @@ import * as React from "react"; import { memo, useEffect, useRef } from "react"; -import { Animated, ColorValue, View, ViewStyle } from "react-native"; +import { Animated, ColorValue, View, ViewStyle, Platform } from "react-native"; import { styles } from "./OtpInput.styles"; interface VerticalStickProps { @@ -38,6 +38,9 @@ export const VerticalStick: React.FC = memo( );