Create Split OTP Inputs in React Native with this Trick!

In this video, we look at a trick we can use to create split OTP inputs in React Native.
GET SOURCE CODE 📀⬇️

LET’S WORK

CHECK OUT THESE HELPFUL TUTORIALS

🟡 Publishing Expo React Native App to Play Store Journey

🟡 PHP Project

TOOLS USED

FOLLOW US ON:

CHAPTERS

00:00 What will be done | Getting Started
00:46 Concept of work + Implementation
06:03 Highlighting the current OTP digit
07:28 Adding some dynamism
08:19 Hiding keyboard on pressing outside input
08:44 Syncing submit button to otp inputs state
09:33 What if we need more than 4 digits ?

#tothepointcode #reactnative #otp

[Cookies-cvnd]

Immediate subscription, thank you for great content and explanation

[felipemelendez]

My goodness thank you!! I followed another tutorial to the end and it the result had issues, I tried debugging for a while and it was a pain. Got it working but then I found your solution and it is much better. Thank you, we very much appreciate your tutorials, I watched another tutorial of yours before this but did not subscribe, that was a poor move from my part, I am now subscribed and look forward to more awesome content =)

[domvournias]

I've been looking for a decent solution for OTP input fields for two hours, couldn't find any good one. Yours is exactly what I was looking for. Very good explanation and clean code...amazing job!

[JonBraydenCodes]

Wow-this video really help me. I found another educator for the future. Kudos!

[abrahambaffoe]

Great, you made the tut on time. I need this in my blockchain system. Great. Expecting more!

[iamaronee]

Amazing Video helped me to complete a feature hats off

[CharaTech]

Awesome friend, can you make more videos on expo typescript projects? Your previous video on A Beautiful App Design is so helpful. I am very new to react and react-native but I learned a lot and even learned Typescript as bonus. Man, you rock!

[ryonwhyte]

Thank you for this tutorial!
I followed it every second and the fields are not showing at 5:16. Maybe it's not compatible with latest react changes?
Edit
In case anyone else is having this issue you can solved it by writing all the code in one return instead of exported a bunch of components. If you prefer to do it like the video, then you will need to pass children down OTPcontainer

[mosesegboh]

Hello, I have followed the steps, but the input field is not pressable. Can you help please?. Its not responding when clicked. I think my useRef is not working or something.

[ChristopherDcosta]

Can we copy and paste OTP in the split OTP inputs? I tried copy pasting but it is only taking the first digit

[jeandedieuamani]

Great content. Can you provide the link to the codebase please ?

[prabhandpardeep]

But what if we have copied otp and we need to paste it here

[mosesegboh]

Please has anyone faced any issues implementing this?, Hello, I have followed the steps, but the input field is not pressable. Can you help please?. Its not responding when clicked. I think my useRef is not working or something.

[faaizalam]

Sir can you please make react native beginner tutorial from very basics