[React-Native/오픈소스활동] issue#35639 KeyboardAvoidingView 관련 버그 해결 일지

 

개요

React Native는 키보드를 사용할 수 있도록 KeyboardAvoidingView 컴포넌트를 제공. KeyboardAvoidingView가 레이아웃을 조정하는 과정에서 불필요한 추가 공간이 영구적으로 발생하는 문제.

 

문제 분석

문제가 되는 컴포넌트 라이브러리 파일 내 각 함수 디버깅 및 Inspector를 사용해서 문제 원인을 분석.

Inspector 사용 화면

문제 분석 결과

• _relativeKeyboardHeight 함수 관련 문제임
• _onLayout 함수 내 event.nativeEvent.layout 관련 문제임
• 네이티브에서 가져오는 레이아웃 너비 값 event.nativeEvent.layout 에 의한 문제 
• event.nativeEvent.layout 값을 이해할 수 없음 네이티브에서 레이아웃 너비 값을 계산하는 수식까지 찾아보지 않았음
• 근본적인 문제를 해결하기 위해서는 관련 api 를 건드려야 함
• 그러나 네이티브를 연결하는 api를 수정하는 방법은 위험 (다른 라이브러리에 문제가 발생할 가능성)

따라서 KeyboardAvoidingView.js 내 _relativeKeyboardHeight 함수 수정을 통해 문제 해결 시도

 

조치

[ 문제 해결을 위한 코드 수정 ]

_relativeKeyboardHeight 함수 수정

import Dimensions from '../../Utilities/Dimensions' // <-- INSERT
...
async _relativeKeyboardHeight(
    keyboardFrame: KeyboardMetrics,
  ): Promise<number> {
    ...

    const deviceY = Dimensions.get('screen').height // <-- INSERT
    // Calculate the displacement needed for the view such that it
    // no longer overlaps with the keyboard
    return Math.max(frame.y + deviceY - keyboardY, 0); // <-- CHANGE frame.height to deviceY
    }

 

[ 코드 수정 후 ]

 

 [ PR 생성 및 피드백 ]

해당 방식은 좋은 방식이 아니라고 답변을 받았다. 더 좋은 방법을 찾은 경우 다시 PR 요청을 보낼 예정

 

관련 링크

Empty Space added at the end when we use KeyboardAvoidingView with ScrollView · Issue #35639 · facebook/react-native

fix(35639): prevent additional empty space with KeyboardAvoidingView by hanarotg · Pull Request #36079 · facebook/react-native