CODEWITHSUNDEEP
javascriptreact-nativereact-navigation
brahimi ahmed farouk
brahimi ahmed farouk

Reputation: 75

react-native-navigation V3 crashing the app

hello i'm trying to implement navigation into my react native app, the app doesn't start, and when it does it displays this error .... (0 , _reactNavigation.StackNavigator) is not a function ... !! the code below is mostely copy pasted from this blog https://appdividend.com/2018/03/20/react-native-navigation-example-tutorial/#Create_two_screens_for_our_projecte . i know that due to updates in V3 of react-navigation, you have to wrap StackNavigator in a createAppContainer function before exporting it, so what else am i doing wrong here !!

//the app.js code 

import React, {Component} from 'react';

import {Platform, StyleSheet, Text, View} from 'react-native';
import {StackNavigator, createAppContainer} from 'react-navigation';
import Settings from './firstScreen';
import Home from './secondScreen';
import AppNavigator from './navigationControl';



export default class App extends Component {
  render() {
    return (<AppNavigator/>);
  }
}

//the navigationControls.js code
import React, {Component} from 'react';

import {Platform, StyleSheet, Text, View} from 'react-native';
import {StackNavigator, createAppContainer} from 'react-navigation';
import Settings from './firstScreen';
import Home from './secondScreen';

const AppNavigator = StackNavigator({
  SettingScreen: {
    screen: Settings
  },
  HomeScreen: {
    screen: Home
  }
});

export default createAppContainer(AppNavigator);

//the firstScreen.js code
import React, {Component} from 'react';
import {View, Text, Button} from 'react-native';

export class Settings extends Component {
  render() {
    return (
      <View>
        <Text>This is the Settings screen</Text>

      </View>
    )
  }
};

export default Settings;

//the scondScreen.js code

import React, { Component } from 'react';
import { View, Text } from 'react-native';

export class Home extends Component {
  render() {
    return (
      <View>
        <Text>This is the home screen</Text>

      </View>
    )
  }
}

export default Home;

//package.json file 
{
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web",
    "eject": "expo eject"
  },
  "dependencies": {
    "expo": "^34.0.1",
    "react": "16.8.3",
    "react-dom": "^16.8.6",
    "react-native": "https://github.com/expo/react-native/archive/sdk-34.0.0.tar.gz",
    "react-native-gesture-handler": "~1.3.0",
    "react-native-reanimated": "~1.1.0",
    "react-native-web": "^0.11.4",
    "react-navigation": "^3.12.1"
  },
  "devDependencies": {
    "babel-preset-expo": "^6.0.0"
  },
  "private": true
}

Upvotes: 1

Views: 1068

Answers (2)

Vishal Dhanotiya
Vishal Dhanotiya

Reputation: 2638

Change StackNavigator to createStackNavigator

Replace this

import {StackNavigator, createAppContainer} from 'react-navigation

To this

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

Use something like this

 import {createStackNavigator, createAppContainer} from 'react-navigation'; const MainNavigator = createStackNavigator({ 
Home: {screen: HomeScreen}, 
Profile: {screen: ProfileScreen}, }); 
const App = createAppContainer(MainNavigator); 
export default App;

Remove export in front of Home and Setting class because you already added export default at the bottom of the class

Upvotes: 3

B. Mohammad
B. Mohammad

Reputation: 2464

have you done npm install

npm install

you need that if you have taken an existing project.

Upvotes: 0

Related Questions