React Native KeyboardAvoidingView로 키보드 가림현상 해결방법

expo를 통해 시뮬레이터로 돌렸을때는 아무런 이상이 없었는데

휴대폰으로 옮겨서 작업을 하다보니 문제가 발생했다.

댓글을 입력하는 칸이 있는데 클릭해서 입력을 하려고 하면 키보드가 올라와버려서

댓글창을 가려버리는 것이었다.

쉽게 말해서 아래와 같은 현상이다.

이렇게 아래쪽에 댓글을 달 수 있는 공간을 박아놨다.

텍스트 인풋창을 클릭해서 글을 쓰려고 하면

이렇게 키보드가 올라오는데 댓글창이 보이지 않는다.

검색해보니 이러한 경우가 상당히 많은데 KeyboardAvoidingView를 통해 해결할 수 있다.

아래와 같은 코드가 있다고 가정한다.

<KeyboardAvoidingView>

  <View>

      <TextInput

        placeholder="Email"

        style={styles.input}

      />

      <TextInput

        placeholder="Username"

        style={styles.input}

      />

      <TextInput

        placeholder="Password"

        style={styles.input}

      />

</View>

여기서 그냥 뷰자체를 KeyboardAvoidingView로 감싸주면 된다.

<KeyboardAvoidingView behavior="padding">

  <View>

      <TextInput

        placeholder="Email"

        style={styles.input}

      />

      <TextInput

        placeholder="Username"

        style={styles.input}

      />

      <TextInput

        placeholder="Password"

        style={styles.input}

      />

  </View>

</KeyboardAvoidingView>

아마 behavior를 통해 어떤식으로 반응할지 정하는 것 같다.

padding을 주니까 그만큼 위로 올라온다.