React Native Pin Input

An input component for PIN codes that is cross-platform, fluid, light, and customisable for React Native.

Installation

1$ npm install react-native-simple-otp-input —save

Usage

Import that line for using

1$ import PinInputField from 'react-native-simple-otp-input'

Then in your render method

1export default App = () = {
2const [value, setValue] = useState('');
3const [pinDone, setPinDone] = useState(false);
4const [AllBorderFlag, setAllBorderFlag] = useState(false);
5const MAX_PIN = 4;
6  useEffect(() => {
7    if (value <= 3) {
8      return () => AllBorderFlag(false);
9    }
10  }, []);
11return (
12<View>
13    <PinInputField
14        setPinReady={setPinDone}
15        pin={value}
16        setPin={setValue}
17        maxLength={MAX_PIN}
18        AllBorder={AllBorderFlag}
19    />
20    <Button title="done" onPress={() => setAllBorder(true)} />
21</View>
22)
23}

Props

Attributes	type	Description
pin	Number	The value to show for the input
setPin	Function	Callback function that's called when the text changed
setPinReady	Boolean	Check for maxlength and inputed pin length are same
maxLength	Number	Number of character for the input
AllBorder	Boolean	set all input box with border