React Native - Execute child function from Parent Button onPress

Question

Disclaimer : I'm new to RN. I have already tested multiple solutions from other similar questions without success so far.

I have a Parent that render two Childrens like this

export default class ParentComponent extends Component {

  constructor(props) {
       super(props)
  }

  render() {
    return (
      <View>
        <Foo name="a" ref={foo => {this.foo = foo}} {...this.props} />
        <Text>-----------</Text>
        <Foo name="b" />
        <Text>-----------</Text>
        <Button
          onPress={this.foo.myFunction()}
          title="Start"
          color="#841584"
        />
      </View>
    )
  }

}

My class Foo has a function inside it that start some process :

class Foo extends Component {
  myFunction(){
    // Some stuff here
  }
}

How can I call this myFunction for my Child when I press on the Button ? Optionally, is it possible with only one onPress, to call the function for both Child and avoid creating two Button for each Child ?

Why even use a child here? Seems to me you either don't need the child or you could encapsulate all your Foo logic and its components which would make this a non-issue for you. If you decide you need this arch, then this is a dupe of: https://stackoverflow.com/questions/26176519/reactjs-call-parent-method — jmargolisvt, Mar 23 '18 at 15:51
Possible duplicate of [Call child function from parent component in React Native](https://stackoverflow.com/questions/40307610/call-child-function-from-parent-component-in-react-native) — Harikrishnan, Mar 23 '18 at 17:55
I tested the solution provided in this question, but it is not working. This is one of the solution that I presented here — ZazOufUmI, Mar 23 '18 at 18:11

score 4 · Answer 1 · answered Mar 23 '18 at 15:58

You can use refs https://reactjs.org/docs/refs-and-the-dom.html

Example:

class Parent extends Component {
  render() {
    return (
      <View>
        <Child ref={instance => { this.child = instance; }} />
        <TouchableOpacity onPress={() => { this.child.clicked(); }}>
          <Text>Click</Text>
        </TouchableOpacity>
      </View>
    );
  }
}

class Child extends Component {
  clicked() {
    alert('clicked');
  }

  render() {
    return (
      <Text>Hello</Text>
    );
  }
}

Hope it helps

getting following error: undefined is not an object (evaluating '_this.child.clicked') — Sercan Samet Savran, Nov 15 '21 at 18:10

score 1 · Accepted Answer · answered Mar 26 '18 at 09:52

Basically what I did is to call a local function when onPress and change the state of the Parent. I pass this state to the Child during its creation. And since the Child are updated (if needed) when the Parent's state change this do the trick.

export default class ParentComponent extends Component {

  constructor(props) {
       super(props)
       this.state = {
         activity: false
       }
  }

onButtonPress = () => {
    this.setState({
      activity: !this.state.activity
    });
  }

  render() {
    return (
      <View>
        <Foo name="a" activity={this.state.activity} />
        <Text>-----------</Text>
        <Foo name="b" activity={this.state.activity} />
        <Text>-----------</Text>
        <Button
          onPress={this.onButtonPress}
          title="Start"
          color="#841584"
        />
      </View>
    )
  }

}





class Foo extends Component {
  myFunction(){
    // Some stuff here
  }

  componentWillReceiveProps(newProps) {
    if (newProps.activity === true) {
      this.myFunction();
    }
  }
}

score 0 · Answer 3 · answered Mar 23 '18 at 16:22

It's better to do myFunction logic inside ParentComponent and setState the data which can be passed into child ie:Foo.

    constructor(props) {
       super(props);
       this.state = {
          fooData: initialValue,
       }
    }


    myFunction = () => {
       // Some stuff here
       this.setState({ fooData: someValue })
    }

    render() {
      return (
        <View>
          <Foo name="a" data={this.state.fooData} {...this.props} />
          <Text>-----------</Text>
          <Foo name="b" data={this.state.fooData}/>
          <Text>-----------</Text>
          <Button
            onPress={this.myFunction}
            title="Start"
            color="#841584"
          />
        </View>
      )
    }

and you can make the changes inside Foo accordingly

class Foo extends Component {
      render() {
        const { data } = this.props;
        return(
          //Use data here to make change
        )
      }
    }

React Native - Execute child function from Parent Button onPress

3 Answers3