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