I am using react-navigation
. I am passing props
from 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...
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.
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>
)
}
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With