Quantcast
Channel: Active questions tagged react-native+android - Stack Overflow
Viewing all articles
Browse latest Browse all 29434

react-native with createSwitchNavigator and createMaterialTopTabNavigator memory leak

$
0
0

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

Viewing all articles
Browse latest Browse all 29434

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>