In IOS OTP is not getting focus, when the otp comes we copy it and then from keyboard we push, it doesn't get filled !!

[naveenvignesh5]

Paste into text input automatically not yet developed. Will be pushing it in the next release. Thanks for the input @visheshsprinzo.

[shivam0831]

@naveenvignesh5 any updates? I am using an android device still not able to paste code into text inputs

[yousefamar]

This seems to be something quite fundamental, and the reason I used this lib rather than writing my own. Too bad that it's not implemented. Switching to https://github.com/tttstudios/react-native-otp-input which seems to have it

[pgpankajgoyal]

Do we have any update regarding this issue fixes ?

[pgpankajgoyal]

This seems to be something quite fundamental, and the reason I used this lib rather than writing my own. Too bad that it's not implemented. Switching to https://github.com/tttstudios/react-native-otp-input which seems to have it

Hi yousefamar

As I was looking into this https://github.com/tttstudios/react-native-otp-input sdk it's 2 years old, is it working fine with latest react native version ?

[yousefamar]

@pgpankajgoyal I'm still using it in production, with latest react-native. However, the latest version (1.3.11) is broken (https://github.com/tttstudios/react-native-otp-input/issues/87), but I simply froze it at 1.3.7 which works fine for now.

[naveenvignesh5]

@yousefamar @shivam0831 did you try this example for your use case ? If so what blockers are facing with regards to below way of implementing OTP pre-fill.

// hooks
import React, { useRef } from 'react';

const ParentComponent = () => {
    const otpInput = useRef(null);

    const clearText = () => {
        otpInput.current.clear();
    }

    const setText = () => {
        otpInput.current.setValue("1234");
    }

    return (
        <View>
            <OTPTextInput ref={e => (otpInput = e)} >
            <Button title="clear" onClick={clearText}>
        </View>
    );
}

[rahul-shirur]

@naveenvignesh5 Is there any plan for release this enhancement?

[keshavsharma0712]

@naveenvignesh5 I want to auto-fill the otp fields when i click on the otp suggestion from keyboard in iOS. Can you please tell how to achieve this?

[anniewey]

@naveenvignesh5 hi, looking for this enhancement too. in my case, my text was autofill to the first input only, which i suspect is because of the OTPTextInput is split to 6 text inputs?

[shashankmeddo1]

any update on this?

[omivrex]

+1

[anniewey]

This enhancement actually has been released in v1.1.1 using handleCellTextChange. Check the example for the complete source code.

import OTPTextView from 'react-native-otp-textinput';
import Clipboard from '@react-native-clipboard/clipboard';

const handleCellTextChange = async (text: string, i: number) => {
    if (i === 0) {
      const clippedText = await Clipboard.getString();
      if (clippedText.slice(0, 1) === text) {
        codeRef.current?.setValue(clippedText, true);
      }
    }
  };

<OTPTextInput
            ref={codeRef}
            handleCellTextChange={handleCellTextChange}
            ..
/>

Update: Notice that this only work with copy pasting but not with AutoFill button in iOS. @naveenvignesh5 do u have any idea how to implement to same thing via iOS AutoFill button?

[harshithvemulas]

Any solution for this issue ?

[sudhanshu-busy]

This enhancement actually has been released in v1.1.1 using handleCellTextChange. Check the example for the complete source code.

import OTPTextView from 'react-native-otp-textinput';
import Clipboard from '@react-native-clipboard/clipboard';

const handleCellTextChange = async (text: string, i: number) => {
    if (i === 0) {
      const clippedText = await Clipboard.getString();
      if (clippedText.slice(0, 1) === text) {
        codeRef.current?.setValue(clippedText, true);
      }
    }
  };

<OTPTextInput
            ref={codeRef}
            handleCellTextChange={handleCellTextChange}
            ..
/>

Update: Notice that this only work with copy pasting but not with AutoFill button in iOS. @naveenvignesh5 do u have any idea how to implement to same thing via iOS AutoFill button?

if i copy code and the code is 1234 and I am going to type 1 on 1st block then function will run and it will autofill. I means to say that on every time i change text it gonna copy the clipboard text . i want only to paste the copied text when I press the paste button not on changing the text.

[shafqatbari]

https://github.com/naveenvignesh5/react-native-otp-textinput/issues/45#issuecomment-2202099494 using Clipboard is not a valid solution