CODEWITHSUNDEEP
react-native
arcticlisa
arcticlisa

Reputation: 73

How to hide components when keyboard is up?

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

Upvotes: 0

Views: 1537

Answers (3)

TIKramer
TIKramer

Reputation: 1

I made this into a npm package if anyone is interested. https://github.com/TIKramer/react-native-hide-onkeyboard

You can hide the view by using HideOnKeyboard> </HideOnKeyboard

Upvotes: 0

BruceHill
BruceHill

Reputation: 7164

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,
    }
  })
);

Upvotes: 2

Neeko
Neeko

Reputation: 1149

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.

Upvotes: 1

Related Questions