DEV Community

Cover image for React Native iOS Keyboard with a Custom Button

React Native iOS Keyboard with a Custom Button

vladimirvovk profile image Vladimir Vovk ・2 min read

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.

Example app

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

Matrix Cat

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:

InputAccessoryView simple example

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

Input accessory view result

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.

Next button result

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. πŸ₯³


Photo by Christin Noelle on Unsplash

Discussion (3)

kemikalgeneral profile image
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?

kemikalgeneral profile image
Richard 'KeMiKaL GeNeRaL' Denton

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

vladimirvovk profile image
Vladimir Vovk Author

That's strange, but yes you could use any components available in React Native πŸ‘πŸ»

Forem Open with the Forem app