Error: Element type is invalid React Native

Question

When I launch my app on android I get that error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Here is my Navigation.js

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

import Home from '../screens/Home'
import AddCollege from '../screens/AddCollege'
import ViewCollege from '../screens/ViewCollege'
import ViewSchool from '../screens/ViewSchool'
import AddSchool from '../screens/AddSchool'
import Profile from '../screens/Profile'
import Dashboard from '../screens/Dashboard'
import Settings from '../screens/Settings'
import ManageProfile from '../screens/ManageProfile'

import { Ionicons } from "react-native-vector-icons";

const HEIGHT = Dimensions.get('window').height
const WIDTH = Dimensions.get('window').width

const HomeStack = createStackNavigator(
    {
      Home: Home,
      AddCollege: AddCollege,
      ViewCollege: ViewCollege,
      ViewSchool: ViewSchool,
      AddSchool: AddSchool,
      ManageProfile: ManageProfile
    },
    {
      defaultNavigationOptions: {
         headerStyle: {
          backgroundColor: 'black',
          height: HEIGHT / 9
        },
        headerTintColor: '#fff',
      },
    }
    );

    const ProfileStack = createStackNavigator(
      {
        Profile: Profile,
       
      },
      {
        defaultNavigationOptions: {
          headerTitleStyle: {
            textAlign: 'center',
          },
           headerStyle: {
            backgroundColor: 'black',
            height: HEIGHT / 9
            //marginTop: 24 ,
          },
          
          headerTintColor: '#fff',
          title: 'Profile', 
         
        },
      }
    );

    const DashboardStack = createStackNavigator(
      {
        Dashboard: Dashboard,   
      },
      {
        defaultNavigationOptions: {
          title: 'Dashboard',
          headerStyle: {
            backgroundColor: 'black',
            height: HEIGHT / 9
          },
          headerTintColor: '#fff',
         
        },
      }
    );

    const SettingsStack = createStackNavigator(
      {
        Settings: Settings,
      },
      {
        defaultNavigationOptions: {
        title: 'Settings ',
          headerStyle: {
            backgroundColor: 'black',
            height:HEIGHT / 9
          },
          headerTitleStyle: {
                color: '#fff',
            },    
        },
      },
    );


const MainApp = createBottomTabNavigator({
    Home: {
      screen: HomeStack ,
      navigationOptions: {
            tabBarLabel: 'Home', 
            tabBarIcon: ({ tintColor }) => (
                <Ionicons name="md-home" color={tintColor} size={30} />
            )
          }
        }, 
    Profile: {
      screen: ProfileStack,
      navigationOptions: {
            tabBarLabel: 'Profile', 
            tabBarIcon: ({ tintColor }) => (
                <Ionicons name="md-user" color={tintColor} size={30} />
            )
          }
        }, 
    Dashboard: { 
      screen: DashboardStack,
       navigationOptions: {
            tabBarLabel: 'Dashboard', 
            tabBarIcon: ({ tintColor }) => (
                <Ionicons name="md-clipboard" color={tintColor} size={30} />
            )
          }
        } ,
    Settings: {
      screen : SettingsStack ,
       navigationOptions: {
            tabBarLabel: 'Settings', 
            tabBarIcon: ({ tintColor }) => (
                <Ionicons name="md-settings" color={tintColor} size={30} />
            )
        }
      }
  },
  {
    tabBarOptions: {
      labelStyle: {
     fontSize: 12,
     padding: 0,
      margin: 0
  },
        activeTintColor: 'red', 
        inactiveTintColor: 'white',
        style:{height: HEIGHT / 10,  backgroundColor: 'black' },
        showIcon: true,
        padding: 0,
        margin: 0
    }
  });

  export default createAppContainer(MainApp);

Answer 1

It's because of the wrong import from react-native-vector-icons You should do it in this way

import Ionicons from "react-native-vector-icons/Ionicons";

or for other fonts

import FontAwesome from 'react-native-vector-icons/FontAwesome';
import FontAwesome5 from 'react-native-vector-icons/FontAwesome5';

Also check your other components (like your screens) that are exported as default!