Call child function from parent component in React Native

react-native

Solution

Here's how you can do this with functional components:

Parent

- Use `useRef()` to give the child component a reference in the parent:

const childRef = useRef()
// ...
return (
   <ChildComponent ref={childRef} />
)
...

Child

- Pass `ref` as one of the constructor parameters:

const ChildComponent = (props, ref) => {
  // ...
}

- Import `useImperativeHandle` and `forwardRef` methods from the `'react'` library:

import React, { useImperativeHandle, forwardRef } from 'react'

- Use `useImperativeHandle` to bind functions to the `ref` object, which will make these functions accessible to the parent

These methods won't be internally available, so you may want to use them to call internal methods.

const ChildComponent = (props, ref) => {
  //...
  useImperativeHandle(ref, () => ({
    // each key is connected to `ref` as a method name
    // they can execute code directly, or call a local method
    method1: () => { localMethod1() },
    method2: () => { console.log("Remote method 2 executed") }
  }))
  //...
  
  // These are local methods, they are not seen by `ref`,
  const localMethod1 = () => {
    console.log("Method 1 executed")
  }
  // ..
}

- Export the child component using `forwardRef`:

const ChildComponent = (props, ref) => {
  // ...
}
export default forwardRef(ChildComponent)

Putting it all together

Child Component

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


const ChildComponent = (props, ref) => {
  useImperativeHandle(ref, () => ({
    // methods connected to `ref`
    sayHi: () => { sayHi() }
  }))
  // internal method
  const sayHi = () => {
    console.log("Hello")
  }
  return (
    <View />
  );
}

export default forwardRef(ChildComponent)

Parent Component

import React, { useRef } from 'react';
import { Button, View } from 'react-native';
import ChildComponent from './components/ChildComponent';

const App = () => {
  const childRef = useRef()
  return (
    <View>
      <ChildComponent ref={childRef} />
      <Button
        onPress={() => {
          childRef.current.sayHi()
        }}
        title="Execute Child Method"
      />
    </View>
  )
}

export default App

There is an interactive demo of this on Expo Snacks: https://snack.expo.dev/@backupbrain/calling-functions-from-other-components

This explanation is modified from this TutorialsPoint article

Problem

I'm developing my first React Native app. What I'm trying to achieve is to execute a child function from the parent component, this is the situation: Child ``` export default class Child extends Component { ... myfunct: function() { console.log('Managed!'); } ... render(){ return( <Listview ... /> ); } } ``` Parent ``` export default class Parent extends Component { ... execChildFunct: function() { ... //launch child function "myfunct" ... //do other stuff } render(){ return( <View> <Button onPress={this.execChildFunct} /> <Child {...this.props} /> </View>); } } ``` In this example, I would like to log `'Managed!'` when I press the button in the parent class. How is it feasible?

Original source