Here is my code for a custom functional component (./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>
  );
}

And in ./App.js

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

</ModalViewMoveUp >

I basically want a way to start the exit animation animOut.start() on when the cancel button is pressed, but i cant even get a ref of the ModalViewMoveUp element in the TouchableOpacity , let alone call a function from it. Even something like this would work for me

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

</ModalViewMoveUp >

And then in /ModalViewMoveUp.js

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

But i know i cant just set a state in an exported component. Do i have to convert my functional component to a class? Any code examples would be appreciated!