Call child function from parent component in React Native

Question

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

Answer 1

Nader Dabit's answer is outdated, since using String literals in ref attributes has been deprecated. This is how we would do it as of September 2017:

<Child ref={child => {this.child = child}} {...this.props} />
<Button onPress={this.child.myfunc} />

Same functionality, but instead of using a String to reference the component, we store it in a global variable instead.

Answer 2

You can add a ref to the child component:

<Child ref='child' {...this.props} />

Then call the method on the child like this:

<Button onPress={this.refs.child.myfunc} />

Answer 3

Simple and easy way to Parent --> Child function call

/* Parent.js */
import React, { Component } from "react";
import { TouchableOpacity, Text } from "react-native";
import Child from "./Child";

class Parent extends React.Component {
  onChildClick = () => {
    this.child.childFunction(); // do stuff
  };
  render() {
    return (
      <div>
        <Child onRef={(ref) => (this.child = ref)} />
        <TouchableOpacity onClick={this.onChildClick}>
          <Text>Child</Text>
        </TouchableOpacity>
      </div>
    );
  }
}

/* Child.js */
import React, { Component } from "react";

class Child extends React.Component {
  componentDidMount() {
    this.props.onRef(this);
  }
  componentWillUnmount() {
    this.props.onRef(undefined);
  }
  childFunction() {
    // do stuff
    alert("childFunction called");
  }
  render() {
    return <View>Hello World!</View>;
  }
}

Original Solution: https://github.com/kriasoft/react-starter-kit/issues/909

Answer 4

I think you have misunderstood something about component structure.

Assume that your child is a component which generates button for your other components. In this hierarchy your child has to inform it's parent that it was pressed.

child -----> parent

export default class Child extends Component {

     return(
    <Button onPress={this.props.onPress } />
     );
  }

In your parent component use child component to generate a button for you. In this way you can use child component any other components as a independent button.

export default class Parent extends Component {
constructor(props) {
    super(props);
    this.execChildFunct=this.execChildFunct.bind(this)
  }

  execChildFunct: function() {
  console.log('Managed!');
  }
  return (
   <Child onPress = {this.execChildFunct}></Child>
  )

}

Answer 5

it is in react. i hope it may help you.

class Child extends React.Component {
  componentDidMount() {
    this.props.onRef(this)
  }
  componentWillUnmount() {
    this.props.onRef(null)
  }
  method() {
    console.log('do stuff')
  }
  render() {
    return <h1>Hello World!</h1>
  }
}

---

class EnhancedChild extends React.Component {
        render() {
        return <Child {...this.props} />
      }
    }

class Parent extends React.Component {
  onClick = () => {
    this.child.method() // do stuff
  };
  render() {
    return (
      <div>
        <EnhancedChild onRef={ref => (this.child = ref)} />
        <button onClick={this.onClick}>Child.method()</button>
      </div>
    );
  }
}

ReactDOM.render(<Parent />, document.getElementById('root'))

Original Solution:

https://jsfiddle.net/frenzzy/z9c46qtv/

https://github.com/kriasoft/react-starter-kit/issues/909