title: react-native with createSwitchNavigator and createMaterialTopTabNavigator memory leak
body: <h3>Current behaviour</h3>
  
  <p>After click login and logout couple of times and waiting on login page there is a memory leak error. This happens switching from createMaterialTopTabNavigator to a createSwitchNavigator page.</p>
  
  <p>With this <a href="https://github.com/eduqg/createMaterialTopTabNavigatorReproducedError" rel="nofollow noreferrer">project</a> the error can be reproduced.</p>
  
  <pre><code>Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method.
      in TabBar (at MaterialTopTabBar.tsx:92)
      in TabBarTop (at createMaterialTopTabNavigator.tsx:84)
      in Pager (at TabView.tsx:70)
      in RCTView (at TabView.tsx:128)
      in TabView (at createMaterialTopTabNavigator.tsx:136)
      in MaterialTabView (at createTabNavigator.tsx:228)
      in NavigationView (at createNavigator.js:80)
      in Navigator (at SceneView.js:9)
  </code></pre>
  
  <h3>Expected behaviour</h3>
  
  
  
  <p>Is expected no memory leaks after navigating between switchNavigator and materialTopTabNavigator pages.</p>
  
  <h3>Code sample</h3>
  
  
  
  <p>SignIn</p>
  
  <pre><code>import React from 'react';
  import { Text, View, Button } from 'react-native';
  
  // import { Container } from './styles';
  
  export default function Dashboard({ navigation }) {
    return (
      &lt;View style={{ flex: 1, justifyContent: 'center' }}&gt;
        &lt;Text&gt;SignIn&lt;/Text&gt;
        &lt;Button title="Login" onPress={() =&gt; navigation.navigate('Dashboard')} /&gt;
      &lt;/View&gt;
    );
  }
  
  </code></pre>
  
  <p>Dashboard.js</p>
  
  <pre><code>import React from 'react';
  import { Text, View, Button } from 'react-native';
  
  // import { Container } from './styles';
  
  export default function Dashboard({ navigation }) {
    return (
      &lt;View style={{ flex: 1, justifyContent: 'center' }}&gt;
        &lt;Text&gt;SignIn&lt;/Text&gt;
  
        &lt;Button
          title="Logout"
          onPress={() =&gt; navigation.navigate('SignIn')}
          color="red"
        /&gt;
      &lt;/View&gt;
    );
  }
  
  </code></pre>
  
  <p>routes.js</p>
  
  <pre><code>import { createAppContainer, createSwitchNavigator } from 'react-navigation';
  import { createMaterialTopTabNavigator } from 'react-navigation-tabs';
  
  import SignIn from './pages/SignIn';
  import Dashboard from './pages/Dashboard';
  import Classroom from './pages/Classroom';
  import Student from './pages/Student';
  
  const styleTab = {
    activeTintColor: 'blue',
    labelStyle: {
      fontSize: 20,
    },
    showIcon: false,
    inactiveTintColor: '#DDD',
    style: { elevation: 0 },
    tabStyle: {
      height: 80,
      backgroundColor: '#fff',
    },
    scrollEnabled: true,
    swipeEnabled: true,
    upperCaseLabel: false,
  };
  
  const Routes = createAppContainer(
    createSwitchNavigator(
      {
        SignIn,
        App: createMaterialTopTabNavigator({
          Dashboard: {
            screen: Dashboard,
            navigationOptions: {
              tabBarVisible: true,
              tabBarLabel: 'Dashboard',
              tabBarOptions: styleTab,
            },
          },
          Classroom: {
            screen: Classroom,
            navigationOptions: {
              tabBarVisible: true,
              tabBarLabel: 'Classroom',
              tabBarOptions: styleTab,
            },
          },
          Student: {
            screen: Student,
            navigationOptions: {
              tabBarVisible: true,
              tabBarLabel: 'Student',
              tabBarOptions: styleTab,
            },
          },
        }),
      },
      {
        initialRouteName: 'SignIn',
      },
    ),
  );
  
  export default Routes;
  
  
  </code></pre>
  
  <h3>Screenshots (if applicable)</h3>
  
  
  
  <p><a href="https://i.stack.imgur.com/LN4vr.jpg" rel="nofollow noreferrer">Login page after error</a></p>
  
  <h3>What have you tried</h3>
  
  
  
  <p>I have tried some solutions creating a <a href="https://reactnavigation.org/docs/en/navigating-without-navigation-prop.html" rel="nofollow noreferrer">NavigationService</a> and with <a href="https://reactnavigation.org/docs/en/with-navigation-focus.html" rel="nofollow noreferrer">with navigation focus</a> without success. I may be missing something, in this situations perhaps a simple thing.</p>
  
  <h3>Your Environment</h3>
  
  <ul>
  <li>Android 8.0</li>
  <li>Ubuntu 18.04 LTS</li>
  <li>react-navigation "^4.0.10",</li>
  <li>react-navigation-tabs "^2.6.2"</li>
  <li>node v10.15.3</li>
  <li>yarn 1.21.1</li>
  </ul>