react-native-otp-entry

Use the theme prop to pass a Theme object containing ViewStyle and TextStyle objects for deep customization of the component's parts:

• containerStyle: Root View.
• pinCodeContainerStyle: Container wrapping each individual digit.
• pinCodeTextStyle: Text within each individual digit.
• placeholderTextStyle: Placeholder text style.
• focusStickStyle: The focus stick (cursor) style.
• focusedPinCodeContainerStyle: Container style when focused.
• filledPinCodeContainerStyle: Container style when it has a value.
• disabledPinCodeContainerStyle: Container style when disabled.

Tip: If you have trouble applying gap or spacing between containers, set containerStyle.width to 'auto' or undefined, as it defaults to '100%'.

<OtpInput
  numberOfDigits={6}
  theme={{
    containerStyle: styles.container,
    pinCodeContainerStyle: styles.pinCodeContainer,
    pinCodeTextStyle: styles.pinCodeText,
    focusStickStyle: styles.focusStick,
    focusedPinCodeContainerStyle: styles.activePinCodeContainer,
    placeholderTextStyle: styles.placeholderText,
    filledPinCodeContainerStyle: styles.filledPinCodeContainer,
    disabledPinCodeContainerStyle: styles.disabledPinCodeContainer,
  }}
/>

The OtpInput component accepts several props to control its behavior and appearance:

• numberOfDigits (number): The number of digits to be displayed.
• autoFocus (boolean): Sets autofocus. Defaults to true.
• focusColor (ColorValue): Color of the input field border and stick when focused.
• placeholder (string): Placeholder value.
• onTextChange ((text: string) => void): Callback when text changes.
• onFilled ((text: string) => void): Callback when the input is fully filled.
• blurOnFilled (boolean): Blurs the input when fully filled. Defaults to false.
• hideStick (boolean): Hides the cursor of the focused input. Defaults to false.
• focusStickBlinkingDuration (number): Blinking duration for the focus stick in ms.
• disabled (boolean): Disables the input. Defaults to false.
• type ('alpha' | 'numeric' | 'alphanumeric'): Input type restriction.
• secureTextEntry (boolean): Obscures text (e.g., for PINs). Defaults to false.
• onFocus ((): void): Callback when focused.
• onBlur ((): void): Callback when blurred.
• textInputProps (TextInputProps): Extra props for the underlying hidden TextInput.
• textProps (TextProps): Props for the Text component rendering each digit.

The theme prop allows you to override the default styles for various parts of the component. This is the preferred way to apply custom styling to the container and individual cells.

Available theme keys:

• containerStyle: Style for the outer wrapper.
• inputsContainerStyle: Style for the container holding the input cells.
• pinCodeContainerStyle: Base style for each individual input cell.
• pinCodeTextStyle: Base style for the text inside the cells.
• focusStickStyle: Style for the blinking vertical cursor.
• focusedPinCodeContainerStyle: Style applied to a cell when it is focused.
• filledPinCodeContainerStyle: Style applied to a cell when it contains a character.
• disabledPinCodeContainerStyle: Style applied to cells when disabled is true.
• placeholderTextStyle: Style for the placeholder text.

<OtpInput
  theme={{
    pinCodeContainerStyle: { borderRadius: 8 },
    pinCodeTextStyle: { fontSize: 20, fontWeight: 'bold' },
    focusedPinCodeContainerStyle: { borderColor: 'blue' },
    filledPinCodeContainerStyle: { backgroundColor: '#f0f0f0' }
  }}
/>

The Theme interface allows for deep customization of the component's visual styles. Use the theme prop to pass a Theme object containing:

• containerStyle (ViewStyle): Styles for the root View. (Note: inputsContainerStyle is deprecated; use containerStyle instead).
• pinCodeContainerStyle (ViewStyle): Styles for the container wrapping each individual digit.
• pinCodeTextStyle (TextStyle): Styles for the text within each digit.
• focusStickStyle (ViewStyle): Styles for the focus stick (the indicator of the focused field).
• filledPinCodeContainerStyle (ViewStyle): Styles for the container of a filled digit.
• focusedPinCodeContainerStyle (ViewStyle): Styles for the container of the currently focused digit.
• disabledPinCodeContainerStyle (ViewStyle): Styles for the container of a disabled digit.
• placeholderTextStyle (TextStyle): Styles for the placeholder text.

const customTheme: Theme = {
  containerStyle: { marginTop: 20 },
  pinCodeContainerStyle: { borderWidth: 1, borderRadius: 4 },
  pinCodeTextStyle: { fontSize: 18, color: 'black' },
  focusedPinCodeContainerStyle: { borderColor: 'blue' },
  filledPinCodeContainerStyle: { backgroundColor: '#eee' },
};

<OTPInput
  numberOfDigits={6}
  theme={customTheme}
/>