useState로 isKeyboardOpen이라는 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 () { const route (); const {res} route.params {}; const {width} (); 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> ); } ( )