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, 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;
Coming Soon…
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, }, });
Quick Links
Legal Stuff