[Trouble Shooting] 키보드 화면 고정하는 방법

⚠️ 이슈 내용

앱을 사용하면서, TextInput창에 텍스트를 입력하는 순간이 있다. 상황에따라 다르지만, 키보드가 올라올 때, 버튼이나 텍스트도 같이 밀려올라와야 하는 경우도 있지만, 대게의 경우 화면이 움직이지 않고 고정되어 있을때가 사용자 입장에서 자연스럽다고 느껴지게 됩니다. (이미 그렇게 사용하는 것을 학습해왔기 때문에.. )

 

저같은 경우에도 앱 개발 프로젝트 당시 이와 같은 현상을 직면했습니다. Bottom Sheet가 밀려서 올라오니 매우 부자연스럽게 느껴졌고, 키보드가 항상 고정이 되어 있어야함이 필요했습니다.

 

 

 

📌 이슈 원인

React Native 공식문서 - TextInput

 

Android에서 입력란에서 텍스트 선택을 수행하면 앱의 활동  windowSoftInputMode 모드 매개변수가 adjustResize로 변경될 수 있습니다. 이는 키보드가 활성화된 상태에서 위치의 구성 요소에 문제를 일으킬 수 있습니다. 이 동작을 피하려면 AndroidManifest.xml에서 windowSoftInputMode를 지정하거나 네이티브 코드로 이 매개변수를 프로그래밍적으로 제어하세요." 그리고 해당 파란색 형광펜으로 해당하는 안드로이드 공식문서를 참조가 되어있습니다.  바로가기

<activity>  |  Android 개발자  |  Android Developers

해당 링크를 누르면 AndroidMainfest.xml에 적용되는 Activity 서브클래스에 대한 선언에 적용되는 값들을 확인할 수 있습니다. 이곳에서 문서를 읽어가며 적절히 방법을 찾을 수 있었습니다. 

✅ 해결 방법

물론, React Native에서 이것을 조작하는 방법도 있지만, Android에서 쉽게 조작할 수 있습니다.

 

이중에서 확인해야할 부분은 "windowSoftInputMode" 입니다. 

https://developer.android.com/guide/topics/manifest/activity-element?hl=ko

 

많은 옵션들이 있기 때문에 이것을 위한 문서의 내용들도 하단에 정리가 되어 있습니다. 그중에서 위치 고정을 위해서 봐야할 것은 맨 마지막의 "adjustPan" 입니다.

windowSoftInputMode 의 옵션들

 

그래서 아래와 같이 기존에 있던 옵션 "adjustResize" 에서 "adjustPan"으로 수정하였습니다.

 

 

이때 주의 해야할 것은 앱을 완전히 재설치해서 잘 작동하는지를 확인하는 것입니다. 만약 재설치하지 않고 실행하면 기존의 캐시들이 남아 그대로일 수 가 있습니다. 따라서 반드시 재설치를 하는 것을 권장합니다. 

# 재설치
$ react-native run-android

 

그럼 이제 Android에서 키보드가 올라와도 바텀시트나 다른 레이어에 영향을 주지 않게 됩니다.

 

✅ 결과