InputAccessoryView
A component which 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 wrap your custom toolbar with the InputAccessoryView component, and set a nativeID. Then, pass that nativeID as the inputAccessoryViewID of whatever TextInput you desire. A basic example:
import React, { useState } from 'react';
import { Button, InputAccessoryView, ScrollView, TextInput } from 'react-native';
export default App = () => {
const inputAccessoryViewID = 'uniqueID';
const initialText = '';
const [text, setText] = useState(initialText);
return (
<>
<ScrollView keyboardDismissMode="interactive">
<TextInput
style={{
padding: 16,
marginTop: 50,
}}
inputAccessoryViewID={inputAccessoryViewID}
onChangeText={setText}
value={text}
placeholder={'Please type here…'}
/>
</ScrollView>
<InputAccessoryView nativeID={inputAccessoryViewID}>
<Button onPress={() => setText(initialText)} title="Clear text" />
</InputAccessoryView>
</>
);
};
This component can also be used to create sticky text inputs (text inputs which are anchored to the top of the keyboard). To do this, wrap a
TextInput with the
InputAccessoryView component, and don't set a
nativeID. For an example, look at
InputAccessoryViewExample.js.
An ID which is used to associate this InputAccessoryView to specified TextInput(s).