[ReactNative] KeyboardAvoidingView 안에 여러 TextInput을 사용할 때 offset 맞지 않는 문제 해결

[ReactNative] KeyboardAvoidingView 안에 여러 TextInput을 사용할 때 offset 맞지 않는 문제 해결

 

 

하나의 KeyboardAvoidingView 안에서 여러 TextInput을 사용하면 

keyboardVerticalOffset이 첫 TextInput에 맞춰 세팅되어,

키보드 높이가 다른 TextInput을 만나게 되면

KeyboardAvoidingView 본래의 목적을 충족시키지 못하는 현상이 발생한다.

 

코드는 이렇고,

<KeyboardAvoidingView
    behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
    keyboardVerticalOffset={Platform.OS === 'ios' ? 0 : 20}
    style={{
      flex: 1,
      width: '100%',
      alignSelf: 'center',
    }}>
    {isStep1 && (
    	<TextInput
        	...
            keyboardType="default"
        />
    )}
    {isStep2 && (
    	<TextInput
        	...
            keyboardType="numeric"
        />
    )}
    {isStep3 && (
    	<TextInput 
	        ...
			keyboardType="default"
        />
    )}
</KeyboardAvoidingView>

 

현상은 이렇다.

isStep1 === true

isStep2 === true

 

분명 공식문서 에는 

    <KeyboardAvoidingView
      behavior={Platform.OS === 'ios' ? 'padding' : 'height'}

 

이렇게 쓰라고 되어있건만...

 

 

---

해결방법

    <KeyboardAvoidingView
      behavior={'padding'}

이렇게 padding으로 통일시켜주면 해결된다.

 

behavior: 키보드회피보기 이 구성요소는 가상 키보드가 표시되는 동안 계속 보이도록 키보드 높이를 기준으로 높이, 위치 또는 하단 패딩을 자동으로 조정합니다.

 

-> iOS와 마찬가지로 padding을 사용하여 키보드 높이를 기준으로 "패딩"을 자동 조정하는 것이다.

 

공식문서 링크