CODEWITHSUNDEEP
javascriptreactjsreact-nativecomponents
SJU
SJU

Reputation: 3272

React Native - Execute child function from Parent Button onPress

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 ?

Upvotes: 0

Views: 5223

Answers (3)

SJU
SJU

Reputation: 3272

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

Upvotes: 1

ramki
ramki

Reputation: 481

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

Upvotes: 0

soutot
soutot

Reputation: 3671

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

Upvotes: 4

Related Questions