[React Native - android] Animated.View interpolate 사용 시, keyboard on/off 에 따른화면 비정상적 구현

* Animated.View 에서 interpolate 를 사용하여, 1번부터 4번까지 각 단계를 상단에 하나씩 추가하는 화면 구현.

1. 휴대폰번호 입력

2. 주민번호 입력

3. 통신사 입력

4. 이름 입력

 

# 현상

iOS 에서는 각 단계가 입력되었을 때 1 → 2 → 3 → 4 로 하나씩 항목이 정상적으로 추가되으나,

android 에서는 1 → 2 항목 추가 시 화면의 레이아웃이 설정과 다르게 상단으로 이동함.

 

iOS - 정상 구동 시 화면

android - 화면 레이아웃이 상단으로 이동하는 이상 현상

 

 

# 해결

1 → 2  단계 이동 시 Keyboard 를 on 한 상태로 그대로 이동하였는데,

1단계가 완료되었을 때 Keyboard 를 숨기고, 2단계가 시작될 때 Keyboard를 다시 on 되도록 구성하니 해결됨.

...
import { Keyboard } from 'react-native';

...

  Keyboard.dismiss();
...

android - 정상 구동 시 화면