Create split OTP component easy way with React Native

Create split OTP component in React Native can be done using a simpler way. As React Native developers, we sometimes must build authentication processes which ask for the user to provide an OTP.  So In this tutorial, We are going to implement the split text input in React Native which can be used in autocomplete feature when receiving SMS to the device(Android or IOS).

So a classic TextInput takes the text entered by the user and outputs it. It happens within the TextInput. But suppose we want to split the display to create one box for each OTP digit. In that case, we have to do some tricky changes in an easy way. In this article, I am going to create split OTP component only and we will be then using this component to connect our project to react native firebase and implement the auto fill OTP React Native.

First, let’s see what the split OTP input looks like on IOS and Android devices.

Okay, let’s dive into the code.

How to Create Split Otp Component with React Native

What we are going to do here is we have to create a new functional component as OTP and we have to create a React Native text input in which the height and the width are 0. First, let me share the code and explain it further.

So as you can see we have created a text input in which the height and width are 0. we have given the OTP code length (maxLength) as 6. because we are getting a 6-digit pin as the sms. We have created a ref using useRef for the input. Then when we tap on a text box the text input will focus.

Given above is the implementation for the 6 text boxes. So we have styled them so as to render them as a row. For each text box, we have used react native Text. As you can see we have used Array.from function to iterate 6 times.

Array.from() lets you create Arrays from:

• iterable objects (objects such as Map and Set); or, if the object is not iterable,
• array-like objects (objects with a length property and indexed elements).

Here we have used an object with a length property of 6 and an array will be created. Then we have to use map functionality to iterate through the array. So that it will iterate 6 times with the text boxes. Also, we have implemented an onPress method on TextBox.

Logic Behind OTP Component

So the idea here is to hide the text input that we have created by giving height and width 0. And when we click on the text box which is visible then from the ref we can focus on the input that we have created (Text input is not visible only text boxes are visible). When we type the code it will be updated the text input and the text can be retrieved from the state as we have updated the state when the text changes. So then we can update the text in the box by text[i] value from the state and vice versa it will update(deletion).

Also to identify if the text is filled I also have added a background color if the text is already filled.

text[i] ? styles.filledStyle : {}

On behalf of all these for otpContent, we have added a useMemo which will update only if the text changes. so it will avoid unnecessary rerenders.

So that’s it pretty much from how to create split OTP component in react native. We will be using this component for autocomplete functionality in another article. If you have any clarifications feel free to add a comment or contact me via [email protected].