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
Top comments (5)
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?
...oh, actually i got it to work, but i had to use a TouchableOpacity as a Button wouldn't work.
That's strange, but yes you could use any components available in React Native 👍🏻
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?
Hi! Could you share your code so we can figure it out togather? 🙂