CODEWITHSUNDEEP
javascriptreactjsreact-native
Rana Jahid
Rana Jahid

Reputation: 31

react-navigation child component data to parent component function [react-navigation 5]

[i'm new in react-native.]

how do i pass child component data to parent component function in react-navigation 5

suppose i navigate to child component from parent component parent.jsx by 

this.props.navigation.navigate('ChildComponentScreen');

i have a function in parent.jsx component

parentFunction = (data) => {

}

how i called parentFunction in parent.jsx from child.jsx component with data.

Upvotes: 0

Views: 238

Answers (1)

Guruparan Giritharan
Guruparan Giritharan

Reputation: 16354

You can pass the function as a parameter to the next screen(ChildScreen) like below

class HomeScreen extends React.Component {
  sendData = (data) => {
    alert(data);
  };

  render() {
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>Home Screen</Text>
        <Button
          title="Go to Details"
          onPress={() =>
            this.props.navigation.navigate('ChildComponent', {
              sendData: this.sendData,
            })
          }
        />
      </View>
    );
  }
}

And call it from the child screen like below

class ChildScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>Details Screen</Text>
        <Button
          title="Go to Details"
          onPress={() => this.props.route.params.sendData('Details')}
        />
      </View>
    );
  }
}

Hope this helps.

Upvotes: 0

Related Questions