Using multiple OTPInputView in the same screen

[gandarain]

Describe the bug If We use 2 OTPInputView or more in the same screen, it will always focus into the second or the last OTPInputView. I have use ref but nothing change.

This is my use effect, will focus into pinRef in component did mount

useEffect(() => {
    pinRef.focus
  }, [])

This is my form, with 2 component otp, the first one is pinRef and the second one is confirmPinRef

<View style={styles.containerPin}>
    <Text style={styles.textDescriptionGreyFont}>Set Pin (Required)</Text>
    <Pin
      ref={pinRef}
      testID={'inputPin'}
      autoFocusOnLoad={true}
      count={6}
      value={pin}
      setCode={(code) => setPinValue(code, 'pin')} />
    </View>
    <View style={styles.containerConfirmPin}>
       <Text style={styles.textDescriptionGreyFont}>Confirm Pin</Text>
       <Pin
          ref={confirmPinRef}
          testID={'inputConfirmPin'}
          autoFocusOnLoad={false}
          count={6}
          value={confirmPin}
          setCode={(code) => setPinValue(code, 'confirmPin')} />
</View>

this is my component OTPInputView

<View style={styles.container}>
    <OTPInputView
        ref={props.ref}
        style={[styles.subContainer, { width: props.count === 4 ? '70%' : '100%' }]}
        pinCount={props.count}
        code={props.value}
        onCodeChanged={code => props.setCode(code)}
        autoFocusOnLoad={props.autoFocusOnLoad}
        codeInputFieldStyle={styles.field}
        secureTextEntry={true}
      />
</View>

Expected behavior A The first OTPInputView should focus every time open the screen

Screenshots If applicable, add screenshots to help explain your problem.

Smartphone (please complete the following information):

• Device: [e.g. Simulator Iphone Xr]

[fpena]

Thanks for reporting this. We'll take a look.

[gandarain]

oke thanks

[Sunnysit]

Hi @gandarain Have you updated this package to version 1.3.11? I tested this on version 1.3.11 and it works for me.

I set Prop autoFocusOnLoad to true for the first OTP component and set it to false for the second OTP component. No need to use useEffect to call focus method.

Here is my code

<View style={{ justifyContent: "center", alignItems: "center" }}>
        <OTPInputView
          style={{ width: "80%", height: 200 }}
          pinCount={4}
          autoFocusOnLoad={true} // <==== Set to TRUE
          codeInputFieldStyle={styles.underlineStyleBase}
          codeInputHighlightStyle={styles.underlineStyleHighLighted}
          onCodeFilled={(code) => {
            console.log(`Code is ${code}, you are good to go!`)
          }}
          placeholderCharacter="-"
        />
        <OTPInputView
          style={{ width: "80%", height: 200 }}
          pinCount={4}
          autoFocusOnLoad={false} // <==== Set to FALSE
          codeInputFieldStyle={styles.underlineStyleBase}
          codeInputHighlightStyle={styles.underlineStyleHighLighted}
          onCodeFilled={(code) => {
            console.log(`Code is ${code}, you are good to go!`)
          }}
          placeholderCharacter="@"
        />
      </View>

[Lovishchugh01]

on long press my 2 pin get clear but pointer move only 1 step back