Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
ddikodroid opened this issue Mar 15, 2024 · 3 comments
Assignees
Labels
question You wanted to clarify something about the usage of the library or have a question about something

Comments

@ddikodroid
Copy link

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.
Screenshot 2024-03-15 at 19 54 12

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

Thanks in advance!

@kirillzyusko kirillzyusko added the question You wanted to clarify something about the usage of the library or have a question about something label Mar 15, 2024
@kirillzyusko
Copy link
Owner

kirillzyusko commented Mar 15, 2024

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
Copy link
Author

ddikodroid commented Mar 15, 2024

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
Copy link
Owner

just need to reorder the setVisible and isVisible

Oh, yeah, my bad 🙈 😅

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
question You wanted to clarify something about the usage of the library or have a question about something
Projects
None yet
Development

No branches or pull requests

2 participants