input-otp-native

Input OTP Native is a one-time passcode (OTP) input component designed specifically for React Native and Expo applications. It is unstyled and fully customizable, allowing developers to implement secure code entry fields with high flexibility.

Key Features

• React Native/Expo Support: Built natively for the React Native ecosystem.
• Production Ready: Maintains 100% test coverage for reliability.
• Customizable Styling: Uses render props for complete control over the UI, including support for NativeWind.
• Pre-made Styles: Offers four copy-pasteable styles: Apple, Stripe, Revolt, and Dashed.
• Animation Friendly: Easily integrates with react-native-reanimated.
• Web Support: Works on the web via integration with otp-input.

Each slot exposes a focus() method. You can use this to allow users to tap a specific slot (e.g., via a Pressable) to resume typing from that position without needing a component ref. This is particularly useful for suppressing default iOS clear behavior when tapping slots.

<OTPInput
  maxLength={6}
  render={({ slots }) => (
    <View style={{ flexDirection: 'row', gap: 8 }}>
      {slots.map((slot, index) => (
        <Pressable key={index} onPress={slot.focus}>
          <Slot {...slot} />
        </Pressable>
      ))}
    </View>
  )}
/>

The project follows a standard Astro + Starlight structure:

• src/content/docs/: Place your .md or .mdx files here. Each file is automatically exposed as a route based on its filename.
• src/assets/: Store images here to embed them in Markdown using relative links.
• public/: Store static assets like favicons.
• tailwind.config.mjs: Configuration for Tailwind CSS.
• astro.config.mjs: Configuration for the Astro framework.

To customize the appearance of the input, use the render prop. This function receives RenderProps, which contains an array of slots. Each slot is a SlotProps object representing an individual digit position.

Each slot provides a focus() method. You can use this to allow users to tap a specific slot (e.g., via a Pressable) to resume typing from that position without needing a manual ref.

<OTPInput
  maxLength={6}
  render={({ slots }) => (
    <View style={{ flexDirection: 'row', gap: 8 }}>
      {slots.map((slot, index) => (
        <Pressable key={index} onPress={slot.focus}>
          <Slot {...slot} />
        </Pressable>
      ))}
    </View>
  )}
/>

To create a new documentation project using the Starlight starter kit with Tailwind CSS support, use the following command with yarn:

yarn create astro@latest -- --template starlight/tailwind

Install the package using your preferred package manager:

npm

npm install input-otp-native

yarn

yarn add input-otp-native

pnpm

pnpm add input-otp-native

For projects not using Nativewind, you can achieve a dashed style by using standard React Native StyleSheet. Apply styles to the input slots to define the borders and dashed properties for each OTP segment.

// Example implementation using StyleSheet
import { StyleSheet } from 'react-native';
import { OTPInput } from 'input-otp-native';

// Implementation logic provided in dashed.tsx

To create a dashed OTP input style using Nativewind, use the OTPInput component and apply Tailwind-style utility classes via the slotProps or renderProps (depending on your specific implementation needs) to the individual input slots. Ensure Nativewind is correctly installed and configured in your React Native project before attempting this.

// Example implementation using Nativewind
// Note: The exact component structure depends on the OTPInput API
import { OTPInput } from 'input-otp-native';

// Implementation logic provided in dashed-nativewind.tsx

For projects not using Nativewind, you can implement the Apple-style OTP input using standard React Native StyleSheet. This approach uses traditional style objects to define the appearance of the input cells and container.

// Example implementation using StyleSheet
import { StyleSheet } from 'react-native';
import { OTPInput } from 'input-otp-native';

// The actual implementation is provided in the apple.tsx example

To implement the Revolt style using Nativewind, ensure that Nativewind is properly installed and configured in your React Native project. You can then use Tailwind classes via the className prop on the components provided by input-otp-native to achieve the Revolt aesthetic.

// revolt-nativewind.tsx
// Note: This is a conceptual representation of the example provided in the documentation
import { OTPInput } from 'input-otp-native';

export function RevoltNativeWind() {
  return (
    <OTPInput
      // Use Nativewind/Tailwind classes for styling
      className="flex-row gap-2"
      // ... other props
    />
  );
}