It is not that.
Imagine an app with 4 tabs, each tab has its associated screen.
When app in opened and when I tap each tab, constructor of each (selected) screen is called. But hen you tap a tab for the second time, the constructor of the associated screen is not called any more. I need to update related screen content data each time the associated tab is tapped
Oh okay, so maybe you can use the tabBarOnPress option to detect when tab is pressed ? in you navigationOptions of you screen, do something like that :
static navigationOptions = ({ navigation }) => ({
tabBarOnPress: ev => {
// Your logic before jumping to the screen
ev.jumpToIndex(ev.scene.index); // This actually allow you to jump to your screen
}
});
},
{
navigationOptions: () => ({
headerTitleStyle:
{
fontWeight: 'normal',
},
initialRouteName: "Access",
tabBarOnPress: ev => {
Alert.alert("Test","Tab selected");
// Your logic before jumping to the screen
ev.jumpToIndex(ev.scene.index); // This actually allow you to jump to your screen
}
}),
}
Ok well, that is a little bit more tricky… If you meant to re-render the screen, you have to pass a params manually when you navigate to your screen. That will allows you to update your components state. See the example below.
in your root TabNavigator options : navigations/MainTabNavigator.js:
export default TabNavigator(
{
Home: {
screen: HomeScreen
},
Links: {
screen: LinksScreen,
// Here, Add a navigationOption to this screen
navigationOptions: ({ navigation }) => ({
tabBarLabel: ({ tintColor }) => (
<TouchableOpacity
// Pass a random number or a new Date() as a param when navigate to the screen
onPress={() => navigation.navigate("Links", { date: new Date() })}
style={{ flex: 1, alignItems: "center", justifyContent: "center" }}
>
<Text>Links</Text>
</TouchableOpacity>
)
})
},
Settings: {
screen: SettingsScreen
}
},
{
...
In your screen: screens/myScreen:
export default class LinksScreen extends React.Component {
// Add your new random data or date to your state
state = {
date: new Date()
};
static navigationOptions = ({ navigation }) => ({
title: "Links",
// Don't remove this part
tabBarOnPress: e => {
e.jumpToIndex(e.scene.index);
}
});
// Your component will receive new props in navigation.state.params
// so it will trigger this function
componentWillReceiveProps() {
console.log("rerender here");
this.setState({ date: this.props.navigation.state.params.date });
}
It seems that there are some side effects:
-now tab label font is different from all the others. Is it possible to keep default font and colors?
-If i tap the bar text it successfully fires componentWillReceiveProps but if I tap tab icon it fires tabBarOnPress (static).
All the screens are mounted at the beginning, when you load the TabNavigator (I think there was a lazy option, but is deprecated now). And yes, they keep mounted with the TabNavigator. So it will be listening to the events while the TabNavigator is on the screen.