How to hide components when keyboard is up?

Question

Is there a way to hide components when the keyboard shows, aside from installing packages?

Answer 1

Using the code sample from the Keyboard documentation, I would do something like this:

class Example extends Component {
  state = {keyboardOpen: false};

  componentDidMount() {
    this.keyboardDidShowListener = Keyboard.addListener(
      'keyboardDidShow',
      this._keyboardDidShow,
    );
    this.keyboardDidHideListener = Keyboard.addListener(
      'keyboardDidHide',
      this._keyboardDidHide,
    );
  }

  componentWillUnmount() {
    this.keyboardDidShowListener.remove();
    this.keyboardDidHideListener.remove();
  }

  _keyboardDidShow() {
    this.setState({
      keyboardOpen: true
    });
  }

  _keyboardDidHide() {
    this.setState({
      keyboardOpen: false
    });
  }

  render() {
    return (
      {!this.state.keyboardOpen && <MyComponent />}
    );
  }
}

Basically, in componentDidMount you subscribe to the show and hide keyboard events. You keep track of the Keyboard current state in your Component state thanks to this.state.keyboardOpen and you conditionally display MyComponent based on the value of this.state.keyboardOpen in your render method.

Answer 2

For those using functional components, here is a hook that you could use to detect when the keyboard is opened and closed.

import { useEffect, useState, useMemo } from "react";
import { Keyboard } from "react-native";

const useKeyboardOpen = () => {
  const [isKeyboardOpen, setIsKeyboardOpen] = useState(false);

  useEffect(() => {
    const keyboardOpenListener = Keyboard.addListener("keyboardDidShow", () =>
      setIsKeyboardOpen(true)
    );
    const keyboardCloseListener = Keyboard.addListener("keyboardDidHide", () =>
      setIsKeyboardOpen(false)
    );

    return () => {
      if (keyboardOpenListener) keyboardOpenListener.remove();
      if (keyboardCloseListener) keyboardCloseListener.remove();
    };
  }, []);

  return isKeyboardOpen;
};

export default useKeyboardOpen;

And this is how I use it in my projects:

import { useTheme } from "react-native-paper";
import useKeyboardOpen from "hooks/useKeyboardOpen";

export const Login = () => {
  const theme = useTheme();
  const isKeyboardOpen = useKeyboardOpen();
  const styles = useStyles(theme, isKeyboardOpen);

  return ( 
    <View style = {styles.container}>
      <View style = {styles.logo}>
        <Logo />
      </View> 
      <View style = {styles.form}>   
          ....   
      </View> 
    </View>
  );
};

const useStyles = (theme, isKeyboardOpen) = (
  StyleSheet.create({
    container: {
      flex: 1,
    },
    logo: {
      flex: 1,
      marginTop: 20,
      justifyContent: "center",
      alignItems: "center",
      ...(isKeyboardOpen && {
        display: "none",
      }),
    },
    form: {
      flex: 1,
    }
  })
);