@gluestack-ui/pin-input

@gluestack-style/pin-input

Installation

To use @gluestack-ui/pin-input, all you need to do is install the @gluestack-ui/pin-input package:

$ yarn add @gluestack-ui/pin-input

# or

$ npm i @gluestack-ui/pin-input

Usage

The PinInput component is specifically designed for capturing One-Time Passwords (OTPs) in a user-friendly and secure manner. It's perfect for implementing OTP verification in your application, ensuring a smooth user experience. Here's an example of how to use this package to create an OTP input field:

import { View, TextInput } from 'react-native';
import { createPinInput } from '@gluestack-ui/pin-input';
const PinInputRoot = createPinInput({
  Root: View,
  Input: TextInput,
});

Customizing the pin-input:

Default styling of all these components can be found in the components/core/pin-input file. For reference, you can view the source code of the styled pin-input components.

import { View, TextInput } from 'react-native';

// import the createPinInput function
import { createPinInput } from '@gluestack-ui/pin-input';

// Understanding the API
const PinInputField = createPinInput({
  Root: View,
  Input: TextInput,
});

// Using the pin-input component
export default () => (
  <PinInputField>
    <PinInputFieldInput />
  </PinInputField>
);

More guides on how to get started are available here.