useKeyboard cause re-render many time

[chukiatt]

const keyboard = useKeyboard()

this hook cause re-render all component too many on keyboard show and dismiss

after remove it, my app is working properly not re-render on keyboard show and hide

it work fine in android but not work in iOS

could you fixed this hook.

thank you very much

[LinusU]

The hook needs to trigger a re-render when it updates the value that it returns, otherwise your component wouldn't be able to use the updated value?

Or do you mean that it triggers multiple re-renders when the keyboard is shown/hidden, instead of one?

Could you post a snack that shows the problem?

[fukemy]

yes very noise problem, my chatscreen have large data, so i want to avoid re-render too many time

[flexsurfer]

yes it triggers at least twice with the same values

[DawitAskabe]

this is happening to me on RN 0.66.5. Check your version and update us. I am not using keyboard hook from this library, i have same event handler implementation as the hook in my code(shown bellow).

I tried the keyboard hook from this library and it did same thing so i stayed with my implementation.

In the following code If i comment out the state set calls, keybaord shows up and stays. If i try to update state in the event handlers the keyboard just shows for brief moment and hides right away (the state change caused refresh). This is the behavior on RN 0.66.5 which im locked on.

Same code in RN version "0.70.4" works. If anyone have insight how i can go around this issue on 0.66.5 let me know.

 useEffect(() => {
    const keyboardWillShowListener = Keyboard.addListener('keyboardDidShow', e => {
      setIsKeboardOpen(true);
      setchildHeight(childHeight + heightOfKeybaordHeight);
    });
    const keyboardWillHideListener = Keyboard.addListener('keyboardDidHide', e => {
      setIsKeboardOpen(false);
      setchildHeight(childHeight - heightOfKeybaordHeight);
    });

    return () => {
      keyboardWillHideListener.remove();
      keyboardWillShowListener.remove();
    };
  }, []);