Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Pass props from child to parent react navigation

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...

like image 681
Stophface Avatar asked Oct 17 '17 17:10

Stophface


People also ask

Can we pass props from child to parent in React?

You can't pass props from child to parent in React, it's only one way (from parent to child). You should either: Put the state in the parent component and manipulate it from the child component by passing the setter function in the props.


1 Answers

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>
       )
    }
}
like image 128
bennygenel Avatar answered Oct 23 '22 03:10

bennygenel