React-Native Pin Entry View with the Native Keyboard
So last night I posted the same view with a custom keyboard layout. Right after that I adjusted it for what I’m going to really use – of course after making the design actually fit the spec. This is an approach I used in Objective-C to right a native pin view with individual boxes for pin display.
What you see here is the view of the pin entry with the entered pin below it just for debugging purposes and the native numeric keyboard. I also added basic value validation to ignore the non-numeric values.The pin dots are not a text field. It is a View with static Text in it when the entered pin length is less than or equal to the index of that specific “box”.So where is the field we’re typing into? I’m glad you asked!
Take a look at the style for the `TextInput`. It is positioned to the right -99. A larger number could be provided if you’re concerned about it showing on the content.
Change that value from -99 to 0 or just comment out that line and you’ll see an input with a red background show at the top of the View. So technically this input is “hidden” from the user yet still capable of being typed into.
This is not a complete solution. On Android, you can hide the keyboard with no discernible way to get back to open it. You can easily add a touchable on the pin boxes to focus the TextInput when touched. The goal is to provide a basic solution to build upon.
To those code junkies, do NOT judge the code. I spent a small amount of time tweaking inline styles, etc and did not build this for production value.
