[React Native] KeyboardAvoidingView가 정확한 키보드 높이를 가져오지 못하는 이슈

KeyboardAvoidingView를 사용하여 UI를 구현하던 중 키보드의 높이를 제대로 가져오지 못해서인지 키보드 위에 올라와야 할 UI가 키보드와 겹쳐서 보여졌다.

React Navigation과 같이 사용하면 문제가 발생한다는 내용을 찾았다.

이슈를 해결하기 위해 keyboardVerticalOffset 값을 조정하는 KeyboardAvoidingView 컴포넌트를 아래 코드와 같이 만들어서 사용하고 있다.

import React from 'react'
import { KeyboardAvoidingView as AvoidingView, KeyboardAvoidingViewProps, Platform, StatusBar } from 'react-native'
import { useHeaderHeight } from '@react-navigation/elements'
import { useSafeAreaInsets } from 'react-native-safe-area-context'

export const KeyboardAvoidingView: React.FC<KeyboardAvoidingViewProps & { children: any }> = props => {
  const safeAreas = useSafeAreaInsets()
  
  const keyboardVerticalOffset = props?.keyboardVerticalOffset ?? 0
  const iosKeyboardOffset = useHeaderHeight() - safeAreas.bottom + keyboardVerticalOffset
  const androidKeyboardOffset = useHeaderHeight() + (StatusBar?.currentHeight ?? 0) + keyboardVerticalOffset

  return (
    <AvoidingView
      {...props}
      keyboardVerticalOffset={Platform.select({
        ios: iosKeyboardOffset,
        android: androidKeyboardOffset,
      })}
    >
      {props.children}
    </AvoidingView>
  )
}

현재 사용하고 있는 React Native 버전은 0.66.5이다. 상위 버전에서 이슈가 해결되었는지 모르겠다.

참고 내용