React Native Pin Input

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

Installation

$ npm install react-native-simple-pininput —save

Usage

Import that line for using

$ import PinInputField from 'react-native-simple-pininput'

Then in your render method

export default App = () = {
const [value, setValue] = useState('');
const [pinDone, setPinDone] = useState(false);
const [AllBorderFlag, setAllBorderFlag] = useState(false);
const MAX_PIN = 4;
  useEffect(() => {
    if (value <= 3) {
      return () => AllBorderFlag(false);
    }
  }, []);
return (
<View>
    <PinInputField
        setPinReady={setPinDone}
        pin={value}
        setPin={setValue}
        maxLength={MAX_PIN}
        AllBorder={AllBorderFlag}
    />
    <Button title="done" onPress={() => setAllBorder(true)} />
</View>
)
}

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 |