Pass props from Modal to other Component react navigation

Question

I use react navigation . I have a TabNavigator . Each Tab contains a StackNavigator . From one StackNavigator , it is possible to open a Modal . The Modal is opened when I click on a Button in a certain Component .

export default class CallModalComponent extends Component {
    constructor(props) {
        super(props)
    ...
    }

    ...

    render() {
    const { navigate } = this.props.navigation;
         return (
              <Button
               ....
               onPress={() => navigate("Modal")}/>

The in the TabNav registered screen <MyModal /> is a stateful Component . On close of the Modal I need the state of <MyModal /> to be passed down to <CallModalComponent /> .

The problem I am having is how that might work with react navigation in between... I know that I can use redux and send/retrieve it through the global store . But I wonder if its possible with only react native . Any suggestions?

EDIT

I implemented the Code from answer

export default class CallModalComponent extends Component {
    constructor(props) {
        super(props)
    ...
    }

    ...
    onModalDismis(childVar) {
      console.log('modal is closing');
      console.log(childVar);
    }
    render() {
    const { navigate } = this.props.navigation;
         return (
              <Button
               ....
               onPress={(childVar) => navigate("Modal", {onModalDismis: this.onModalDismis()})}/>

// Then in your modal component

componentWillUnmount () {
    console.log('unmount');
    this.props.navigation.state.params.onModalDismis('here we go');
}

The following gets logged: When the Modal Component is mounted I get:

modal is closing undefined

Then, when I actually close the Modal , I get:

unmount

and then the error:

Cannot read property of onModalDismiss of undefined.

I expected to be nothing logged on mounting of the Modal . And then, when I close the Modal I expected

unmount , modal is closing and here we go to be logged.

Answer 1

You can pass parameters to screens while navigating. This allows you to send a function to next screen and then you can initiate it when you want. More detail here .

Example

export default class CallModalComponent extends Component {
    constructor(props) {
        super(props)
    ...
    }

    ...
    onModalDismis() {
      console.log('modal is closing');
    }
    render() {
    const { navigate } = this.props.navigation;
         return (
              <Button
               ....
               onPress={() => navigate("Modal", {onModalDismis: this.onModalDismis})}/>

// Then in your modal component

componentWillUnmount () {
    this.props.navigation.state.params.onModalDismis();
}

Answer 2

@bennygenel was very close. Added a little.

export default class CallModalComponent extends Component {
    constructor(props) {
        super(props)
    ...
    }

    ...
    onModalDismis(childVar) {
      console.log('modal is closing');
      console.log(childVar);
    }
    render() {
    const { navigate } = this.props.navigation;
         return (
              <Button
               ....
               onPress={() => navigate("Modal", {onModalDismis:(childVar) => this.onModalDismis(childVar)})}/>


// Then in your modal component
componentWillUnmount () {
    this.props.navigation.state.params.onModalDismis("some var");
}

The reason for using an arrow function is because it binds() the context of this https://medium.freecodecamp.org/react-binding-patterns-5-approaches-for-handling-this-92c651b5af56 and it only gets executed when onModalDismis() is called, and not the render of <CallModalComponent/> . Difference in using functions in react-native