React-Native 키보드로 세로길이가 바뀌는 것 방지하기

mobile에서는 키보드를 화면에서 사용한다. 키보드가 팝업 될때 ios는 괜찮지만 android는 키보드의 세로 높이에 맞춰서 세로 화면의 길이가 달라진다. 그로 인해 애써 만들어놓은 디자인이 망가지고 하는경우가 있다. 그 문제 점을 해결하는방법은 의외로 간단하다.

code change

우선 react-native project 안에서 android 폴더로 들어간다. 그곳에는 java로 작성된 안드로이드 네이티브 언어가 들어가 있다.

다음의 path로 이동!

./android/app/src/main/AndroidManifest.xml

다음 파일을 실행하면 xml로 작성된 코드가 보일 것이다.

android:windowSoftInputMode="adjustResize"

그 안에서 activity 섹션에서 위의 부분이 보일 것이다. 위의 코드를 다음과 같이 고쳐주자.

android:windowSoftInputMode="adjustPan"

위와 같이 고치고 나면 키보드가 팝업되어도 화면의 높이는 고정된채 input target에만 키보드가 위치하게 되어 디자인이 망가지는 일이 없어진다.