Building <InputAccessoryView> For React Native

3 min readOct 28, 2021

Introduction -

First, we need to know what exactly “InputAccessoryView” is, it is basically mentioned in the Apple developer documentation, so we know about the InputAccessoryView it is a custom view that occurred at the top of the system keyboard when any receiver becomes the first responder.

You can check this in the image below.

InputAccessoryView redeclares anything which he inherits from UIResponder because it is based on UIResponder and InputAccessoryView has the property of reading and write and also manages a custom view.

Responder infrastructure first mounts the view then keeps it in sync with the system keyboard. Some of the gestures are applied to the InputAccessoryView that gestures are like tap, drag, etc which use to dismiss the keyboard.

Use Cases -

There are two main use cases of InputAccessoryView.

You can create a view like Facebook composer view picker
You can also design a toolbar
The second scenario is sticky text inputs:

Objective-C UIResponder -

There are separate view designs for objective c and <TextInput> has become a responder for an instance of UITextView or UITextField.

API Designs -

I think now we can understand the <InputAccessoryView>, and how to use it as well, so now we are going to design the API for both the cases.and it works well with react-native components.

First, we check it for the keyboard toolbar, there are the following things for consideration.

<InputAccessoryView> we want to hoist generic react-native hierarchy.
It is also used for manipulating the application state and it detaches the view hierarchy.
Particular <TextInput> is also linked to <InputAccessoryView>
We can also share the multiple text inputs without duplicating the code

Second, for sticky notes, the following are some points.

For sticky note support, it adds some more constraints.
For the design purpose, the input accessory has a text input as a child view.
We can manually set the generic view.

Some Pitfalls -

Following are some pitfalls because not everything is going smooth for any API, so let’s check some of them.

We implement this API for listing the NSNotificationCenter for the UIKeyboardWill event.
Some open-source libraries are using this pattern.
And Facebook also uses this in our app.
UIKeyboardDidChangeFrame were not called at the time of updating <InputAccessoryView> on swipes.
Also, keyboard height change is not called in this event.
It also avoids the home pill on iPhone X.

Example Code -

class TextInputAccessoryViewExample extends React.Component<
{},
*
> {
constructor(props) {
super(props);
this.state = { text: ‘Placeholder Text’ };
}

render() {
const inputAccessoryViewID = ‘inputAccessoryView1’;
return (
<View>
<TextInput
style={styles.default}
inputAccessoryViewID={inputAccessoryViewID}
onChangeText={(text) => this.setState({ text })}
value={this.state.text}
/>
<InputAccessoryView nativeID={inputAccessoryViewID}>
<View style={{ backgroundColor: ‘white’ }}>
<Button
onPress={() =>
this.setState({ text: ‘Placeholder Text’ })
}
title=”Reset Text”
/>
</View>
</InputAccessoryView>
</View>
);
}
}

Complete React Native Code -

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>
</>
);
}

Note — you can check the full commit of this here. <InputAccessoryView>

I hope you like the blog, if you have any queries related to react native app development please ask.

Happy Learning.