React Native Navigation: Undefined is not a function

Question

I've recently ran into an issue with React Native Navigation that I cannot seem to solve.

I'm trying to organize my stacks by placing different stacks for different components in different files and then bringing them all together in the router.js file that I have created in config/router.js .

I keep getting this error undefined is not a function (near '...(0, _reactNativeNavigation.createStackManager)...')

My router.js looks like this

import { createBottomTabNavigator } from 'react-navigation';
import Icon from 'react-native-vector-icons/Ionicons';

import { MapStack } from '../components/MapStack';


export const HomeViewTabs = createBottomTabNavigator({
    Map: {
        screen: MapStack,
        navigationOptions: {
            tabBarIcon:  ({tintColor}) => (
                <Icon name="ios-navigate" size={24} color={tintColor}/>
            )
        }},
    }, {
    initialRouteName: 'Map',
});

and my imported MapStack.js

import { createStackNavigator } from 'react-native-navigation';

import Map from '../screens/Map';
import BoxOverview from '../screens/BoxOverview';


export const MapStack = createStackNavigator({
    Map: { screen: Map },
    BoxOverview: { screen: BoxOverview},
});

My index.js

import React, { Component } from 'react';
import { HomeViewTabs } from './config/router';


class App extends Component {
    render() {
        return <HomeViewTabs />;
    }
}

export default App;

Any help would be appreciated and any tips on my styling is also appreciated!

Edit:

Added photo of error for clarity

File Structure

app/
+--components/
+----MapStack.js
+--config/
+----router.js
+--screens/
+----Box.js
+----BoxOverview.js

Solution:

I was importing the wrong React Navigation module in my MapStack.js file. It was supposed to be import { createStackNavigation } from 'react-navigation' and I had the module set as 'react-native-navigation' ...

Answer 1

In MapStack.js change this

import { createStackNavigator } from 'react-native-navigation';

To this

import { createStackNavigator } from 'react-navigation';

Found this solution after my friend pointed out that my imported module name was incorrect...

Answer 2

Looks like you're not importing the proper navigator in your router:

import { createStackNavigator } from 'react-navigation';

should be: import { createBottomTabNavigator } from 'react-navigation';