Component

OTP Input

A segmented OTP / PIN field where each digit bounces in.

Preview

How to use AI prompt

How to use

Minimal, copy-pasteable code.

Verify.tsx

import { useState } from "react";
import { OtpInput } from "react-native-foonto";

export function Verify() {
  const [code, setCode] = useState("");

  return (
    <OtpInput
      length={4}
      value={code}
      onChange={setCode}
      onComplete={(value) => console.log("submit", value)}
      autoFocus
    />
  );
}

Props

Prop	Type	Default	Description
`value`req	`string`	—	Controlled value (digits only).
`onChange`req	`(value: string) => void`	—	Called on every edit.
`length`	`number`	4	Number of digit cells.
`onComplete`	`(value: string) => void`	—	Called once the final digit is entered.
`autoFocus`	`boolean`	false	Focus the field on mount.
`secure`	`boolean`	false	Mask digits with dots.
`cellSize`	`number`	56	Edge length of each cell in px.
`cellGap`	`number`	12	Gap between cells in px.
`focusColor`	`string`	'#6d28d9'	Highlight color for the active/filled cell.
`style`	`FoontoStyle`	—	Style for the row.

AI prompt

Install the library, then paste this into your AI coding agent to wire it up.

AI prompt

Add a segmented OTP / PIN input using the `react-native-foonto` library.

1. Make sure `react-native-foonto` and `react-native-reanimated` are installed.
2. Import `OtpInput` from `react-native-foonto`.
3. Store the code in `useState` and pass `value` + `onChange`.
4. Set `length` to your code size and handle `onComplete` to submit/verify.
5. Use `autoFocus` so the keyboard opens immediately; set `secure` for PINs.