Set Initial Pin

[appjitsu]

How can you set the initial value of the pin?

[lotosbin]

Pin Input is usually used to verify, What scene requires an initial value？

[appjitsu]

My requirement is for a new user account wizard where they can go forward and back in the process. Each step of the wizard has a different piece of the users information such as name, date of birth etc. I have been using your module for the pin on one of the steps, but I need to be to put a initial value on the pin if the user goes back to it. Like the other controls, like an input text field, I have to save the state and then supply that state as the default value. Make sense?

On Sep 17, 2017, at 8:22 PM, lotosbin notifications@github.com wrote:

Pin Input is usually used to verify, What scene requires an initial value？

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub, or mute the thread.

[lotosbin]

version 1.2.1 add methods

method

• setPin

this.refs.pin.setPin('123456')

• getPin

  const pin = this.refs.pin.getPin()

• clearPin

  this.refs.pin.clearPin()

[appjitsu]

value={this.state.pin} would be nice to have.

Also, ability to turn off auto focus.

[appjitsu]

ref={(input) => { this.pin = input; }} this.pin.setPin(this.state.pin); <== this.pin is undefined

this.refs is deprecated

[lotosbin]

version 1.2.2 add init value, autoFocus prop, focusPin method

[appjitsu]

Thanks. The new features help me out a lot.

Given the code below, how would I use focusPin()? I'm using ref={input => this.pin === input} to hold a reference.

<Form style={styles.form}>
  <Item stackedLabel>
    <Label>Email</Label>
    <Input
      value={this.state.username}
      autoCorrect={false}
      returnKeyType="next"
      autoCapitalize="none"
      keyboardType="email-address"
      enablesReturnKeyAutomatically
      onChangeText={(text) => {
        this.setState({ username: text });
      }}
      onSubmitEditing={() => {
        this.pin.focusPin();
      }}
    />
  </Item>
  <PinInput
    ref={input => this.pin === input}
    text=""
    pinLength={4}
    pinItemStyle={{ width: 50, height: 50, borderWidth: 0, borderBottomWidth: 1 }}
    pinItemProps={{ keyboardType: 'number-pad' }}
    onPinCompleted={(pin) => {
      this.setState({ password: pin });
    }}
    containerStyle={{ backgroundColor: 'transparent' }}
    containerPinStyle={{
      flexDirection: 'row',
      justifyContent: 'space-around',
      alignItems: 'center',
      marginTop: 20,
    }}
  />
...

[lotosbin]

if autoFocus is false, clearPin/setPin will not focus automated. if need focus, use this.pin.focusPin(0)(this.pin is ref)

[appjitsu]

this.pin is undefined in my use case.

[appjitsu]

Setting returnKeyType doesn't appear to work.

pinItemProps={{ keyboardType: 'number-pad', returnKeyType: 'done' }}

[lotosbin]

should ref={input => this.pin = input} not ref={input => this.pin === input}

[appjitsu]

OMG...

Did I really just do that?! I'm so ashamed!

Everything works great! Thanks for your help!

[lotosbin]

about returnKeyType https://github.com/facebook/react-native/issues/11739

[appjitsu]

I'm using it on another screen for the dob year input.

<Item stackedLabel>
  <Label>Year</Label>
  <Input
    ref={(input) => { this.dobYear = input; }}
    value={this.state.dobYear}
    autoCorrect={false}
    keyboardType="number-pad"
    maxLength={2}
    enablesReturnKeyAutomatically
    returnKeyType="done"
    onChangeText={(text) => {
      this.setState({ dobYear: text }, instance.forceUpdate());
    }}
    onSubmitEditing={() => {
      this.checkDOB();
    }}
    onBlur={() => {
      this.checkDOB();
    }}
  />
</Item>

[lotosbin]

you can use onPinCompleted props,

<PinInput
     onPinCompleted={(pin)=>{
    //some code
    }}
>
</PinInput>

[appjitsu]

I also need the ability to have secureTextEntry on the input fields.

[lotosbin]

need a better way to expose pin item props.

v1.2.3 add pinItemProps support returnKeyType secureTextEntry

[lotosbin]

6

[appjitsu]

The new pinItemProps support works well. Great job!

[b-asaf]

@appjitsu & @lotosbin Can you expose underlineColorAndroid prop (only for Android) so I can hide the black line and see only the white bottom border:

this is my code:

<Input
    ref={(code) => {
        this.regimenCode = code;
    }}
    pinLength={6}
    autoFocus
    text=""
    placeholder=" "
    pinItemProps={{keyboardType: 'numeric', underlineColorAndroid: 'transparent'}}
    pinItemStyle={styles.input}
    onPinEntered={this.handePinEntered}
/>

I saw in the code that only 3 text input props are addressed:

I added this line to the index file of the package, under secureTextEntry and it did the trick and checked it on iOS and Android devices: underlineColorAndroid={(this.props.pinItemProps || {}).underlineColorAndroid || undefined}

see pull-request #19