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 ?

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 ?

• javascript
• reactjs
• react-native
• ponents

• 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 ponents which would make this a non-issue for you. If you decide you need this arch, then this is a dupe of: stackoverflow./questions/26176519/reactjs-call-parent-method – jmargolisvt Commented Mar 23, 2018 at 15:51
• Possible duplicate of Call child function from parent ponent in React Native – Harikrishnan Commented Mar 23, 2018 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 – SJU Commented Mar 23, 2018 at 18:11

3 Answers 3

You can use refs https://reactjs/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

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
  }

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

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
        )
      }
    }