- [API documentation react-native-confirmation-code-field](#api-documentation-react-native-confirmation-code-field) - [Components](#components) - [``](#codefield-) - [`cellCount?: number`](#cellcount-number) - [`renderCell: (options: {symbol: string, index: number, isFocused: boolean}) => ReactElement`](#rendercell-options-symbol-string-index-number-isfocused-boolean--reactelement) - [`RootComponent?: ComponentType`](#rootcomponent-componenttypeany) - [`InputComponent?: ComponentType`](#inputcomponent-componenttypeany) - [`rootStyle?: StyleProp`](#rootstyle-styleproprootcomponent) - [`RootProps?: Object`](#rootprops-object) - [`textInputStyle?: StyleProp`](#textinputstyle-styleproptextstyle) - [``](#cursor) - [Hooks](#hooks) - [`useClearByFocusCell({value?: string, setValue: (text: string) => void})`](#useclearbyfocuscellvalue-string-setvalue-text-string--void) - [`useBlurOnFulfill({value?: string, cellCount: number}): Ref`](#usebluronfulfillvalue-string-cellcount-number-reftextinput) # API documentation react-native-confirmation-code-field ## Components ### `` This a base component that render `RootComponent (default: View)` with cells that would be returned by `renderCell()` and a `` that will be invisible and over all cells within root component JSX tree will be next: ```js {renderCell({index: 0,...})} {renderCell({index: 1,...})} // ... ``` Inherits [TextInput Props](https://facebook.github.io/react-native/docs/textinput#props), (except `style`, use `rootStyle` for applying styles) #### `cellCount?: number` Number of characters in input (optional, default: 4) #### `renderCell: (options: {symbol: string, index: number, isFocused: boolean}) => ReactElement` Required function for Cell rendering, will be invoke with next options: - `symbol: string` - `index: number` - `isFocused: boolean` #### `RootComponent?: ComponentType` If you want change root component for example using animations `RootComponent={Animated.View}` (optional, default [`View`](https://facebook.github.io/react-native/docs/view)) #### `InputComponent?: ComponentType` If you want to provide a custom TextInput component that can receive the same props (optional, default [`TextInput`](https://facebook.github.io/react-native/docs/textinput)) #### `rootStyle?: StyleProp` Styles for root component (optional) #### `RootProps?: Object` Any props that will applied for root component `` #### `textInputStyle?: StyleProp` Styles for invisible ``, can be used for testing or debug (optional) --- ### `` It's a help component for simulation a cursor blinking animation in `` components ```js import {Cursor} from 'react-native-confirmation-code-field'; ; ``` --- ## Hooks ### `useClearByFocusCell({value?: string, setValue: (text: string) => void})` Simple hook that add functionality that trim value by pressed cell After invoke this hook wil return array with two values `[props,getCellOnLayout]`; - `props` - an object that you should spreed to `` - `getCellOnLayout(index: number): Function` - helper method that returns `onLayout` handler ⚠️ ⚠️ ⚠️ If you need to style only one borderX (example `borderBottom`) you need to know about React Native issue with [border styles for `` on iOS](https://github.com/facebook/react-native/issues/23537). To fix it need `` wrapper for Cell, but don't forger to move `onLayout={getCellOnLayoutHandler(index)` to ``: ```js // BAD 👎 renderCell={({index, symbol, isFocused}) => ( {...} )} // GOOD ✔️ renderCell={({index, symbol, isFocused}) => ( {...} )} ``` **Example:** ```js import { CodeField, useClearByFocusCell, } from 'react-native-confirmation-code-field'; const App = () => { const [codeFieldProps, getCellOnLayout] = useClearByFocusCell({ value, setValue, }); return ( ( {symbol} )} /> ); }; ``` ### `useBlurOnFulfill({value?: string, cellCount: number}): Ref` This hook include a logic to blurring `` when value fulfilled You should pass two params: - `value?: string` - a string value that - `cellCount: number` Returned value will be a TextInput ref that you should pass to `` component. And when a value length would equal cellCount will be called `.blur()` method. It work perfectly with `useClearByFocusCell` hook. ```js import { CodeField, useBlurOnFulfill, } from 'react-native-confirmation-code-field'; const App = () => { const CELL_COUNT = 4; const ref = useBlurOnFulfill({value, cellCount: CELL_COUNT}); return ( ); }; ```