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.

bennygenel · Answer 1 · 2017-09-15T13:00:03.520

6

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

edited Sep 15 '17 at 13:00

answered Sep 15 '17 at 12:54

bennygenel

23,896
6
65
78

could you point me to the docs where I can read more about it? – four-eyes Sep 15 '17 at 12:58
I think you implemented the code wrong. Update your question with what you tried so far so I can have a better look – bennygenel Sep 15 '17 at 13:13
got it. Posted it as answer :) Thanks for your help! – four-eyes Sep 15 '17 at 14:31

score 1 · Accepted Answer · answered Sep 15 '17 at 14:16

@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

Pass props from Modal to other Component react navigation

2 Answers2