React Native Navigation invoke all screens componentDidMount/componentWillMount when navigated to Home after login

Question

Explanation: I logged in and Navigate to Home, I found it invoke that componentDidMount and componentWillMount of both the screens i.e. Home and Error-Management. Am I doing something wrong, I guess it's an error because of Tabs. but couldn't resolve. Please help me in resolving it.

import React, { Component } from 'react'; import {createStackNavigator, createDrawerNavigator, createMaterialTopTabNavigator} from 'react-navigation'; import { DrawerActions } from 'react-navigation'; import {View,Text,StyleSheet,Platform,TouchableOpacity,Image,StatusBar} from 'react-native';

    import Login from '../Login';
    import Home from '../Profile';
    import ErrorManagement from '../screen/error-management/ErrorManagement'
    import DrawerScreen from '../DrawerScreen';


    const Tabs = createMaterialTopTabNavigator({
        Home: Home,
        'Error Management':ErrorManagement
    },{
        tabBarOptions: {
            scrollEnabled: true,
            lazyLoad: true,
            activeTintColor: '#000',
            inactiveTintColor: 'gray',
            style: {
                backgroundColor: '#fff',
            },
            tabStyle: {
                 width: 210
            },
            indicatorStyle: {
                backgroundColor: '#000',
            },
        }
    });

    const DrawerNavigator = createDrawerNavigator({
        Home:{
            screen: Tabs
        }
    },{
        initialRouteName: 'Home',
        contentComponent: DrawerScreen,
        drawerWidth: 300
    });

    const MenuImage = ({navigation}) => {
        if(!navigation.state.isDrawerOpen){
            return <Image source={require('../images/menu-button.png')}/>
        }else{
            return <Image source={require('../images/left-arrow.png')}/>
        }
    }


    const Routes = createStackNavigator ({
        Login : {
            screen : Login,
            navigationOptions: ({ navigation }) => ({
                header: null
            }),
        },
        Home : {screen : DrawerNavigator,
                navigationOptions: ({ navigation }) => ({
                    title: 'Middle-Office',  // Title to appear in status bar
                    headerLeft: 
                    <TouchableOpacity  onPress={() => {navigation.dispatch(DrawerActions.toggleDrawer())} }>
                        <MenuImage style="styles.bar" navigation={navigation}/>
                    </TouchableOpacity>,
                    headerStyle: {
                        backgroundColor: '#87ceeb',
                    },
                    headerTintColor: '#fff',
                    headerTitleStyle: {
                      fontWeight: 'bold',
                    },

                }),
            },
        },
        {
            initialRouteName: 'Login'
        }
    );



    export default Routes;

Inus Saha Inus Saha · Accepted Answer · 2018-06-22T06:14:49

There is a TabNavigatorConfig option lazy accepted by createTabNavigator which can be used to mount and render the tabs only when user is on that tab. but there is no such option for createMaterialTopTabNavigator.

but you can use withNavigationFocus from react-navigation to see if your screen has focus then you do your required task.

https://reactnavigation.org/docs/en/with-navigation-focus.html

but it'll still Mount your all screen at once.

i have created an HOC on the following link:

https://snack.expo.io/HkjVzm5-m

you can see it uses withNavigationFocus and mounts the screen only when the screen is focused. but there is a slight problem, it is remounting the screen each time the screen gets focused.

but you can get an idea of how it can be done with little more effort to suit your use case.

React Native Navigation invoke all screens componentDidMount/componentWillMount when navigated to Home after login

2 Answers