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? π