react-native with createSwitchNavigator and createMaterialTopTabNavigator memory leak

Question

Current behaviour

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.

With this project the error can be reproduced.

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)

Expected behaviour

Is expected no memory leaks after navigating between switchNavigator and materialTopTabNavigator pages.

Code sample

SignIn

import React from 'react';
import { Text, View, Button } from 'react-native';

// import { Container } from './styles';

export default function Dashboard({ navigation }) {
  return (
    <View style={{ flex: 1, justifyContent: 'center' }}>
      <Text>SignIn</Text>
      <Button title="Login" onPress={() => navigation.navigate('Dashboard')} />
    </View>
  );
}

Dashboard.js

import React from 'react';
import { Text, View, Button } from 'react-native';

// import { Container } from './styles';

export default function Dashboard({ navigation }) {
  return (
    <View style={{ flex: 1, justifyContent: 'center' }}>
      <Text>SignIn</Text>

      <Button
        title="Logout"
        onPress={() => navigation.navigate('SignIn')}
        color="red"
      />
    </View>
  );
}

routes.js

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;

Screenshots (if applicable)

Login page after error

What have you tried

I have tried some solutions creating a NavigationService and with with navigation focus without success. I may be missing something, in this situations perhaps a simple thing.

Your Environment

• Android 8.0
• Ubuntu 18.04 LTS
• react-navigation "^4.0.10",
• react-navigation-tabs "^2.6.2"
• node v10.15.3
• yarn 1.21.1

Answer 1

Try adding "lazy" attribute to the Tab Navigator, this would defer the navigator from rendering the Screen until the users clicks on it. This would fix the memory leak error as well.