title: React Navigation Tabbar detect tab bar press and re-rendering screen
body: <p>I am in need of a couple solutions to problems I am having with react navigation. I will start off by listing what I want to get done and if it is possible with react navigation:</p>
  
  <p>currently, I have 2 tabs on my app screen. One tab displays weather information to the user, and the second tab controls what the user wants to see in his/her weather forecast in the first tab. So the second tab is essentially a settings screen while the first screen is where the GUI takes place. Now, In my second tab, once the user changes his/her options, I want to make sure they saved their preferences by clicking a button I have on the screen. Now, here is where my issue with react navigation comes into place, I want the second tab to work in such a way that when the user clicks back on the first tab, an Alert will pop up asking them, "Are you sure you want to leave this page without saving? Yes/no" If they click no, I want them to stay in this tab, if they click yes, I want them to go back to the first tab.</p>
  
  <p>The second issue I have is when a user goes into his/her 2nd tab to edit the settings for weather, saves their changes, and returns back to the first tab, the first tab still displays their old information because it did not rerender. How can I have the first tab rerender when coming back from the 2nd tab. Example: Tom first loads his weather when humidity% is turned off, he then goes to the 2nd tab, turns on humidity and saves his changes, but when he goes back to the first tab, the humidity% doesn't show because the component never re-rendered.</p>
  
  <p>Here is my code:</p>
  
  <pre><code>export const Tabs = TabNavigator({
    WeatherDisplay: {
      screen: WeatherDisplay,
      navigationOptions: {
        header: null,
        tabBarLabel: 'Weather',
        tabBarIcon: ({ tintColor }) =&gt; 
      },
    },
  
    WeatherOptions: {
      screen: WeatherOptions,
      navigationOptions: {
        header: null,
        tabBarLabel: 'Weather Options',
        tabBarIcon: ({ tintColor }) =&gt; 
      },
    },
  }, {
      animationEnabled: true,
      swipeEnabled: false,
      gesturesEnabled: false,
      tabBarOptions: {
        inactiveTintColor: 'gray',
        showIcon: true,
        activeTintColor: '#D088EB',
        showLabel: false,
        indicatorStyle: {
          borderBottomColor: '#D088EB',
          borderBottomWidth: 2,
        },
        style: {
          backgroundColor: '#F8F8F8',
        },
        onTabPress: (tab) =&gt; {
          if (tab.index == 0) {
            Alert.alert("Save", "Dont forget to save your weather!");
          }
        }
      },
    }
  );
  </code></pre>
  
  <p>Thus far, I have done extensive research and reading online and have been banging my head against the react-navigation doc's but I can't seem to find a function related to onTabPress. In my code above, the onTabPress works only and android and not on iOS, meaning the onTabPress() function gets called when a user changes tabs, but this still doesn't address my problem because I only want the tab to change if a user clicks 'yes' when an alert popups. Currently, the code just sends an Alert but still automatically changes the screen, and it only works on android.</p>
  
  <p>As far as my 2nd issue goes, the re-rendering an entire screen when I change tabs, I do not know how I would go about this.</p>
  
  <p>I appreciate any help! thank you for reading this!</p>