CODEWITHSUNDEEP
javascriptreact-nativereact-navigation
four-eyes
four-eyes

Reputation: 12469

Pass props from Modal to other Component react navigation

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.

Upvotes: 2

Views: 4039

Answers (2)

four-eyes
four-eyes

Reputation: 12469

@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

Upvotes: 2

bennygenel
bennygenel

Reputation: 24680

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

Upvotes: 6

Related Questions