react-native-pin-input-component

This is a cross-platform, lightweight, customizable PIN input component for React Native

Features:

• Customizable style to normal, focus or blur Cell style
• Pass component to cell as props
• Easy to customize
• Compatible with most react native version

Installation

#npm
npm i react-native-pin-input-component

Use

...
import PinInput from 'react-native-pin-input-component';

render(){
    return(
       <View>
           ...
           <PinInput
               autoFocus
               value={value}
               onPress={() => {}}
               onChangeText={text => {
               this.setState({value: text});
                        }}
                />
            ...
       </View>
    )
}

Examples

Default style

<PinInput
  autoFocus
  value={value}
  onPress={() => {}}
  onChangeText={text => {
    this.setState({value: text});
  }}
/>;

Visible Selection

<PinInput
  value={value}
  onPress={() => {}}
  onChangeText={text => {
    this.setState({value: text});
  }}
  visibleSelection
/>;

Customizable style

const styles = StyleSheet.create({
  ...
  normal: {
    width: 40,
    height: 40,
    borderWidth: 0.5,
    borderColor: '#D5D5D5',
    justifyContent: 'center',
    alignItems: 'center',
    margin: 2,
    borderRadius: 20,
  },
  focus: {
    width: 40,
    height: 40,
    borderWidth: 0.5,
    borderColor: 'red',
    justifyContent: 'center',
    alignItems: 'center',
    margin: 2,
    borderRadius: 20,
    ...Platform.select({
      ios: {
        shadowOffset: {width: 0, height: 1},
        shadowRadius: 2,
        shadowOpacity: 0.5,
        shadowColor: 'red',
      },
      android: {
        elevation: 4,
      },
    }),
  },
  blur: {
    width: 40,
    height: 40,
    borderRadius: 20,
    justifyContent: 'center',
    alignItems: 'center',
    margin: 2,
  },
  ...
});

render(){
   return(
        ...
        <PinInput
          value={value}
          onChangeText={text => {
            this.setState({value: text});
          }}
          cellNormalStyle={styles.normal}
          cellFocusStyle={styles.focus}
          cellBlurStyle={styles.blur}
        />;
        ...
        );
}
...

Default Password