how to design react native OTP enter screen?

Question

I am new in react native design .Let me know how to achieve the screen shown below

is it necessary to use 4 TextInput or possible with one?

Answer 1

We used to do it with single hidden input field as described in @Chethan’s answer. Now since RN already supports callback on back button on Android platform (since RN 0.58 or even before). It is possible to do this with just normal layout of a group of text inputs. But we also need to consider the text input suggestion on iOS or auto fill on Android. Actually, we have develop a library to handle this. Here is blog to introduce the library and how to use it. And the source code is here.