react-native-headless-code-input v1.0.7

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

npm install react-native-headless-code-input

or:

yarn add react-native-headless-code-input

Usage

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 (
    <Container>
      <TouchableOpacity {...wrapperProps}>
        {fields.map(item => (
          <Field
            focused={focusedId === item.id}
            filled={Boolean(item.value)}
            key={item.id}
          >
            <Value>{item.value}</Value>
          </Field>
        ))}
      </TouchableOpacity>
      <TextInput {...inputProps} /> {/* Add this TextInput to handle input value */}
    </Container>
  );
};

export default App;

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