⚠️ 이슈 내용

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

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

📌 이슈 원인

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

<activity> | Android 개발자 | Android Developers

애플리케이션의 시각적 사용자 인터페이스 일부를 구현하는 활동(Activity 서브클래스)을 선언합니다. 모든 활동은 매니페스트 파일의 {@code } 요소로 나타내야 합니다. 여기에 선언되지 않은 활동

developer.android.com

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

✅ 해결 방법

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

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

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

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

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

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

# 재설치
$ react-native run-android

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

✅ 결과