TabNavigator: detecting 'tabchanged' event

Expo SDK
10

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 });
  }