여기서 TextInput을 누르면 키보드가 나타납니다(iOS의 경우 + K를 눌러야 나타납니다). 이때 키보드가 TextInput 컴포넌트를 가려서 입력하는 데 방해가 됩니다. 이럴 경우 KeyboardAvoidingView를 사용해 키보드가 컴포넌트를 가리지 않도록 구현할 수 있지만, 지금과 같은 레이아웃일 때는 구현하기가 좀 복잡합니다. KeyboardAvoidingView를 사용하지 않고 Animated를 사용해 직접 처리해주는 편이 더욱 자연스럽고 쉽습니다.

키보드가 나타났을 때 이미지의 세로 크기가 점점 작아지면서 화면에서 사라지는 효과를 구현해봅시다. 우선 키보드가 나타났는지 어떻게 감지할 수 있을까요? 이는 키보드에 이벤트를 등록해 알 수 있는데, 방법은 다음과 같습니다.

import {Keyboard} from 'react-native';

// 이벤트 등록
const didShow = Keyboard.addListener('keyboardDidShow', () => {
  console.log('키보드가 나타남')
});
const didHide = Keyboard.addListener('keyboardDidHide', () => {
  console.log('키보드가 사라짐')
});

// 이벤트 해제
didShow.remove();
didHide.remove();

이렇게 이벤트를 등록하고 해제하는 작업을 컴포넌트의 useEffect에서 해주면 됩니다. 컴포넌트가 화면에 나타날 때 이벤트를 등록하고, 사라질 때 이벤트를 해제해야 하므로 deps 배열은 비워줘야겠지요?