iOS에서 키보드가 작성한 내용을 가릴때 KeyboardAvoidingView 적용

TextInput에 내용이 많아졌을때 기본적으로 보여줄 수 있는 줄 수를 초과할 경우, 안드로이드에서는 별 문제없이 스크롤할 수 있지만, iOS에서는 하단 내요이 잘리게 된다.

따라서 KeyboardAvoidingView로 컴포넌트 내부의 내용을 감싸줘야 작성한 내용이 엄청 길어져 줄이 많아졌을 때도 문제없이 글을 작성할 수 있다.

 

KeyboardAvoidingView를 적용하지 않고 많은 내용을 작성했을때 iOS의 화면을 확인해보겠다.

KeyboardAvoidingView 미적용

키보드가 작성한 내용을 가리는 것을 확인할 수 있다. 이번엔 KeyboardAvoidingView를 적용해보자.

import React from "react";
import { KeyboardAvoidingView, Platform, StyleSheet } from "react-native";
import { SafeAreaView } from "react-native-safe-area-context";
import WriteHeader from "../components/WriteHeader";
import WriteEditor from "../components/WriteEditor";

function WriteScreen() {
  return (
    <SafeAreaView style={styles.block}>
      <KeyboardAvoidingView 
        style={styles.avoidingView}
        behavior={Platform.select({ios: 'padding'})}>
        <WriteHeader />
        <WriteEditor />
      </KeyboardAvoidingView>
    </SafeAreaView>
  )
}

const styles = StyleSheet.create({
  block: {
    flex: 1,
    backgroundColor: 'white',
  },
  avoidingView: {
    flex: 1,
  },
})

export default WriteScreen;

KeyboardAvoidingView 적용

작성한 내용들이 키보드 위로 스크롤되서 움직이는 것을 확인할 수 있다.