How to Call child function from parent component in React Native functional component?

Question

Hello I want to call showModal() in AddModalBox.js from App.js by using useRef() to access AddModalBox.js into App.js but is doesn't work it said: showmodal.showMdal() is not a function... Thanks for help... App.Js

    import React ,{useRef,useState} from 'react'
    import {View,Text,StyleSheet,Image,Button,FlatList, Alert } from 'react-native'
    import data from './components/Data'
    import Swipeout from 'react-native-swipeout'

    import AddModalBox from './components/AddModalBox'

    const App=()=>{
      const showmodal =useRef()
      const  callModal=()=>{
        showmodal.showModal()
      }
      return(          
        <>
         <View style={{backgroundColor:'red',height:10,flex:1,flexDirection:'row',marginTop:10}}>
          <View style={{flexDirection:'row',alignItems:'center',justifyContent:'flex-end'}}>
            <Button title="+" onPress={callModal}/>
          </View>
        </View>
        <FlatList data={data} renderItem={({item,index})=> <Mydata item={item} index={index} parentFlatList={refreshFlatList}/>}
        keyExtractor={item=>item.id}

        /> 
        <AddModalBox ref={showmodal}/>
    </>
      )
    }

    export default App;

AddModalBox.js I want to call showModal() function from App.js …

import React,{useRef}from 'react'
import {Text,View,Button,Dimensions} from 'react-native'
import Modal from 'react-native-modalbox'
import { useState } from 'react'
//import data from './components/Data'

var screen=Dimensions.get('window')

const AddModalBox=(props)=>{
    let isOpen=false

         // I want call this function in App.js
    const showModal=()=>{
        isOpen=true
    }
    return(
        <>
        <Modal  style={{width:screen.width-80,height:200,justifyContent:'center'}}
        position='center'
        backdrop={true}
        onClosed={()=>isOpen=false}
        ref={show}
        isOpen={isOpen}
        >
        <Text>hello from modal</Text>
        </Modal>
        </>
    )
}

export default AddModalBox;

Answer 1

Let me show you an example to use parameters between child and parent components. This example is about variable visibility, but you can see and get insight to use on your code:

//Parent component
    class Parent extends Component {
        state = {
          viewClhild: false
        }

        goToChild = (task) => {    
            this.setState({viewChild: true})
        }

        onShowClhildChange(viewChild) {
            this.setState({ viewChild });
          }

        render() {
            <View>
                {
                    this.state.viewChild 
                      ? <ChildScreen onShowClhildChange={this.onShowClhildChange.bind(this)} /> 
                      : <Text>Show Parent</Text>
                  }
                <Button 
                    onPress={() => {this.goToChild()}}
                >
                    <Text style={button.text}>Entrar</Text>
                </Button>
            </View>
        }

    }


    //Child Component
    class ChildScreen extends Component {
        isChildVisible = (isVisible) => {
            this.setState({ viewChild: isVisible })
            if (this.props.onShowClhildChange) {
               this.props.onShowClhildChange(isVisible);
            }
          }
          constructor (props) {
            super(props);

            this.state = {
              viewChild: this.props.viewChild
            }
          }

          render() {
            return (
              <View>
                <Button 
                  onPress={() => this.isChildVisible(false)}
                >
                  <Text>CLOSE CHILD SCREEN</Text>
                </Button>
            </View>
            )
        }
    }