[React Native Webview] 웹뷰에서 가상 키보드 노출 유무 감지하기

서비스를 개발할 때 기획상 가상 키보드의 노출 여부에 따라 레이아웃이 변경되어야 하는 상황이 발생할 수 있는데, 이 때 가상 키보드가 노출되어 있는지에 대한 정보를 알아야 구현이 가능하다. 해당 이슈에서는 네이티브에 해당 기능이 있기 때문에 감지 자체는 네이티브에서 하고, 그 데이터를 웹으로 전송하는 방식으로 구현했다.

[가상 키보드 노출 예시]

React Native

먼저, Keyboard 모듈에 이벤트리스너를 생성해 가상 키보드 노출 여부를 웹뷰로 전송(postMessage)한다.

iOS의 리스너 타입은 keyboardWillShow, keyboardWillHide이며, AOS는 keyboardDidShow, keyboardDidHide이다.

주의할 점은, show와 hide 이벤트가 따로 있으므로 해당하는 boolean값을 넣어줘야한다.

useLayoutEffect(() => {
  const getEvent = (listener: KeyboardEventName) => {
    return Keyboard.addListener(listener, () => {
      return webviewRef.current?.postMessage(JSON.stringify('내용'));
    });
  };

  const event = getEvent('keyboardWillShow');

  return () => {
    event.remove();
  };
}, [webviewRef]);

Webview(React)

만들어둔 AppListener에서 네이티브에서 보낸 가상 키보드 노출 여부 데이터를 수신 후 사용한다. 여기에서는 전역 상태에 저장해 사용했다.

iOS는 window, AOS는 document를 사용해 수신한다.

window.addEventListener('message', (event: Event) => {
  const data = JSON.parse(event?.data);

  if (data?.type === "지정한 네이티브 전송 타입") {
    // data.data 저장
  }
});