PinInput

Component that is based on react-native-confirmation-code-field library.

https://github.com/retyui/react-native-confirmation-code-field (opens in a new tab)

Import

import { PinInput } from 'react-native-ficus-ui';

Usage

Default

EDITABLE EXAMPLE

const SimplePinInput = () => {
  const [pinValue, setPinValue] = React.useState(null);

  return (
    <PinInput
      value={pinValue}
      onChangeText={setPinValue}
      keyboardType="number-pad"
      w={250}
    />
  );
}
render(<SimplePinInput />)

Change count

EDITABLE EXAMPLE

const SimplePinInput = () => {
  const [pinValue, setPinValue] = React.useState(null);

  return (
    <PinInput
      value={pinValue}
      onChangeText={setPinValue}
      keyboardType="number-pad"
      cellCount={6}
      w={380}
    />
  );
}
render(<SimplePinInput />)

Change color scheme

EDITABLE EXAMPLE

const SimplePinInput = () => {
  const [pinValue, setPinValue] = React.useState(null);

  return (
    <PinInput
      value={pinValue}
      onChangeText={setPinValue}
      keyboardType="number-pad"
      colorScheme="orange"
      w={250}
    />
  );
}
render(<SimplePinInput />)

Set mask on input

EDITABLE EXAMPLE

const SimplePinInput = () => {
  const [pinValue, setPinValue] = React.useState(null);

  return (
    <PinInput
      value={pinValue}
      onChangeText={setPinValue}
      keyboardType="number-pad"
      mask
      w={250}
    />
  );
}
render(<SimplePinInput />)

Change mask placeholder on input

EDITABLE EXAMPLE

const SimplePinInput = () => {
  const [pinValue, setPinValue] = React.useState(null);

  return (
    <PinInput
      value={pinValue}
      onChangeText={setPinValue}
      keyboardType="number-pad"
      colorScheme="green"
      mask
      placeholder="🌿"
      w={250}
    />
  );
}
render(<SimplePinInput />)

Props

Extends every Box props and CodeFieldProps from react-native-confirmation-code-field

https://github.com/retyui/react-native-confirmation-code-field/blob/master/API.md#codefield- (opens in a new tab)

`colorScheme`

The colorScheme property, will define focus border color on pin inputs.

Type	Required
string	No

`mask`

The mask property, a boolean indicating if code input should be masked

Type	Required
boolean	No

`placeholder`

The character to display when masking a code

Type	Required
string	No

`focusBorderColor`

The border color when input is focused.

Type	Required
string	No

`focusBorderWidth`

The border width when input is focused.

Type	Required	Default
number	No	2

`focusBorderStyle`

The border style property when input is focused.

Type	Required	Default
"solid", "dashed", "dotted"	No	"solid"

Switch Slider