TIL 45. React Native 키보드 노출 시 TextInput

탭 부분이랑 todo를 적는 input부분을 아래로 내렸다.
하단에 있으면 엄지 손가락만으로 조작하기 편할테니까!

근데, 아이폰에서는 TextInput을 터치하면 키보드가 올라오면서 TextInput창이 가려진다.
안드로이드는 안 그러는데, 아이폰에서만 그렇게 된다.

그래서 KeyboardAvoidingView 컴포넌트를 사용했다.

KeyboardAvoidingView

<KeyboardAvoidingView behavior={Platform.OS === "ios" ? "padding" : ""}>
  <SubmitTodo
    category={category}
    todoInput={todoInput}
    onChangeTodo={onChangeTodo}
    onSubmitTodo={onSubmitTodo}
    />
</KeyboardAvoidingView>

키보드가 올라올 때 가려지지 않았으면 하는 부분을 KeyboardAvoidingView로 감싸준다.
그리고 behavior={"padding"} 을 사용하면 되는데 안드로이드, 아이폰 둘 다 적용된다.
근데 안드로이드에 적용되면 빈 공간이 너무 많이 생겨버리기 때문에, Platform.OS를 이용한다.