is there any hooks that i can use to determine if keyboard is visible or not?

[ddikodroid]

First, thank you for making this package. It helps me to solve the keyboard issue on my project.

I have this code below

import {KeyboardAwareScrollView} from 'react-native-keyboard-controller';

  <KeyboardAwareScrollView
      contentContainerStyle={[
        styles.contentContainer,
        {
          paddingBottom: isIos ? insets.bottom * 4 : spacing.xxl * 2,
        },
      ]}>
...
</KeyboardAwareScrollView>

I set the paddingBottom because my bottom component is hidden behind the bottom tab. But, when the keyboard is open, the padding is really visible.

I want to set the paddingBottom to 0 when the keyboard is open. How to do that?

Thanks in advance!

[kirillzyusko]

Hey @ddikodroid

Can you use something like this?

const useKeyboardVisibility = () => {
  const [isVisible, setVisible] = useState(false);

  useEffect(() => {
    const willOpenSubscription =  KeyboardEvents.addListener("keyboardWillShow", (e) => {
      setVisible(true);
    });
    const willHideSubscription =  KeyboardEvents.addListener("keyboardWillHide", (e) => {
      setVisible(false);
    });

    return () => {
      willOpenSubscription.remove();
      willHideSubscription.remove();
    }
  }, []);

  return isVisible;
}

[ddikodroid]

Hey @ddikodroid

Can you use something like this?

const useKeyboardVisibility = () => {
  const [setVisible, isVisible] = useState(false);

  useEffect(() => {
    const willOpenSubscription =  KeyboardEvents.addListener("keyboardWillShow", (e) => {
      setVisible(true);
    });
    const willHideSubscription =  KeyboardEvents.addListener("keyboardWillHide", (e) => {
      setVisible(false);
    });

    return () => {
      willOpenSubscription.remove();
      willHideSubscription.remove();
    }
  }, []);

  return isVisible;
}

thank you so much, it's working! just need to reorder the setVisible and isVisible

[kirillzyusko]

just need to reorder the setVisible and isVisible

Oh, yeah, my bad 🙈 😅