React Native OTP Screen: A Journey Through Development and Challenges

My team and I recently developed an OTP (One-Time Password) screen using React Native. In this post, I will walk you through our approach, the challenges we encountered, and how we overcame them.

Before we dive in, a quick note: yes, our implementation does support automatic code retrieval, and I’ll explain more about that later.

Plain and simple

First, we wanted a screen with six digits, so we created a straightforward implementation using an array to store each digit’s value. As the user interacts with the screen, we update these values.

We encountered two issues. The first was handling input focus: moving to the next input when a digit is entered and going back if the user presses backspace. To achieve this, we created a series of references and tracked the current index on each text change to adjust the focus accordingly.

The second issue was auto-submitting the code when the last digit is entered. This required joining the values from the array into a single string and ensuring the string’s length is correct before submitting. We also had to limit each input to one digit to prevent multiple digits in a single input field.

Complex Native Approach

While managing this was code-intensive, it worked…

— Until the requirement changed to support automatic OTP insertion.

Adapting to Automatic OTP Insertion

Now that we need to support automatic OTP insertion, we aimed to add the necessary property for iOS. React Native conveniently provides an API to inject the SMS code for iOS devices using a neat prop.

However, this introduced a new challenge. What happens if the user presses the button to fill the code? Should we apply this property to all the inputs and then split the code among them during the change? This approach doesn’t work because we limited each input to a single digit to prevent users from entering multiple digits in one field.

I do tech

The Revelation

If you’re a web developer transitioning to React Native, like myself, you might remember a cool trick used on the web. When creating a custom checkbox, you’d hide the original input and use CSS to create a nicer version. We applied a similar concept here.

Instead of rendering six text inputs, we rendered six views and one hidden text input that actually controls the input. Each view is wrapped in a Pressable element, allowing us to shift the focus to the hidden input using references, enabling the keyboard to edit the value. This approach solved many problems:

• Moving to the next and previous inputs using references? Gone.
• Limiting each text input to one digit? No longer an issue.
• Handling auto-submit? We only need to manage one input, which still works seamlessly.
• Supporting automatic OTP insertion? Just add the property we mentioned earlier. Done.

This method makes the code cleaner and more elegant, wouldn’t you agree?

Handling Android

Supporting Android devices is straightforward. We used Kotlin to register and handle the OTP code. It’s important to remember to unregister when you’re done retrieving the code to avoid any unnecessary overhead.

Once you receive the SMS and extract the OTP code, simply update the hidden input local state with the code, and that’s it! This ensures that our implementation works seamlessly across both iOS and Android devices.

To bridge the communication between the native side and the React Native component, we utilized a custom React hook and event listeners from the native side using events.

Conclusion

We encountered the challenge of creating a seamless OTP input screen in React Native while ensuring support for both iOS and Android devices. Through innovative thinking and adaptation of web development techniques, we devised a solution that not only met our requirements but also streamlined the implementation process.

By rendering six views instead of text inputs and utilizing a hidden input to control user input, we overcame various challenges, including handling input focus, limiting digit input, and enabling auto-submit functionality. This approach proved to be cleaner and more elegant, resulting in a more efficient implementation.

Furthermore, we successfully extended support to Android devices by leveraging Kotlin to register for SMS events and bridge communication with the React Native component. This ensured consistency and reliability across both platforms.

In conclusion, by combining creative problem-solving with effective collaboration between web and mobile development paradigms, we achieved our goal of creating a robust and versatile OTP input screen in React Native.

Thanks for reading.