Introduction

An UI module for user-side pincode verification.

Component features:

• 🔮 Simple and tiny 1.55 KB. Easy to use;

• 🚮 Clearing part of the code by clicking on the cell;

• 🍎 Support “fast paste SMS-code” on iOS. And custom code paste for Android;

• ⚡ TextInput ref support;

• 🛠 Highly customizable. Can be used as masked TextInput;

• 🤓 Readable

  Props

  Name	Type	Description	Default
  descriptionText	String	A description text	Please enter pincode for entry
  spaceColor	Color	Color of line under digit	#FF0000
  closeButtonColor	Color	Color of X - close button	#FF0000
  onEnteredPincode	Function	A function that returns entered code	-
  onCloseView	Function	On press close button, will be useful to close view	-
  onPressTouchId	Function	Touch Id is not available, but you can make it by yourself	-
  withTouchId	Boolean	If you do not neet touch id, you can set it to false	TRUE

Installation

npm i react-native-code-verification --save --force

Example

import React, {useState} from 'react';
import {SafeAreaView, Text} from 'react-native';

import {
  CodeField,
  Cursor,
  useBlurOnFulfill,
  useClearByFocusCell,
  MaskSymbol,
  isLastFilledCell,
} from 'react-native-confirmation-code-field';

import styles from './styles';

const CELL_COUNT = 6;

const MaskExample = () => {
  const [value, setValue] = useState('');
  const ref = useBlurOnFulfill({value, cellCount: CELL_COUNT});
  const [props, getCellOnLayoutHandler] = useClearByFocusCell({
    value,
    setValue,
  });
  const renderCell = ({index, symbol, isFocused}) => {
    let textChild = null;

    if (symbol) {
      textChild = (
        <MaskSymbol
          maskSymbol="👍"
          isLastFilledCell={isLastFilledCell({index, value})}>
          {symbol}
        </MaskSymbol>
      );
    } else if (isFocused) {
      textChild = <Cursor />;
    }

    return (
      <Text
        key={index}
        style={[styles.cell, isFocused && styles.focusCell]}
        onLayout={getCellOnLayoutHandler(index)}>
        {textChild}
      </Text>
    );
  };

  return (
    <SafeAreaView style={styles.root}>
      <Text style={styles.title}>Field with custom mask</Text>
      <CodeField
        ref={ref}
        {...props}
        value={value}
        onChangeText={setValue}
        cellCount={CELL_COUNT}
        rootStyle={styles.codeFiledRoot}
        keyboardType="number-pad"
        textContentType="oneTimeCode"
        renderCell={renderCell}
      />
    </SafeAreaView>
  );
};

export default MaskExample;

Tutorial

Coming Soon…

Style File(styles.js)

import {StyleSheet} from 'react-native';

export default StyleSheet.create({
  root: {padding: 20, minHeight: 300},
  title: {textAlign: 'center', fontSize: 30},
  codeFiledRoot: {marginTop: 20},
  cell: {
    width: 40,
    height: 40,
    lineHeight: 40,
    fontSize: 24,
    borderWidth: 2,
    borderColor: '#00000030',
    textAlign: 'center',
  },
  focusCell: {
    borderColor: '#000',
  },
});