KeyboardAvoidingView

keyboardVerticalOffset 속성에 주려고 Promise로 구현했는데
아무리 해도 첫 번째에는 동작을 하지 않는다......
KeyboardAvoidingView 하위에 View를 주고 높이를 조절하는 편이 좋을 것 같다

태스크 큐와 마이크로 태스크 큐

react native 에서 Keyboard 에 addEventListener() 를 주어
키보드의 높이를 구하여 휴대폰 모델에 관계 없이 동적으로 사용하고 싶었는데
useEffect() 를 사용하여 이벤트를 등록하면 원하는 결과를 얻기 힘들었다

addEventListener() 가 비동기적으로 작동하기 때문에
useLayoutEffect() 를 사용하더라도 원하는 시점에 키보드의 높이를 구해서
화면을 렌더링시키기가 불가능했다

키보드를 누르는 시점에 이미 화면은 렌더링 되고 그 뒤에 키보드의 높이가 구해지는 식으로
작동하는 것으로 보였고
KeyboardAvoidingView 또한 비동기적으로 높이를 구하고 있는 것 같은데
키보드 willShow 이벤트 이전에 높이를 구해 이미 화면을 렌더링 시키고 있었다

View 의 높이 등을 조절해서 영역을 맞추자니 키보드 올라오는 속도와 너무 차이나서
보기에 좋지 않았고
Animated.View 를 사용하자니 생각보다 화면이 부드럽게 동작하지 않았다

떄문에 마이크로 태스크 큐를 사용하여 KeyboardEventListenr() 를 조작하고
높이 값을 then() 이나 async await 를 사용한다면
원하는 시점에 결과를 얻을 수 있을 것으로 보였다

addEventListener into Promise

프로미스 객체를 자주 다뤄보지 않아서 조금 헷갈리는 부분이었지만..

  const promise<number> = new Promise<number>(resolve => {
    
    let showKeyboard: EmitterSubscription;
    let hideKeyboard: EmitterSubscription;
    
    const heightUpload = (keyEvent: KeyboardEvent) => {
      showKeyboard && showKeyboard.remove();
      hideKeyboard && hideKeyboard.remove();
      resolve(keyEvent.endCoordinates.height);
    };
    
    showKeyboard = Keyboard.addListener('keyboardWillShow', heightUpload);
    hideKeyboard = Keyboard.addListener('keyboardWillHide', heightUpload);
  });


  React.useLayoutEffect(() => {
    promise.then((height: number) => {
      setKeyboardHeight(height);
    });
  }, []);

Promise 객체의 resolve 에 타입을 지정하기 위해서는 제네릭 타입으로 선언해줘야 한다
사용자 정의 훅으로 만들어서 사용하면 좋을듯..