Aquí está mi código para un componente funcional personalizado (./Animations/ModalViewMoveUp.js)

 import React, { useRef, useEffect } from 'react'; import { Animated, Easing, Text, View } from 'react-native'; import { ExtendedExceptionData } from 'react-native/Libraries/LogBox/LogBox'; export const ModalViewMoveUp = (props) => { const moveAnim = useRef(new Animated.Value(900)).current const animIn = Animated.timing( moveAnim, { toValue: 50, duration: 1700, easing: Easing.elastic(), useNativeDriver:false } ) const animOut = Animated.timing( moveAnim, { toValue: 1000, duration: 1700, easing: Easing.elastic(), useNativeDriver:false } ) React.useEffect(() => { animIn.start(); }, [moveAnim]) return ( <Animated.View style={{ ...props.style, marginTop: moveAnim, }} > {props.children} </Animated.View> ); }

Y en ./App.js

 import {ModalIconViewMoveDown} from './Animations/ModalIconViewMoveDown' ... <ModalViewMoveUp > {/* other elements */} <TouchableOpacity onPress={()=>???}><Text>CANCEL</Text></TouchableOpacity> </ModalViewMoveUp >

Básicamente, quiero una forma de iniciar la animación de salida animOut.start() cuando se presiona el botón Cancelar, pero ni siquiera puedo obtener una ref del elemento ModalViewMoveUp en TouchableOpacity , y mucho menos llamar a una función desde él. Incluso algo como esto funcionaría para mí.

 <ModalViewMoveUp shouldStop={this.state.shouldStop}> {/* other elements */} <TouchableOpacity onPress={()=>setState{{shouldStop:true}}}><Text>CANCEL</Text></TouchableOpacity> </ModalViewMoveUp >

Y luego en /ModalViewMoveUp.js

 React.useEffect(() => { if(shouldStop){ animOut.start(); } //animIn.start() runs on render() }, [moveAnim])

Pero sé que no puedo simplemente establecer un estado en un componente exportado. ¿Tengo que convertir mi componente funcional en una clase? ¡Cualquier ejemplo de código sería apreciado!