JAVASCRIPT

detect keyboard open or close in react js

const isInitiallyVisible = false;
const [isKeyboardVisible, setKeyboardVisible] = React.useState(isInitiallyVisible);

React.useEffect(() => {

  // toggle isKeyboardVisible on event listener triggered
  window.visualViewport.addEventListener('resize', () => {
    setKeyboardVisible(!isKeyboardVisible);
  });
}, [isKeyboardVisible]);

// the above answer is an combination of the following to answers:
// https://stackoverflow.com/a/65092685/10261711
// https://stackoverflow.com/a/57502759/10261711