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' }]
      }
    }
  }}
/>