search

tttstudios / react-native-otp-input

Tiny Javascript library which provides an elegant UI for user to input one time passcode.
MIT License
521 stars 238 forks source link

OTP cramming into one field on iOS #164

Open debugger-anubhav opened 2 years ago

debugger-anubhav commented 2 years ago

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:

hirbod commented 2 years ago

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 commented 8 months ago

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

jpaviron1738 commented 8 months ago

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

https://github.com/tttstudios/react-native-otp-input/issues/224

ser-emejia commented 7 months ago

Any fix for this?