Keyboard

Important: The Vega SDK supports many of the React Native version 0.83 components and APIs. You can use the supported components and APIs in the same manner as an ordinary React Native app. This page lists a specific React Native feature supported by the Vega SDK and contains React Native V0.83 documentation from the reactnative.dev website created by Meta and other contributors and licensed under the Attribution 4.0 International License. For more information about React Native V0.83, see the React Native documentation, version 0.83. For the most current feature information, see the Release Notes.

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.

Copied to clipboard.

import React, {useState, useEffect} from 'react';
import {Keyboard, Text, TextInput, StyleSheet} from 'react-native';
import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';

const Example = () => {
  const [keyboardStatus, setKeyboardStatus] = useState('Keyboard Hidden');

  useEffect(() => {
    const showSubscription = Keyboard.addListener('keyboardDidShow', () => {
      setKeyboardStatus('Keyboard Shown');
    });
    const hideSubscription = Keyboard.addListener('keyboardDidHide', () => {
      setKeyboardStatus('Keyboard Hidden');
    });

    return () => {
      showSubscription.remove();
      hideSubscription.remove();
    };
  }, []);

  return (
    <SafeAreaProvider>
      <SafeAreaView style={style.container}>
        <TextInput
          style={style.input}
          placeholder="Click here…"
          onSubmitEditing={Keyboard.dismiss}
        />
        <Text style={style.status}>{keyboardStatus}</Text>
      </SafeAreaView>
    </SafeAreaProvider>
  );
};

const style = StyleSheet.create({
  container: {
    flex: 1,
    padding: 36,
  },
  input: {
    padding: 10,
    borderWidth: 0.5,
    borderRadius: 4,
  },
  status: {
    padding: 16,
    textAlign: 'center',
  },
});

export default Example;

Reference

Methods

`addListener()`

Copied to clipboard.

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 following list.
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: Only keyboardDidShow and keyboardDidHide events are available on Android. The events will not be fired when using Android 10 or below if your activity has android:windowSoftInputMode set to adjustResize or adjustNothing.

`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 of position changes with keyboard movements.

`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: May 13, 2026