Important note : I would recommend using native react input instead of any ui library, had used native base initially but ran into multiple issues and native base team wasn’t helpful either.
I’m back here today with another work around solution of my own for a common feature used in verification of accounts in an App. Yes, we are going to talk about the OTP based input feature using react native.
I would like to clarify few things before i resume, the solution i have constructed is just a look & feel of otp input textboxes & does not actually read otp from an sms. But that shouldn’t be a challenge once you explore out on how to read an SMS from users phone, it just needs a permission to allow you to listen to sms events.
We’ll construct something as above, as you can see we just have a sequence of Text inputs on entry focus shifts to the next text box & vice versa on deleting.
If you have been reading my previous posts, i strongly believe on having lesser no of dependencies in your application to provide flexibility & reliability on 3rd party libraries. More often i try to create a conventional solution if it doesn’t work out that going for an alternative.
Let’s dig into our solution
As per the above gist, i have created a component which helps us in rendering the text inputs (here i have 6 digit otp). I have used native-base for UI, you can use ur own UI framework as per your requirements.
We have 3 functions
renderInputs => this function is used to render input fields based on our otp count (6 digits here). Creating an empty array of length 6
const inputs = Array(6).fill(0);
Creating text inputs by iterating through the array
For each input adding a reference to change focus, since we have multiple inputs. I have declared a variable to store all the refs by index.
ref={ref => this.otpTextInput[j] = ref}
Now lets see on how to change focus on entry with the help of focusNext function, what this function does is gets the current index onchangetext event & shifts focus to the next text input.
onChangeText={(v) => this.focusNext(j, v)}
The if condition basically evaluates on whether has entered anything or deleted the existing text & making sure focus is shifted only till it reaches the last text box
focusPrev function is used to change focus in case user deletes the existing text from the input, using the onkeypress event identifying which button was pressed (backspace on delete will be triggered)
onKeyPress={e => this.focusPrevious(e.nativeEvent.key, j)}
Again, a condition just to make sure focus does not go out of range of the array & only when backspace has been tapped.
Please note to focus on an element you need the ref of the element, in case of native base i had to use _root property to access the element but if you are targeting pure RN or some other library that property may change.
this.otpTextInput[0]._root.focus();
I’ll try to add an implementation on reading the OTP from SMS as well to this feature. You can checkout the fully functional snack below.
Feel free to add your comments & thoughts
