React Native - Undefined is not a function issue with StackNavigator

Question

I am pretty new to React Native. When I load the simulator in iOS or in Android, I get the following error:

undefined is not a function (near '...(0, _reactNavigation.StackNavigator)...')
<unknown>
    home-stack-navigator.js:7:2
loadModuleImplementation
    require.js:292:12
<unknown>
    App.js:4
loadModuleImplementation
    require.js:292:12
<unknown>
    AppEntry.js:2
loadModuleImplementation
    require.js:292:12
guardedLoadModule
    require.js:179:45
global code

I know that this error has been answered and tried following the solutions here, here and here but no success so far.

Here is home-stack-navigator.js:

import React from 'react';
import { StackNavigator } from 'react-navigation';
import HomeScreen from '../../components/screens/home-screen';
import ShowDetailsScreen from '../../components/screens/show-details-screen';

const HomeStackNavigator = StackNavigator(
  {
    Main: { screen: HomeScreen },
    ShowDetails: { screen: ShowDetailsScreen },
  },
  {
    initialRouteName: 'Main',
    headerMode: 'none',
  },
);

export default HomeStackNavigator;

And App.js:

import React from 'react';
import { StatusBar } from 'react-native';
import { DrawerNavigator, DrawerItems } from 'react-navigation';
import HomeStackNavigator from './src/components/navigation/home-stack-navigator';
import { COLORS } from './src/constants/styles';
import styled from 'styled-components/native';

const DrawerContainer = styled.View`
  flex: 1;
  background-color: ${COLORS.GREY.BRIGHT_GREY};
`;

const AppContainer = styled.View`
  flex: 1;
  background-color: ${COLORS.GREY.BLACK_RUSSIAN};
`;

const drawerRouteConfig = {
  Home: {
    screen: HomeStackNavigator,
  },
};

const CustomDrawerContentComponent = props => (
  <DrawerContainer>
    <DrawerItems {...props} />
  </DrawerContainer>
);

const drawerNavigatorConfig = {
  contentComponent: props => <CustomDrawerContentComponent {...props} />,
};

const AppDrawer = DrawerNavigator(drawerRouteConfig, drawerNavigatorConfig);

export default class App extends React.Component {
  render() {
    return (
      <AppContainer>
        <StatusBar hidden={true} />
        <AppDrawer />
      </AppContainer>
    );
  }
}

I am also using expo as my builder. Any suggestion would be greatly appreciated.

New Error Log:

Invariant Violation: The navigation prop is missing for this navigator. In react-navigation 3 you must set up your app container directly. More info: https://reactnavigation.org/docs/en/app-containers.html

This error is located at:
    in Navigator (at App.js:41)
    in RCTView (at View.js:44)
    in StyledNativeComponent (created by ForwardRef)
    in App (at registerRootComponent.js:17)
    in RootErrorBoundary (at registerRootComponent.js:16)
    in ExpoRootComponent (at renderApplication.js:34)
    in RCTView (at View.js:44)
    in RCTView (at View.js:44)
    in AppContainer (at renderApplication.js:33)

Stack trace:
  node_modules/@react-navigation/core/dist/navigators/createNavigator.js:35:31 in getDerivedStateFromProps
  node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:7663:46 in applyDerivedStateFromProps
  node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:8270:6 in mountClassInstance
  node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:10480:8 in updateClassComponent
  node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:14091:21 in performUnitOfWork
  node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:14129:41 in workLoop
  node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:14226:15 in renderRoot
  node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:15193:17 in performWorkOnRoot
  node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:15090:24 in performWork
  node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:15047:14 in performSyncWork
  node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:14925:19 in requestWork
  node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:14711:16 in scheduleWork
  node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:15429:15 in scheduleRootUpdate
  node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:16142:20 in render
  node_modules/react-native/Libraries/ReactNative/renderApplication.js:59:52 in renderApplication
  node_modules/react-native/Libraries/ReactNative/AppRegistry.js:101:10 in run
  node_modules/react-native/Libraries/ReactNative/AppRegistry.js:195:26 in runApplication
  node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:349:47 in __callFunction
  node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:106:26 in <unknown>
  node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:297:10 in __guard
  node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:105:17 in callFunctionReturnFlushedQueue

UPDATE:

Error Log:

The component for route 'Home' must be a React component. For example:

import MyScreen from './MyScreen';

Home: MyScreen,

}

You can also use a navigator:

import MyNavigator from './MyNavigator';

Home: MyNavigator,

}

you should use createStackNavigator function rather than StackNavigator. https://reactnavigation.org/docs/en/hello-react-navigation.html — Mohammed Ashfaq, Dec 30 '18 at 04:49
@MohammedAshfaq Thanks for helping me clarify that. Now another error just popped out related to an invariant violation. Looks like is inside `App.js` within `AppContainer` at the end. Added the stack trace at the end of my question. By reading the documentation they offered, it says that they renamed createNavigationContainer to createAppContainer. — w_lpz, Dec 30 '18 at 05:19

Alwaysblue · Answer 1 · 2018-12-30T06:04:11.797

0

First import createAppContainer from react-navigation

import { DrawerNavigator, DrawerItems, createAppContainer } from 'react-navigation';

then wrap HomeStackNavigator in createAppContainer

export const NavBarNavigation = createAppContainer(HomeStackNavigator);

And then import it in your app.js

edited Dec 30 '18 at 06:04

answered Dec 30 '18 at 05:23

Alwaysblue

9,948
38
121
210

Thanks for the help. So you saying to change the last line in my `home-stack-navigator.js` (`export default HomeStackNavigator;`) to the one you mentioned? – w_lpz Dec 30 '18 at 05:28
Ok, so I changed it and it says that: `Can't find variable: createAppContainer`. I also replaced the `HomeStackNavigator` with `createAppContainer` inside `import HomeStackNavigator` and `drawerRouteConfig` in `App.js` and same result. – w_lpz Dec 30 '18 at 05:40
You need to `import { createAppContainer }` also from `react-navigation` – Alwaysblue Dec 30 '18 at 06:02
Forgot to add `import { createAppContainer } from 'react-navigation';` – w_lpz Dec 30 '18 at 06:03
Trying to look for the `Home` route, but can't find it. – w_lpz Dec 30 '18 at 06:16
this is wrong probably `const drawerRouteConfig = { Home: { screen: HomeStackNavigator, }, };` since `HomeStackNavigator` isn't a react component – Alwaysblue Dec 30 '18 at 06:17
Okay, Since I am also new to `react-native` so I can only help you with my experience. Generally I prefer creating a `screen.js` which will contain all my navigation logic https://github.com/irohitb/k-messaging/blob/master/app-client/screen.js and then import that to my `app.js` https://github.com/irohitb/k-messaging/blob/master/app-client/App.js – Alwaysblue Dec 30 '18 at 06:20
I previously changed the `HomeStackNavigator` on import and inside `drawerRouteConfig` to `createAppContainer` when I had the Can't find variable issue. – w_lpz Dec 30 '18 at 06:21
Try going through my github repo. It was some task for job opening so things won't be that complicated – Alwaysblue Dec 30 '18 at 06:22
Ok, i'll check it out. Thanks! – w_lpz Dec 30 '18 at 06:25

React Native - Undefined is not a function issue with StackNavigator

1 Answers1