[React Native(expo)] TextInput이 키보드에 가리는 오류 해결법

 

1. 문제 사항

TextInput을 이용해서 사용자에게 데이터를 받는 페이지를 만들었습니다.

 

안드로이드에선 정상적으로 잘 작동하지만,

ios에서는 키보드가 TextInput을 가리는 현상이 보입니다.
밑에 예시화면을 보면 테스트 3 textinput이 키보드로 가려서 확인할 수 없습니다.

 

예시화면

<KeyboardAvoidingView
  style={{ flex: 1 }}
  behavior={Platform.OS === 'ios' ? 'padding' : null}>
  
  <ScrollView style={{ flex: 1 }} >
    <TextInput
      style={{
        height: 120,
        marginTop: 100,
        borderColor: 'black',
        borderWidth: 1
      }}
      multiline={true}
      textAlignVertical='top'
      placeholder='테스트1' />

    <TextInput
      style={{
        height: 120,
        marginTop: 100,
        borderColor: 'black',
        borderWidth: 1
      }}
      multiline={true}
      textAlignVertical='top'
      placeholder='테스트2' />

    <TextInput
      style={{
        height: 120,
        marginTop: 100,
        borderColor: 'black',
        borderWidth: 1
      }}
      multiline={true}
      textAlignVertical='top'
      placeholder='테스트3' />
  </ScrollView>
  
</KeyboardAvoidingView>

테스트 TextInput을 클릭하니 키보드가 화면을 가려 내용을 알 수 없죠?

안드로이드에선 잘 작동하는데 ios에서만 저러니 더 답답했습니다 ㅠㅠ

 

 

 

2. 문제 해결

2가지 속성을 이용하면 됩니다.

 

1. automaticallyAdjustKeyboardInsets 

설명 :

1. ScrollView에서 사용한다.

2. "ScrollView에서 내용을 자동으로 조정할지 여부를 제어한다. 보기 삽입 및 스크롤키보드의 크기를 변경할 때 사용한다"

 

2. scrollEnabled={false} 

설명 :

1. TextInput에서 사용한다.

2. "false인 경우 텍스트 보기의 스크롤이 비활성화 된다. multiline={true}에서만 작동한다. 기본값은 true"

 

 

위 2가지를 적용코드에 적용하면 ios에서 TextInput을 써도 키보드에 화면이 가리지 않습니다.!
전체코드와  ios와 안드로이드에서 테스트 하는 모습을 보여드릴게요.

 <KeyboardAvoidingView
  style={{ flex: 1 }}
  behavior={Platform.OS === 'ios' ? 'padding' : null}>
  
  <ScrollView style={{ flex: 1 }} automaticallyAdjustKeyboardInsets={true}>  //추가
    <TextInput
      style={{
        height: 120,
        marginTop: 100,
        borderColor: 'black',
        borderWidth: 1
      }}
      multiline={true}
      scrollEnabled={false} //추가
      textAlignVertical='top'
      placeholder='테스트1' />

    <TextInput
      style={{
        height: 120,
        marginTop: 100,
        borderColor: 'black',
        borderWidth: 1
      }}
      multiline={true}
      scrollEnabled={false} //추가
      textAlignVertical='top'
      placeholder='테스트2' />

    <TextInput
      style={{
        height: 120,
        marginTop: 100,
        borderColor: 'black',
        borderWidth: 1
      }}
      multiline={true}
      scrollEnabled={false} //추가
      textAlignVertical='top'
      placeholder='테스트3' />
  </ScrollView>
  
</KeyboardAvoidingView>

정상적으로 잘 작동합니다.