OTP cramming into one field on iOS

[debugger-anubhav]

DESCRIPTION
When we receive an SMS notification on iOS and click on the copy button to copy the OTP, the same is pasted into the OTP input fields with the exception that the entire string is placed and crammed into the very first box instead of getting separated and placed properly into the required number of pins.

Expected behavior
Copying the OTP from the SMS should fill the pins properly.

Phone:

• Device: Any iPhone
• OS: Tested on iOS 13 and above.
• Version (react-native-otp-input 1.3.11 with react-native 0.61.3)

[hirbod]

Yeah, but just for a fraction of a second. It gets splitted afterwards and placed into the separate fields.
I know, it looks weird. It is even the case with the example gif on this repos README. The issue is that this OTP view is not a masked input. These are really n pinCount of <TextInput>.

When you have a look at the code you will see that there is a simple check on TextChange which will count the length of letters in the first input in order to detect an OTP insertion, split it up and paste it into the TextFields.

With this approach, I don't see much room to fix this. I think, we could make it visually more appealing when playing around with letterSpacing. We should be able to find a big enough value (depends on fontSize and length of pinCount and fontFamily ofc) to make the other values disappear.

[artpersona]

Is there any fix or patch for this one yet ? I'm currently encountering this problem.

[jpaviron1738]

If anybody is looking for a solution to this problem. I have created a patch:

#224

[ser-emejia]

Any fix for this?