OTP Input
Two fused groups of three digits for SMS codes, blinking caret, wrong codes shake with an error buzz.
Prerequisites
npx expo install react-native-reanimated expo-haptics react-native-css
Install
npx @rslab/cli add otp-input
Usage
Controlled only. One hidden TextInput stretched over the row captures everything, so SMS autofill (oneTimeCode / sms-otp) works out of the box:
import { OtpInput } from '@/components/ui/OtpInput';
const [code, setCode] = useState('');
<OtpInput
value={code}
onChangeText={setCode}
onComplete={(c) => verify(c)}
error={failed}
success={verified}
/>;On a wrong code, set error, then clear value and error after a beat so the user can retry.
Props
PropTypeDefault
variant?'boxes''grouped''boxes'boxes is one bordered cell per digit; grouped fuses the digits into two blocks separated by a dash.
length?number6Number of cells.
valuestring-Controlled digits, non-digits are stripped.
onChangeText(code: string) => void-onComplete?(code: string) => void-Fires with the code when the last cell fills.
error?booleanfalseRed borders, shake and error haptic.
success?booleanfalseGreen borders and success haptic.
autoFocus?booleanfalseclassName?string-Extends the row.
See exactly how this works with an RSLAB subscription.
Get Pro