react-native-code-input

A headless hook to handle verification code input.


Inspired by react-dropzone and react-table, this is a hook completely UI-free.

Installation

``bash
npm install react-native-headless-code-input
`
or:
`bash
yarn add react-native-headless-code-input
`




Usage

`tsx static
import React from 'react';
import { TextInput, TouchableOpacity } from 'react-native';
import useCodeInput from 'react-native-headless-code-input';

import { Container, Wrapper, Field, Value } from './styles';

const App: React.FC = () => {
const { wrapperProps, fields, inputProps, focusedId, value } = useCodeInput({
length: 4,
onFulfill: (code) => handleSubmit(code),
onChangeText: (code) => handleChange(code),
});
return (


{fields.map(item => (
focused={focusedId === item.id}
filled={Boolean(item.value)}
key={item.id}
>
{item.value}

))}

{/ Add this TextInput to handle input value /}

);
};

export default App;

`

IMPORTANT: Under the hood, this lib makes use of hooks, therefore, using it requires React >= 16.8`.