HomeOur TeamContact

Underline Code Verification/ Authentication 1

By Utkarsh Lubal
Published in UI
September 12, 2022
1 min read
Underline Code Verification/ Authentication 1

Table Of Contents

01
Introduction
02
Installation
03
Example
04
Tutorial
05
Style File(styles.js)

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

    NameTypeDescriptionDefault
    descriptionTextStringA description textPlease enter pincode for entry
    spaceColorColorColor of line under digit#FF0000
    closeButtonColorColorColor of X - close button#FF0000
    onEnteredPincodeFunctionA function that returns entered code-
    onCloseViewFunctionOn press close button, will be useful to close view-
    onPressTouchIdFunctionTouch Id is not available, but you can make it by yourself-
    withTouchIdBooleanIf you do not neet touch id, you can set it to falseTRUE

Installation

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

Example


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

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

import styles from './styles';

const CELL_COUNT = 4;

const UnderlineExample = () => {
  const [value, setValue] = useState('');
  const ref = useBlurOnFulfill({value, cellCount: CELL_COUNT});
  const [props, getCellOnLayoutHandler] = useClearByFocusCell({
    value,
    setValue,
  });

  return (
    <SafeAreaView style={styles.root}>
      <Text style={styles.title}>Underline example</Text>
      <CodeField
        ref={ref}
        {...props}
        value={value}
        onChangeText={setValue}
        cellCount={CELL_COUNT}
        rootStyle={styles.codeFiledRoot}
        keyboardType="number-pad"
        textContentType="oneTimeCode"
        renderCell={({index, symbol, isFocused}) => (
          <View
            // Make sure that you pass onLayout={getCellOnLayoutHandler(index)} prop to root component of "Cell"
            onLayout={getCellOnLayoutHandler(index)}
            key={index}
            style={[styles.cellRoot, isFocused && styles.focusCell]}>
            <Text style={styles.cellText}>
              {symbol || (isFocused ? <Cursor /> : null)}
            </Text>
          </View>
        )}
      />
    </SafeAreaView>
  );
};

export default UnderlineExample;

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,
    width: 280,
    marginLeft: 'auto',
    marginRight: 'auto',
  },
  cellRoot: {
    width: 60,
    height: 60,
    justifyContent: 'center',
    alignItems: 'center',
    borderBottomColor: '#ccc',
    borderBottomWidth: 1,
  },
  cellText: {
    color: '#000',
    fontSize: 36,
    textAlign: 'center',
  },
  focusCell: {
    borderBottomColor: '#007AFF',
    borderBottomWidth: 2,
  },
});


Previous Article
Circular Action Menu Button
Utkarsh Lubal

Utkarsh Lubal

Full Stack Developer

Related Posts

Vertical Step indicator
Vertical Step indicator
May 06, 2023
1 min

Quick Links

Advertise with usAbout UsContact Us

Social Media