By Stophface


2017-10-17 17:42:57 8 Comments

I am using react-navigation. I am passing propsfrom a react-native component to the modal from react-navigation which is opened on a tap.

export default class SomeComp extends Component {
...

render() {
    const { navigate } = this.props;
    return (
        <TouchableOpacity
        onPress={navigate("Modal", {data: ..., ...})}
        ..../>
       )
    }
}

Inside the modal I access the goBack() function which closes the modal, as well as the props passed through SomeComp

export default class Modal extends Component {
...

render() {
    const { data, ... } = this.props.navigation.state.params;
    const { goBack } = this.props.navigation;
    return (
        <View>
            <TouchableOpacity
            onPress={goBack()}
            ..../>
            <Text>
               {data, ...}
            </Text>
        </View>
       )
    }
}

What I wonder is, whether its possible or not to pass props down from Modal to SomeComp, without using redux. In a "normal" react-native parent-child component I would do that with a simple callback. However, that does not work here, because the modal is defined in the router, hence, completely independent from SomeComp. Its only called from there...

1 comments

@bennygenel 2017-10-17 17:50:53

There is really simple solution to pass back props to parent component on goBack().

You can pass an extra prop containing function to Modal and right before calling goBack() or in componentWillUnmount you can call that function.

Example

export default class SomeComp extends Component {
...

onGoBack = (someDataFromModal) => {
  console.log(someDataFromModal);
}

render() {
    const { navigate } = this.props;
    return (
        <TouchableOpacity
        onPress={navigate("Modal", {data: ..., ..., onGoBack: this.onGoBack})}
        ..../>
       )
    }
}

export default class Modal extends Component {
...

componentWillUnmount() {
  if(this.props.navigation.state.params.onGoBack) {
    this.props.navigation.state.params.onGoBack('I fired from Modal!');
  } 
}

render() {
    const { data, ... } = this.props.navigation.state.params;
    const { goBack } = this.props.navigation;
    return (
        <View>
            <TouchableOpacity
            onPress={goBack()}
            ..../>
            <Text>
               {data, ...}
            </Text>
        </View>
       )
    }
}

@Stophface 2017-10-17 18:15:42

Oh dear... I didnt think about passing a function as a prop through params... thanks!

@Akhilesh Sinha 2018-05-08 12:42:31

Amazing....you saved my day dear!!

Related Questions

Sponsored Content

24 Answered Questions

[SOLVED] What is the difference between state and props in React?

  • 2015-01-16 19:28:27
  • skaterdav85
  • 119519 View
  • 348 Score
  • 24 Answer
  • Tags:   javascript reactjs

7 Answered Questions

[SOLVED] Understanding unique keys for array children in React.js

  • 2015-02-04 19:06:11
  • Brett DeWoody
  • 309400 View
  • 387 Score
  • 7 Answer
  • Tags:   javascript reactjs

3 Answered Questions

1 Answered Questions

How to pass props to child compoent from parent in react-native?

4 Answered Questions

[SOLVED] Passing props to react-redux container component

4 Answered Questions

[SOLVED] React-Native - Custom navigation with Navigator component

5 Answered Questions

1 Answered Questions

2 Answered Questions

[SOLVED] React Navigation: Missing prop at top level component

1 Answered Questions

[SOLVED] react native component passed as props cannot access props?

  • 2017-05-02 02:55:28
  • hanachan1026
  • 682 View
  • 0 Score
  • 1 Answer
  • Tags:   react-native

Sponsored Content