[React Native] 안드로이드 RBSheet 안에 있는 인풋 클릭시 활성화되는 키보드 때문에 레이아웃 위로 올라가는 이슈 해결방법

해당 글은 2022년 7월에 작성한 글입니다.

원인

1. 현재 사용중인 RBSheet 모듈은 react-native-raw-bottom-sheet인데 2년 동안 업데이트가 없을 정도로 관리가 안되고 있는 모듈입니다.
2. 이 모듈은 react-native-modal을 dependence하고 있는데 KeyboardAvoidingView를 비활성화해도안드로이드에서만 키보드 활성화 시 빈 공간만큼 모달이 올라갑니다.

해결방법

1. 해당 모듈의 내부 코드에있는 Modal 속성에 있는 statusBarTranslucent 의 값을 활성화 합니다  statusBarTranslucent는 모달이 시스템 상태 표시줄 아래에 있어야 하는지 여부를 결정하는데 기본값이 false라서 빈 공간이 있으면 상태바 아래까지 모달이 올라갑니다
2. 급한 대로 statusBarTranslucent를 활성화하고 yarn patch-package react-native-raw-bottom-sheet로 해당 모듈을 커스텀 적용했습니다.

주의사항

statusBarTranslucent 가 활성화된 상태에서 KeyboardAvoidingView 값이 true이면 모달이 상태바를 넘어가서 디자인 깨져 보이니 KeyboardAvoidingView=false로 설정합니다.

TODO

• statusBarTranslucent 를 동적으로 주고받을 수 있게 커스텀해보기 https://github.com/nysamnang/react-native-raw-bottom-sheet/pull/90 이미 모달 속성을 커스텀하는 pr 요청이 있지만 2년째 병합을 안하고 있습니다 🤣