how to check if keyboard is open in react native functional component

mukashwasti_ answered on October 14, 2022 Popularity 9/10 Helpfulness 8/10

answer how to check if keyboard is open in react native functional component

how to check if keyboard is open in react native functional component

Comment

import * as React from 'react';
import { ScrollView, View, TextInput, Keyboard, Text } from 'react-native';
import Constants from 'expo-constants';
import { Card } from 'react-native-paper';
import { Dimensions } from 'react-native';

export default function App() {
  const [keyboardShow, setKeyboardShow] = React.useState();
  React.useEffect(() => {
    const keyboardDidShowListener = Keyboard.addListener(
      'keyboardDidShow',
      () => {
        setKeyboardShow(true);
      }
    );
    const keyboardDidHideListener = Keyboard.addListener(
      'keyboardDidHide',
      () => {
        setKeyboardShow(false);
      }
    );

    return () => {
      keyboardDidHideListener.remove();
      keyboardDidShowListener.remove();
    };
  }, []);

  return (
    <View>
      <TextInput placeholder="input" style={{ marginTop: 100 }} />
      {keyboardShow && <Text>keyboard show</Text>}
    </View>
  );
}

Popularity 9/10 Helpfulness 8/10 Language javascript

Source: thewebdev.info

Tags: javascript keyboard react-native

Link to this answer
Share Copy Link

Contributed on Oct 14 2022

mukashwasti_

0 Answers Avg Quality 2/10

how to check if keyboard is open in react native functional component

Contents

More Related Answers

how to check if keyboard is open in react native functional component

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.