I have a simple problem: I have a parent component that navigates to a child component, the child component is supposed to update the state on the parent component when the child navigates backwards (this.props.navigation.navigate("parentComponent", { params }) ). According to the docs this should be easy: https://reactnavigation.org/docs/params/
The navigation action is treated like a goBack action if the screen already exists. However when I do this and try to console.log the props in the parents screen after going back it shows it as empty.
Parent.js
<View style={styles.availabilitycontainer} visible={true}>
<View style={styles.titlegroupcontainer}>
<Text style={styles.abouttitle}>Schedule Availability</Text>
{/*Redirect to edit schedule*/}
<TouchableOpacity
style={styles.cameracantainer}
onPress={() =>
this.props.navigation.navigate("ChildComponent")
}
>
<Image source={Editoutline} />
</TouchableOpacity>
</View>
<ProfileAvalability />
</View>
Child.js
async submitToBackend(){
/* Code to submit to backend omitted */
this.props.navigation.navigate('ParentComponent', { params });
}
Navigate doesn't really work that way. If it detects the ParentComponent is already there in the stack, it will simply bring it forward and not necessarily rerender/reload.
What I suggest is pass a second param as a function that will perform the changes, eg:
submitData(data) {
setState(data)
}
then when you call the child:
props.navigation.navigate("ChildComponent", { submitData })
then inside the ChildComponent, when you're done processing, call submitData([insert your data here]), then that function will perform the write on the ParentComponent. This assumes you're using useState().