React Native iOS Keyboard with a Custom Button

Imagine you are making an app that needs some extra keys on a virtual keyboard that does not exist (not yet 😀). For example, it could be nice to have a Next button. Or a button that will allow a user to do something special and improve the user experience.

What if I told you that it's not so difficult❓

Let's welcome InputAccessoryView component! 👏

The InputAccessoryView is a component that enables customization of the keyboard input accessory view on iOS. The input accessory view is displayed above the keyboard whenever a TextInput has focus. This component can be used to create custom toolbars.

Awesome! How we can do it? 🔧

To use this component we should wrap our custom toolbar view with the InputAccessoryView component, and set a nativeID identifier. Then, pass that nativeID as the inputAccessoryViewID to the TextInput component. Like that:

And that is what we will get (we have a pink background here to highlight the toolbar area).

Great! Let's do something useful! 🏗

Imaging we have a form with input fields. And we want to allow a user to move to the next field easily. Let's create an input accessory view with the Next button for that. So when a user presses the Next button we could focus next input field.

Easy right!

And what if we want to have different buttons for different input fields? Not a problem! You could have several input accessory views with different IDs in that case. And use them for different input fields (see line 13 in the example above 👀).

That's all folks! 🎉

You could find the complete example with Expo in this repo. Please give it a star 🌟 if you like it. 🥳

Credits

Photo by Christin Noelle on Unsplash

Comments

[Richard 'KeMiKaL GeNeRaL' Denton]

I've tried this to add a minus(-) button to a numeric keypad on iOS.

My 'button' appears above the keyboard, but when i press it, it just dismisses the keyboard and i can't figure out why?

[Richard 'KeMiKaL GeNeRaL' Denton]

...oh, actually i got it to work, but i had to use a TouchableOpacity as a Button wouldn't work.

[Vladimir Vovk]

That's strange, but yes you could use any components available in React Native 👍🏻

[Kyaw Zin Wai]

I'm having same problem. I tried to put both Button and TouchableOpacity, but both of them doesn't work. When I press it, it just dismiss the keyboard and still can't figure out why?

[Vladimir Vovk]

Hi! Could you share your code so we can figure it out togather? 🙂