View config getter callback for component 'H' must be a function (received undefined)

Error is:

Invariant Violation: View config getter callback for component 'H' must be a function (received undefined)

I'm using react-native to make application and error happens when I clicked login button in MainLogin.js file. (It has to move to mainpage when clicking login button in login page)

I searched a lot but cannot know what is component 'H'.

attatched index.js (src/screens/index.js) and MainLogin.js (src/screens/MainLogin.js)

<index.js>

import React from 'react';
import {
    Text
} from 'react-native';
import { createAppContainer } from "react-navigation";
import { createStackNavigator } from "react-navigation-stack";
import { createBottomTabNavigator } from "react-navigation-tabs";

import LoginScreen from './MainLogin';
import HomeScreen from './MainPage';
import DiaryScreen from './Diarymemo';
import StatScreen from './MoodStatistics';
import CommuScreen from './Community';
import StoreScreen from './Store';

const HomeStack = createStackNavigator(
    {
        HomeScreen
    },
    { defaultNavigationOptions : ({navigation}) => ({ 
        title: 'Home'}),
    }
    
);

const DiaryStack = createStackNavigator(
    {
        DiaryScreen
    },
    { defaultNavigationOptions : ({navigation}) => ({ 
        title: 'Diary'}),
    }
    
);

const StatStack = createStackNavigator(
    {
        StatScreen
    },
    { defaultNavigationOptions : ({navigation}) => ({ 
        title: 'Stat'}),
    }
    
);

const CommunityStack = createStackNavigator(
    {
        CommuScreen
    },
    { defaultNavigationOptions : ({navigation}) => ({ 
        title: 'Network'}),
    }
    
);

const StoreStack = createStackNavigator(
    {
        StoreScreen
    },
    { defaultNavigationOptions : ({navigation}) => ({ 
        title: 'Store'}),
    }
    
);

const TabNavigator = createBottomTabNavigator(
    InitialRouteName = 'Home',
    {
        Diary: DiaryStack,
        Stat: StatStack,
        Home: HomeStack,
        Network: CommunityStack,
        Store: StoreStack,
        
    },
    {
        defaultNavigationOptions: ({navigation}) => ({
            tabBarIcon: ({focused, horizontal, tintColor}) => {
                const {routeName} = navigation.state;
                let icon = "▲";

                if(routeName === 'Diary'){
                    icon = "";
                } else if(routeName === 'Stat'){
                    icon = ""
                } else if(routeName === 'Home'){
                    icon = ""
                } else if(routeName === 'Network'){
                    icon = ""
                } else if(routeName === 'Store'){
                    icon = ""
                }

                // can use react-native-vector-icons
                // <Icon name={iconName} size={iconSize} color={iconColor} />
                return <Text style={{color: focused && "#46c3ad" || "#888"}}>{icon}</Text>
            }
        }),
        lazy: false,
        tabBarOptions: {
            activeTintColor: "#46c3ad",
            inactiveTintColor: "#888",
            
        },
    }
);

const AppStack = createStackNavigator(
    {
        LoginScreen: LoginScreen,
        TabNavigator: {
            screen: TabNavigator,
            navigationOptions: ({navigation}) => ({
                headerShown: false,
            }),
        },
    }
);

export default createAppContainer(AppStack);

<MainLogin.js>

import React, {Component} from 'react';
import {
    View,
    Text,
    TextInput,
    TouchableOpacity,
    StyleSheet
} from 'react-native';
import {widthPercentageToDP as wp, heightPercentageToDP as hp} from 'react-native-responsive-screen';

export default class LoginScreen extends Component{
    
    static navigationOptions = {
        headerShown: false,
    };

    _doLogin(){
        // do something
        this.props.navigation.replace('TabNavigator')
    }

    render(){
        return (
            <View style={styles.container}>
                <View style={styles.titleArea}>
                    <Text style={styles.title}>MoodiBuddy</Text>
                </View>
                <View style={styles.formArea}>
                    <TextInput 
                        style={styles.textForm} 
                        placeholder={"ID"}/>
                    <TextInput 
                        style={styles.textForm} 
                        placeholder={"Password"}/>
                </View>
                <View style={styles.buttonArea}>
                    <TouchableOpacity 
                        style={styles.button}
                        onPress={this._doLogin.bind(this)}>
                        <Text style={styles.buttonTitle}>Login</Text>
                    </TouchableOpacity>
                </View>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: 'white',
        paddingLeft: wp('10%'),
        paddingRight: wp('10%'),
        justifyContent: 'center',
    },
    titleArea: {
        width: '100%',
        padding: wp('10%'),
        alignItems: 'center',
    },
    title: {
        fontSize: wp('10%'),
    },
    formArea: {
        width: '100%',
        paddingBottom: wp('10%'),
    },
    textForm: {
        borderWidth: 0.5,
        borderColor: '#888',
        width: '100%',
        height: hp('5%'),
        paddingLeft: 5,
        paddingRight: 5,
        marginBottom: 5,
    },
    buttonArea: {
        width: '100%',
        height: hp('5%'),
    },
    button: {
        backgroundColor: "#46c3ad",
        width: "100%",
        height: "100%",
        justifyContent: 'center',
        alignItems: 'center',
    },
    buttonTitle: {
        color: 'white',
    },
})