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'...

In Which line of the code that you posted do you get the error? — Yossi
– Yossi, Commented Sep 27, 2018 at 13:12
The error is very vague and doesn't tell me what line the issue is on. I've added a picture for clarity — bsoleimany
– bsoleimany, Commented Sep 27, 2018 at 13:15
Could you post your .babelrc file? I'm experiencing the same issue, and I believe it might have something to do with the "add-module-exports" babel plugin. — Peter Nagy
– Peter Nagy, Commented Sep 28, 2018 at 11:14

bsoleimany · Accepted Answer · 2018-09-28 23:37:49Z

2

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...

answered Sep 28, 2018 at 23:37

bsoleimany

1371 gold badge2 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ariel Salem · Accepted Answer · 2018-09-27 13:22:08Z

0

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

import { createStackNavigator } from 'react-navigation';

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

answered Sep 27, 2018 at 13:22

Ariel Salem

3573 silver badges12 bronze badges

12 Comments

bsoleimany Over a year ago

Can't believe I missed that but the issue is still pertaining even after adding the proper navigator.

Ariel Salem Over a year ago

@hpcsolo Is it still giving you the same error or is it flashing a different line error? Might be worth rebuilding it first and seeing if the error changes

bsoleimany Over a year ago

I believe it has something to do with the MapStack.js component because I commented out HomeViewTabs and the issue is still there

bsoleimany Over a year ago

it's the same exact error. Gonna try rebuilding it right now and let you know what happens!

Ariel Salem Over a year ago

@hpcsolo That's strange. Is your MapStack.js being wrapped in a HOC by any chance?

|

Collectives™ on Stack Overflow

React Native Navigation: Undefined is not a function

2 Answers 2

Comments

12 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

12 Comments

Your Answer

Sign up or log in

Post as a guest

Related