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.
Let's welcome InputAccessoryView component! 👏
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.
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).
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.
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! 🎉