KeyboardAvoidingView

키보드가 올라오면 전체 화면 크기에서
키보드가 차지하는 영역의 비율만큼
현재 영역의 비율을 자동으로 줄여주는 모듈이다

따라서 화면을 모두 차지하는 가장 상위 컴포넌트의
가장 큰 영역에 작성해야 쉽게 사용할 수 있다

behavior

옵션에 behavior - height, padding, position 이 있는데
키보드가 올라온 만큼 비켜줄 영역에 대한 동작 방식이다
height는 영역의 높이를 줄여서 키보드에 대한 자리를 마련하고
padding은 padding,
position은 relative 처럼 동작하여
키보드가 올라올 자리를 마련한다
ios 에서는 height로 사용 시 오류가 있다 - padding 을 기본적으로 사용
-> 다른 페이지에서 키보드 높이가 바뀌었다면 현재 페이지에서 바뀐 키보드의 최종 높이 비율이 적용됨..

keyboardVerticalOffset

keyboardVerticalOffset 옵션은 해당 비율에 추가로 얼마나 더 영역을 줘야하는지 number 로 작성할 수 있는데
이게 참 쉽지 않다..

height에선 영역의 높이 값을 줄이고
padding에선 padding 값으로 밀려 올라가는데
숫자로 적어줘야 하기 때문에 기기별로 값의 차이가 많이 발생할 수도 있어 조심 or 기기별, 상황별 디테일한 값을 줘야할 것으로 보인다
Keyboard.addEventListener()를 등록하여 유동적으로 키보드 높이에 대해 대응 할 수도 있지만 이벤트 리스너를 사용한다면 비동기로 등록되기 때문에 첫 화면 렌더링 이후 한 번은 원하는 동작이 씹힐 수 있다
-> 첫 화면 렌더링 시에만 기기별로 맞춰주고 이후로는 이벤트 리스너에 등록하여 키보드의 높이를 구하는 방식으로 처리해봐도 좋을 것 같다

그 외 시도해본 방법들

Animated.View 를 이용하여 비슷하게 구현해보기도 하였지만
썩 매끄럽게 동작하지도 않고 키보드가 올라오는 시간을 똑같이 맞추기가 여간 어려운 일이 아니다..

이벤트 리스너를 통해 isKeyboard state를 작성하여
구현 해보았을 때는 줄어들기 전에 표현할 화면이
줄어들 화면보다 길다면 Animated.View와 함께 사용하여
그나마 자연스럽게 만들 수 있지만
같은 내용을 그려야 한다면 딱딱 끊기는 모습이 좋지 않기 때문에
상단에 몰아서 배치하고 키보드만 슥 올라오는 형식으로 대부분 많이 하고 있는 것 같다
이러한 부분은 인식하고 보게 된다면 좀 킹받는 부분이기 때문에
가능한 개선을 하고싶다