title: ComponentWillUnmount is not getting called React-Navigation
body: <p>I know this question already exists on Stack Overflow but most questions and answers are very old. I am working on an app that performs a fetch call to a db inside <strong>componentDidMount</strong> obviously using <strong>react-native</strong>.</p>
  <p>I have an <strong>interval</strong> running in <strong>componentDidMount</strong> that calls a query and it works well. Now I need to call <code>clearInterval(this.interval)</code> inside <strong>componentWillUnmount</strong> to stop the query and logging in my app.</p>
  <ol>
  <li><p>It should be called when I press a save button and navigate with <code>props.navigation.navigate(&quot;new Screen&quot;, {params})</code><br />
  I read a solution for this where I should use <code>props.navgiation.replace(&quot;Screen&quot;)</code> - but it doesn't work for me</p>
  </li>
  <li><p>The second important part is that <strong>componentWillUnmount</strong> also needs to be called when I press on another tab <strong>(using bottom-tab-navigator)</strong></p>
  </li>
  </ol>
  <p>I understand that the screens in a stack navigator for example never really unmount. So is there a different way to call <strong>componentWillUnmount</strong> maybe something like when the user left screen( or loses focus on-screen) or user left the specific routeName or something.</p>
  <p>My <strong>componentWillUnmount</strong> - really simple:</p>
  <pre><code>  componentWillUnmount(){
      clearInterval(this.interval)
      console.log(&quot;Component did Unmount&quot;)
    }
  </code></pre>
  <p>it's only called if I go to my LogOut Screen and log-out to be in my LoginScreen again.</p>
  <p>(EDIT) My Navigator:</p>
  <pre><code>const EintragenStack = createStackNavigator(
    {
      Eintragen: {
        screen: StundenEintragen2,
        navigationOptions: {
          headerTitle: &quot;Stundenverwaltung&quot;,
          headerTitleStyle:{
            color: &quot;white&quot;,
            alignSelf: &quot;center&quot;
          },
          headerStyle:{
            backgroundColor: &quot;#a51717&quot;
          },  
        }
      }
    }
  )
  
  const CheckStack = createStackNavigator(
    {
      Übersicht: StundenChecken,
      Monat: Monatsübersicht2, // Monatsübersicht
      Tag: TagesübersichtDiff, // Tagesübersicht
      Edit: {
        screen: StundenEdit,
        navigationOptions:{
          headerTitle: &quot;Stunden bearbeiten&quot;,
          headerTitleStyle: {
            color: &quot;white&quot;,
            alignSelf: &quot;center&quot;
          },
          headerStyle: {
            backgroundColor: &quot;#F39237&quot;
          }
        }
      }
    },
    {
      backBehavior: &quot;history&quot;
    }
  );
  const Tabs = createBottomTabNavigator(
    { 
      Eintragen: EintragenStack,     // StundenEintragen
      Checken: CheckStack,
      Logout: Logout
    },
    {
      backBehavior: &quot;history&quot;,
      tabBarOptions: {
        labelStyle: {
          fontSize: 12,
          color: &quot;black&quot;
        },
        activeTintColor: &quot;red&quot;,
        activeBackgroundColor: &quot;#ccc&quot;
      }
    }
  );
  const AppNavigator = createSwitchNavigator({
    Login: Auth, //SecondAuth,
    Tabs: Tabs,
  });
  
  EintragenStack.navigationOptions = {   
    tabBarIcon: () =&gt; {
      return &lt;Icon style={{marginTop: 5}} size={34} name=&quot;ios-add-circle-outline&quot; color=&quot;green&quot; /&gt;;
    }
    
  };
  CheckStack.navigationOptions = {
    tabBarIcon: () =&gt; {
      return &lt;Icon style={{marginTop: 5}} size={34} name=&quot;ios-calendar&quot; color=&quot;black&quot; /&gt;;
    }
  };
  Logout.navigationOptions = {
    tabBarIcon: () =&gt; {
      return &lt;Icon style={{marginTop: 5}} size={34} name=&quot;ios-power&quot; color=&quot;red&quot; /&gt;;
    }
  };
  
  const AppContainer = createAppContainer(AppNavigator);
  
  export default AppContainer;
  </code></pre>
  <hr />
  <p>I actually kind of fixed it for my needs but the problem still exists overall. I don't know if this is a good approach but for me I did it like this:</p>
  <ol>
  <li>I am calling <code>checkUnlockHandler</code> in <code>componentWillMount</code> every 30sec.</li>
  <li>When <code>checkUnlockHandler</code> gets to an if that tells it that it doesn't need running anymore I call <code>clearInterval(this.interval(&quot;here is my checkUnlockHandler&quot;))</code></li>
  <li>After that my interval in <code>componentDidMount</code> stops running which is good.</li>
  <li>Problems: Interval still runs in other screens, It feels weird to call a function inside <code>componentDidMount</code> wrapped in a interval and inside this function to tell when the interval should stop.</li>
  </ol>