Version: Next 🚧

Migrate from `react-native-otp-entry`

- import { OtpInput } from 'react-native-otp-entry';
+ import { OtpField } from '@elik56a/react-native-pickers';

- <OtpInput
-   numberOfDigits={6}
-   focusColor="#007AFF"
-   onTextChange={setCode}
-   onFilled={verify}
-   theme={{ pinCodeContainerStyle: styles.cell, focusedPinCodeContainerStyle: styles.focused }}
- />
+ <OtpField
+   autoFocus
+   onChange={setCode}
+   onComplete={verify}
+   theme={{ colors: { primary: '#007AFF' } }}
+   styles={{ cell: styles.cell, focusedCell: styles.focused }}
+ />

otp-entry	React Native Pickers
`numberOfDigits`	`length` (default `6`)
`onTextChange`	`onChange`
`onFilled`	`onComplete`
`autoFocus` (default `true`)	`autoFocus` (default `false`)
`focusColor`	`theme={{ colors: { primary } }}`
`type="numeric"` / `"alphanumeric"`	`inputMode="numeric"` / `"text"`
`secureTextEntry` / `disabled`	`secureTextEntry` / `disabled`
`blurOnFilled`	`onComplete={(code) => { Keyboard.dismiss(); verify(code); }}`
`hideStick`	`styles={{ caret: { opacity: 0 } }}`
`theme.containerStyle`	`styles.container`
`theme.pinCodeContainerStyle`	`styles.cell`
`theme.focusedPinCodeContainerStyle`	`styles.focusedCell`
`theme.filledPinCodeContainerStyle`	`styles.filledCell`
`theme.pinCodeTextStyle`	`styles.cellText`
`theme.focusStickStyle`	`styles.caret`
`ref.clear()` / `ref.setValue(code)`	a controlled `value`
`textInputProps.accessibilityLabel`	`accessibilityLabel` (default Verification code)

Without a styles override, OtpField's cells look like the design's text fields: iOS on iPhone, Material on Android and outlined boxes with a focus ring on the web.

See all migration guides for other libraries, and Comparison for when another library is the better choice.