react-native re - ender component by clicking a button from another component - react-native

Question

I have a list of interventions on my "first page". When I click on one, I navigate to its details, "second page", and there, is a button that allows me to start the events. When I click on that button it fills an object from a route : api/current
{
"interventionSummary": {some object}
}
When there's no intervention started :
{
"interventionSummary": null
}
When an intervention is started, it should be ended too so if the users doesn't I want to show a reminder message in the interventions list ("page 1") using: if interventionSummary !== null -> display the message to remind to end the intervention.
The problem is that my object interventionSummary is not updated when I go back on my interventionsList, unless I reload. For another page I was able to use :
this.props.navigation.addListener('focus', doStuff);
But the button and the route used were in the same page. I have tried, forceUpdate, simulate a state change : this.setState({state : this.state}) from solution on google, but nothing is working, I don't know how to make the component interventionsList see the update, or just re render after the click on the "second page"...
I hope that's clear, if anyone knows a way to do that

Answer 1

in your first page create your function.
myMethod() {
//function i want to call in second page
}
in your first page when navigating to second page(in my case when user presses a button) pass a function as a parameter like below:
onPress={() => this.props.navigation.navigate('SecondPage', {
rerenderOutputTitles: () => this.myMethod(),
})}
then in second page call this method wherever you want like below:
this.props.navigation.state.params.rerenderOutputTitles();