Package Exports

react-native-pin-input-component

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-native-pin-input-component) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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

```js ... { his.setState({value: text}); }} /> ... ``` #Animated when change text password

```js ... { his.setState({value: text}); }} cellAnimatedOnChangeText={scale => { Animated.timing(scale, { oValue: 1, uration: 250, }).start(); return scale.interpolate({ inputRange: [0, 0.5, 1], outputRange: [1, 1.5, 1], }); }} /> ... ``` # Available props |Name|Type|Required|Default|Description| |----|----|--------|-------------------------------------------------------------------------------|---------------------------| |value|String|yes||The value to show for the input| |length|Number|no|6|Number of charater for the pin input| |autoFocus|Boolean|no|false|If true, focuses the pin input| |onChangeText|Function|yes||Same onChangeText function of TextInput| |visibleSelection|Boolean|no|false|If true, visible selection| |selectionColor|String|no|'red'|Color string of selection when `visibleSelection=true`| |cellNormalStyle|Style Object|no|`{width: 40,height: 40,borderWidth: 0.5,borderColor: '#D5D5D5',justifyContent: 'center',alignItems: 'center',margin: 2,}`|Normal style object of cell| |cellFocusStyle|Style Object|no|`{width: 40, height: 40, borderWidth: 0.5, borderColor: '#D5D5D5', justifyContent: 'center', alignItems: 'center', margin: 2, ...Platform.select({ ios: { shadowOffset: { width: 0, height: 1 }, shadowRadius: 2, shadowOpacity: 0.5, }, android: { elevation: 4, }, }),}`| Focus style object of cell| |cellBlurStyle|Style Object|no|`{width: 40, height: 40, justifyContent: 'center', alignItems: 'center', margin: 2,}`|Blur style object of cell| |CellView|React Native Component|no||React Native Component pass to PinInput as props, you can set your component if you want| |FocusView|React Native Component|no||Component display when cell focuses, you pass your component if you want| |BlurView|React Native Component|no||Component display when cell focuses, you pass your component if you want|