Source: https://docs.expo.dev/versions/v54.0.0/sdk/keyboard-controller

Hide navigation

Ctrl K

Home Guides EAS Reference Learn

Reference version

SDK 54

Archive Expo Snack Discord and Forums Newsletter

react-native-keyboard-controller

GitHub npm

A library that provides a Keyboard manager that works in an identical way on Android and iOS

GitHub npm

Android

iOS

Bundled version:

1.18.5

Copy page

react-native-keyboard-controller offers additional functionality beyond the built-in React Native keyboard APIs, providing consistency across Android and iOS with minimal configuration and offering the native feel users expect.

Installation

Terminal

Copy

- npx expo install react-native-keyboard-controller

If you are installing this in an existing React Native app , make sure to install expo in your project. Then, follow the installation instructions provided in the library's README or documentation.

Usage

KeyboardController

Copy

Open in Snack

import { TextInput, View, StyleSheet } from 'react-native'; import { KeyboardAwareScrollView, KeyboardToolbar } from 'react-native-keyboard-controller'; export default function FormScreen() { return ( <> <KeyboardAwareScrollView bottomOffset={62} contentContainerStyle={styles.container}> <View> <TextInput placeholder="Type a message..." style={styles.textInput} /> <TextInput placeholder="Type a message..." style={styles.textInput} /> </View> <TextInput placeholder="Type a message..." style={styles.textInput} /> <View> <TextInput placeholder="Type a message..." style={styles.textInput} /> <TextInput placeholder="Type a message..." style={styles.textInput} /> <TextInput placeholder="Type a message..." style={styles.textInput} /> </View> <TextInput placeholder="Type a message..." style={styles.textInput} /> </KeyboardAwareScrollView> <KeyboardToolbar /> </> ); } const styles = StyleSheet.create({ container: { gap: 16, padding: 16, }, listStyle: { padding: 16, gap: 16, }, textInput: { width: 'auto', flexGrow: 1, flexShrink: 1, height: 45, borderWidth: 1, borderRadius: 8, borderColor: '#d8d8d8', backgroundColor: '#fff', padding: 8, marginBottom: 8, }, });

Additional resources

Advanced keyboard handling

Learn more about advanced keyboard handling examples with Keyboard Controller Visit official documentation

Get full information on API and its usage.