Keyboard
Keyboard
module to control keyboard events.
Usage
The Keyboard module allows you to listen for native events and react to them, as well as make changes to the keyboard, like dismissing it.
import React, {useState, useEffect} from 'react';
import {Keyboard, Text, TextInput, StyleSheet, View} from 'react-native';
const Example = () => {
const [keyboardStatus, setKeyboardStatus] = useState('');
useEffect(() => {
const showSubscription = Keyboard.addListener('keyboardDidShow', () => {
setKeyboardStatus('Keyboard Shown');
});
const hideSubscription = Keyboard.addListener('keyboardDidHide', () => {
setKeyboardStatus('Keyboard Hidden');
});
return () => {
showSubscription.remove();
hideSubscription.remove();
};
}, []);
return (
<View style={style.container}>
<TextInput
style={style.input}
placeholder="Click here…"
onSubmitEditing={Keyboard.dismiss}
/>
<Text style={style.status}>{keyboardStatus}</Text>
</View>
);
};
const style = StyleSheet.create({
container: {
flex: 1,
padding: 36,
},
input: {
padding: 10,
borderWidth: 0.5,
borderRadius: 4,
},
status: {
padding: 10,
textAlign: 'center',
},
});
export default Example;
Reference
Methods
addListener()
static addListener: (
eventType: KeyboardEventName,
listener: KeyboardEventListener,
) => EmitterSubscription;
The addListener
function connects a JavaScript function to an identified native keyboard notification event.
This function then returns the reference to the listener.
Parameters:
Name | Type | Description |
---|---|---|
eventName Required | string | The string that identifies the event you're listening for. See the list below. |
callback Required | function | The function to be called when the event fires |
eventName
This can be any of the following:
keyboardWillShow
keyboardDidShow
keyboardWillHide
keyboardDidHide
keyboardWillChangeFrame
keyboardDidChangeFrame
Note that only
keyboardDidShow
andkeyboardDidHide
events are available on Android. The events will not be fired when using Android 10 and under if your activity hasandroid:windowSoftInputMode
set toadjustNothing
.
removeListener()
static removeListener(eventName, callback)
Deprecated. Use the
remove()
method on the event subscription returned byaddListener()
.
Parameters:
Name | Type | Required | Description |
---|---|---|---|
eventName | string | Yes | The nativeEvent is the string that identifies the event you're listening for |
callback | function | Yes | The function to be called when the event fires |
dismiss()
static dismiss();
Dismisses the active keyboard and removes focus.
scheduleLayoutAnimation
static scheduleLayoutAnimation(event: KeyboardEvent);
Useful for syncing TextInput
(or other keyboard accessory view) size or position changes with keyboard movements. It is a wrapper over LayoutAnimation.configureNext()
, that automatically animates views to their new positions when the next layout happens.
import React, { useState } from 'react';
import {
Keyboard,
StyleSheet,
TextInput,
View,
} from 'react-native';
const KeyboardApp = () => {
const [isKeyboardOpen, setIsKeyboardOpen] = useState(false);
const changeLayout = (isKeyboardOpen) => {
Keyboard.scheduleLayoutAnimation({
duration: 2000,
easing: 'linear',
});
setIsKeyboardOpen(isKeyboardOpen);
};
return (
<View style={styles.container}>
<TextInput
style={[styles.input, isKeyboardOpen && styles.after_input]}
onFocus={() => changeLayout(true)}
onSubmitEditing={() => changeLayout(false)}
/>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
input: {
borderColor: 'black',
borderWidth: 1,
color: 'black',
width: 200,
},
after_input: {
width: '100%',
},
});
export default KeyboardApp;
isVisible()
static isVisible(): boolean;
Whether the keyboard is last known to be visible.
metrics()
static metrics(): KeyboardMetrics | undefined;
Return the metrics of the soft-keyboard if visible.
Last updated: Sep 30, 2025