useStateisKeyboardOpen이라는 Boolean 형태의 상태를 만들고, 키보드 이벤트에 따라 값을 변경하도록 구현하겠습니다. 그리고 이 값이 바뀔 때 애니메이션 효과를 주겠습니다.

    screens/UploadScreen.js

    import {useRoute} from '@react-navigation/native';
    import React, {useEffect, useRef, useState} from 'react';
    import {
      StyleSheet,
      TextInput,
      View,
      Animated,
      Keyboard,
      useWindowDimensions,
    } from 'react-native';
    
    function UploadScreen() {
      const route = useRoute();
      const {res} = route.params || {};
      const {width} = useWindowDimensions();
      const animation = useRef(new Animated.Value(width)).current;
      const [isKeyboardOpen, setIsKeyboardOpen] = useState(false);
    
      useEffect(() => {
        const didShow = Keyboard.addListener('keyboardDidShow', () =>
          setIsKeyboardOpen(true),
        );
        const didHide = Keyboard.addListener('keyboardDidHide', () =>
          setIsKeyboardOpen(false),
        );
    
        return () => {
          didShow.remove();
          didHide.remove();
        };
      }, []);
    
      useEffect(() => {
        Animated.timing(animation, {
          toValue: isKeyboardOpen ? 0 : width,
          useNativeDriver: false,
          duration: 150,
          delay: 100,
        }).start();
      }, [isKeyboardOpen, width, animation]);
    
      return (
        <View style={styles.block}>
          <Animated.Image
            source={{uri: res.assets[0]?.uri}}
            style={[styles.image, {height: animation}]}
            resizeMode="cover"
          />
          <TextInput
            style={styles.input}
            multiline={true}
            placeholder=" 사진에 대한 설명을 입력하세요..."
            textAlignVertical="top"
          />
        </View>
      );
    }
    
    (...)
    신간 소식 구독하기
    뉴스레터에 가입하시고 이메일로 신간 소식을 받아 보세요.