CODEWITHSUNDEEP
reactjsreact-native
Gantsooj
Gantsooj

Reputation: 21

undefined is not a function '(0, _reactNavigation.StackNavigator)' is undefined)

When i use reactnative navigation that error show me ? how can i fix that error ? Please help me 

import {StackNavigator} from 'react-navigation'
    import * as firebase from 'firebase'
    import Home from './screens/home'
    import Login from './screens/login'

    firebase.initializeApp(firebaseConfig)

    const RouteConfigs = {
      Login: {screen:Login},
      Home: {screen:Home},
    }

    const StackNavigatorConfig = {
      headerMode:'none',
    }

    export default StackNavigator (RouteConfigs, StackNavigatorConfig)

Upvotes: 2

Views: 6415

Answers (3)

Pulasthi Aberathne
Pulasthi Aberathne

Reputation: 428

These given answers will not work in new versions of React Native. Try the following example for a better understanding.

App.js

import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

import HomeScreen from './src/component/stage_one';
import StageTwo from './src/component/stage_two';
import StageThree from './src/component/stage_03';



const Stack = createStackNavigator();

const MyStack = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen
          name="Home"
          component={HomeScreen}
          options={{ title: 'Home' }}
        />
        <Stack.Screen name="StageTwo" component={StageTwo} />
        <Stack.Screen name="StageThree" component={StageThree} />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

export default MyStack

stage_one.js Should look like this

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

const stage_one = ({navigation}) => {
    return (
        <View style={styles.container}>
               <Text>Hello Stage One</Text>
               <Button 
                onPress = { 
                    () => navigation.navigate('StageTwo')
                 }
                 title = "Got to Stage Two"
               />
               <Button 
                onPress = { 
                    () => navigation.navigate('StageThree')
                 }
                 title = "Got to Stage Three"
               />
           </View>
    )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

export default stage_one

stage_two.js should look like this

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

const stage_two = ({navigation}) => {
    return (
       <View style={styles.container}>
               <Text>Hello Stage Two</Text>
           </View> 
    )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

export default stage_two

stage_03.js should look like this

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

const stage_03 = ({navigation}) => {
    return (
           <View style={styles.container}>
               <Text>Hello Stage three</Text>
           </View>
        )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

export default stage_03

Try adapting this line of the code segment in this issue and it will resolve easily.

Check out React Native Documentation for more clarification.

Upvotes: 0

daivid111
daivid111

Reputation: 11

Possibly outdated: “Stack Navigator"
use "createStackNavigator" 

for example :


import React from "react";
import { View, Text } from "react-native";
import { createStackNavigator, createAppContainer } from "react-navigation";

class HomeScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
        <Text>Home Screen</Text>
      </View>
    );
  }
}

const AppNavigator = createStackNavigator({
  Home: {
    screen: HomeScreen
  }
});

export default createAppContainer(AppNavigator);

Upvotes: 1

EDISON J
EDISON J

Reputation: 344

Initial setup of React Navigation should be like.

    import { createStackNavigator } from 'react-navigation';

    import HomeScreen from '../pages/home';
    import SigninScreen from '../pages/signin';
    import SignupScreen from '../pages/signup';

    const AppNavigator = createStackNavigator(
      {
        Home: { screen: HomeScreen },
        Signin: { screen: SigninScreen },
        Signup: { screen: SignupScreen }
    },
      {
        initialRouteName: 'HomeScreen',
        headerMode: 'none'
      }    
    );
export default AppNavigator;

Upvotes: 1

Related Questions