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

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?

question from:https://stackoverflow.com/questions/40307610/call-child-function-from-parent-component-in-react-native

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.