react-native-keypad-view
A style-able numpad input view for authentication, 2FA, or whatever other numerical secret input your heart desires
Usage
Default layout:
<KeyPadScreen
length={4}
text='Enter PIN'
onSubmit={async () => {
// Perform authentication
await new Promise<void>(r => setTimeout(r, 500));
return false;
}}
/>Blue-styled layout:
<KeyPadScreen
length={12}
text='Hand over ye treasured PIN, rapscallion!'
onSubmit={async () => {
// Perform authentication
await new Promise<void>(r => setTimeout(r, 500));
return false;
}}
style={{
containerStyle: {
backgroundColor: '#2B2D5B'
},
textStyle: {
color: 'white',
fontStyle: 'italic',
fontSize: 18
},
keyPadInputStyle: {
borderColor: 'white',
borderWidth: 1,
size: 20,
spacing: 3,
filledBackground: Color('#2B2D5B').lighten(2).hex()
},
keyPadButtonStyle: {
backgroundColor: '#2B2D5B',
borderColor: Color('#2B2D5B').lighten(1).hex(),
borderWidth: 4,
textStyle: {
fontWeight: '900',
color: 'white',
transform: [{ rotateZ: '-20deg' }]
}
}
}}
/>