How to add react-navigation module to reactive app?

0
votes

I've installed the react-navigation module inside the project's folder:

~/react-tutorial/react-native/Project1$ npm install --save react-navigation

npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules/fsevents):

npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})

  • [email protected] added 22 packages from 10 contributors and audited 103279 packages in 43.188s found 11 low severity vulnerabilities run npm audit fix to fix them, or npm audit for details

But when I try to include StackNavigator in the Component with import { StackNavigator } from 'react-navigation';

I've got the following error in the browser when debugging remotely

TypeError: bundle.modules is undefined

1
react-nativereact-navigation
Remove npm modules and then run npm install , and try again ! - Arvindh

1 Answers

1
votes

In the new react-native version there is change in react-navigation. StackNavigator has been replaced by createStackNavigator.

You have to also install react-native-gesture-handler along with react-navigation.(commands below)

 npm install --save react-native-gesture-handler // install

 react-native link react-native-gesture-handler  // link

I will help with some syntax below

old version below -

import { StackNavigator } from 'react-navigation';

    const PrimaryNav = StackNavigator({
      Splash: { screen: Splash },
      Login: { screen: Login },
     }, {
        // Default config for all screens
        headerMode: 'none',
        initialRouteName: 'Splash',
      });

New Version below - 

import { createAppContainer, createStackNavigator } from 'react-navigation';

const MainNavigator = createStackNavigator({
  Splash: { screen: Splash }
},
  {
    // Default config for all screens
    headerMode: 'none',
    initialRouteName: 'Splash'
  });

const PrimaryNav = createAppContainer(MainNavigator);