Vertical Step indicator
May 06, 2023
1 min
An UI module for user-side pincode verification.
🔮 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
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 |
npm i react-native-code-verification --save --force
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;
Coming Soon…
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', }, });
Quick Links
Legal Stuff