Params not updating on state change ,react native - reactjs

Question

i have a react native app with 2 screens ,the first one is supposed to receive updates from a server and updates its state , upon clicking a submit button the app navigates to another screen that is dependent on the state of the first , i have managed to pass the values via the params and retrieve them in the second screen however i can not seem to get the updated values from the first screen as they are being replaced periodically ,how can i go about it, should i pass a reference of the object to the second screen and if so how would i go about it ..
The first screen , note the state in this screen is updating well and fine i console logged it after each setState , its the second screen that's not receiving the updates
handleSubmit = () => {
this.props.navigation.navigate("Tracking Bus", this.state.bus);
};
render() {
return (
<TouchableNativeFeedback onPress={this.handleSubmit}>
<View
style={{
width: 330,
height: 40,
backgroundColor: "#6FCF97",
alignSelf: "center",
justifyContent: "center",
}}
>
<Text style={{ alignSelf: "center", fontSize: 20 }}>Submit</Text>
</View>
</TouchableNativeFeedback>
</View>
</View>
);
}
The Second Screen , render function i.e
render() {
return (
setInterval(() => {
console.log(this.props.route.params.bus.location[1]);
}, 2000);
})
am expecting to get updated values but i i just get the initial values

Answer 1

Maybe this can work :
handleSubmit = () => {
this.props.navigation.navigate("Tracking Bus", {bus:this.state.bus});
};
and in your second screen:
render() {
return (
setInterval(() => {
const bus= this.props.navigation.getParam('bus');
console.log(bus);
}, 2000);
})

Answer 2

I may be late, but you can use componentWillReceiveProps().
export default class Example extends Component {
constructor(props) {
super(props);
}
componentDidMount() {
// If needed
this.componentWillReceiveProps(this.props);
}
componentWillReceiveProps(props) {
if(typeof props.route === "object" && typeof props.route.params === "object" && props.route.params.bus !== undefined) {
this.props.navigation.push("Tracking Bus", {bus:props.route.params.bus});
}
}
// ...
}

Answer 3

You are passing the params incorrectly from first screen. You can try this and your fetching logic seems fine as this.props.route.params.bus
handleSubmit = () => {
this.props.navigation.navigate("Tracking Bus", { params: {bus : this.state.bus} });
};