React-navigation to re-render route when parent state changes - reactjs

Question

I have a page which receives data from a source in specific Intervals and sets them into a state, I show part of that data inside my page, and I have a button which opens another page(via react-navigation) and I want rest of data to be displayed in there, but the problem is, it won't refresh the second page when state of parent changes, below is simplified code:
import React from "react";
import { View, Text, Button } from "react-native";
import { createStackNavigator, createAppContainer, NavigationActions } from "react-navigation";
class HomeScreen extends React.Component {
constructor() {
super();
this.state = { number: 0 };
}
genNumber() {
number = Math.random();
this.setState({ number });
}
componentWillMount() {
setInterval(() => { this.genNumber() }, 1000);
}
render() {
return (
<View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
<Text>Home Screen</Text>
<Button title="Go" onPress={() => this.props.navigation.navigate('Test', { k: () => this.state.number })} />
</View>
);
}
}
class TestScreen extends React.Component {
constructor() {
super()
this.state = { t: 1 };
}
render() {
return (
<View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
<Text>Test {this.props.navigation.getParam('k')()}</Text>
</View>
);
}
}
const AppNavigator = createStackNavigator({
Home: {
screen: HomeScreen,
},
Test: {
screen: TestScreen
}
});
export default createAppContainer(AppNavigator);

Answer 1

you are using navigation params to pass data from parent class to child class and you want a reflection of state change in child class but it won't work in it.
For that use Component and pass data as props you immediate reflection of data.

Answer 2

React will not re-render a screen if a data passed to it through parameters changed, unfortunately this is how react navigation works.
To solve it, you can change the way your are passing data between screens.
instead of using navigation parameters use a global state(example redux).
in this case set the number variable to a state in redux,
then select that number in your Test screen and when number changes it will trigger a re-render.