Как мне вызвать функцию из другого компонента в React Native?

Если вы используете функциональный компонент, вы должны использовать forwardRef для добавления ссылки на компонент и useImperativeHandle для реализации метода, к которому вы хотите получить доступ через ссылку, вот пример. Здесь я вызываю метод bounce, который увеличивает масштаб компонента:

Перекус: https://snack.expo.io/@ashwith00/adequate-salsa

Код:

App.js

export default function App() {
  const boxRef = React.useRef();
  return (
    <View style = {styles.container}>
      <AnimatedBox ref = {boxRef} />
      <Button title = "Bounce" onPress = {() => boxRef.current.bounce()} />
    </View>
  );
}

AnimatedBox.js

import React, { forwardRef, useImperativeHandle, useRef } from 'react';
import { View, Animated } from 'react-native';

export default forwardRef((props, ref) => {
  const scale = useRef(new Animated.Value(1)).current;
  useImperativeHandle(
    ref,
    () => ({
      bounce: () => {
        Animated.timing(scale, {
          toValue: 1.5,
          duration: 300,
        }).start(({ finished }) => {
          if (finished) {
            Animated.timing(scale, {
              toValue: 1,
              duration: 300,
            }).start();
          }
        });
      },
    }),
    []
  );
  return (
    <Animated.View
      style = {{
        width: 100,
        height: 100,
        backgroundColor: 'red',
        transform: [{scale}]
      }}
    />
  );
});

Этого можно добиться, используя ref и forwardRef. закуски бывшие: https://snack.expo.io/@udayhunter/frisky-pretzels

App.js

import React,{useRef,useEffect} from 'react';
import { Text, View, StyleSheet } from 'react-native';
import PopUp from './PopUpCard'

const App =(props)=> {

const childRef = useRef(null)

  return (
    <View style = {styles.container}>
    <PopUp ref = {childRef}/>
    
    
    <Text
    onPress = {()=>{
    childRef.current.updateXvalue(10)
    }}
    >Press me</Text>
     
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
 
});

export default App

popUp.js

import React,{useState,useImperativeHandle,useEffect,forwardRef} from 'react'
import {View,Text,StyleSheet,Animated} from 'react-native'

const PopUp = (props,ref) => {
    const [xValue, setXvalue] = useState(10)
   
   const updateXvalue = (x)=>{
      setXvalue(prev=> prev+x)
      
    }
    
  useImperativeHandle(ref, () => ({
    updateXvalue
  }));

  return(
    <Animated.View style = {[styles.mainView,{transform:[{translateX:xValue}]}]}>
    </Animated.View> 
  )
}

const styles = StyleSheet.create({
  mainView : {
    height:100,
    width:100,
    backgroundColor:'red'
  }
})


export default forwardRef(PopUp)

переместите функцию movePopUpCard в app.js

и передать app.js передать его в

<PopUpCard movePopUpCard = {(params) => movePopUpCard(params)}/>

вы можете вызвать функцию из компонента PopUpCard с помощью this.props.movePopUpCard(params)

вы также можете передать параметры, если это необходимо