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 simple example:
import React, { Component } from 'react';
import { View, ScrollView, AppRegistry, TextInput, InputAccessoryView, Button } from 'react-native';
export default class UselessTextInput extends Component {
constructor(props) {
super(props);
this.state = {text: 'Placeholder Text'};
}
render() {
const inputAccessoryViewID = "uniqueID";
return (
<View>
<ScrollView keyboardDismissMode="interactive">
<TextInput
style={{
padding: 10,
paddingTop: 50,
}}
inputAccessoryViewID={inputAccessoryViewID}
onChangeText={text => this.setState({text})}
value={this.state.text}
/>
</ScrollView>
<InputAccessoryView nativeID={inputAccessoryViewID}>
<Button
onPress={() => this.setState({text: 'Placeholder Text'})}
title="Reset Text"
/>
</InputAccessoryView>
</View>
);
}
}
// skip this line if using Create React Native App
AppRegistry.registerComponent('AwesomeProject', () => UselessTextInput);
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.
Props
Reference
Props
backgroundColor
Type | Required |
---|---|
color | No |
nativeID
An ID which is used to associate this InputAccessoryView
to specified TextInput(s).
Type | Required |
---|---|
string | No |
style
Type | Required |
---|---|
style | No |