PinInput

Entrada de código OTP / PIN con celdas separadas y un único input oculto, así funcionan pegar y autocompletar. autofill work.

Uso

import {PinInput} from 'rn-inkpad';

<PinInput length={6} onComplete={verify} autoFocus />
<PinInput length={4} secure variant="underline" />
<PinInput length={4} defaultValue="1234" error />

Props

Nombre	Tipo	Por defecto	Descripción
length	number	4	Number of cells.
value	string		Controlled value.
defaultValue	string	''	Initial value (uncontrolled).
onChange	(value: string) => void		Called on every change.
onComplete	(value: string) => void		Called once all cells are filled.
secure	boolean	false	Masks the digits.
numeric	boolean	true	Accept digits only.
keyboardType	KeyboardTypeOptions	number-pad	Keyboard.
autoFocus	boolean	false	Focus on mount.
disabled	boolean	false	Disables input.
error	boolean	false	Error state (red border).
variant	'box' | 'underline'	box	Cell style.
size	number	48	Cell size.
gap	number	10	Space between cells.
radius	number	theme radius md	Cell radius (box).
color	string	theme primary	Focused cell color.
borderColor	string	theme border	Idle cell color.
focusedColor	string	color	Focused cell color.
errorColor	string	theme error	Error color.
textColor	string	theme text	Digit color.
backgroundColor	string	theme surface (box)	Cell background.
style, cellStyle, textStyle	StyleProp		Custom styles.