Search code examples
reactjsreact-nativereact-navigationreact-navigation-stack

TypeError: (0, _reactNavigation.default) is not a function. React Native


I am using React Navigation Version 4 and after setting my navigations and all screens and run the code I am facing the following issue:

TypeError: (0, _reactNavigation.default) is not a function.

My Routes.Js is -

import React from 'react';
import createAppContainer from 'react-navigation';
import { createStackNavigator, HeaderBackButton } from 'react-navigation-stack';
import { Drawer } from './Drawer';
import LoginScreen from '../screens/LoginScreen';
import InitialScreen from '../screens/InitialScreen';
import LogoutScreen from '../screens/LogoutScreen';

const RootStack = createStackNavigator(
    {
        Drawer: { 
            screen: Drawer
        },
        LoginScreen: {
            screen: LoginScreen
        },
        LogoutScreen: {
            screen: LogoutScreen
        }
        InitialScreen: {
            screen: InitialScreen
        }
    },
    {
        initialRouteName: 'InitialScreen',
        headerMode: "none"
    }
)

const App = createAppContainer(RootStack);

export default App;

and Index.js is -

import React, { Component } from 'react';
import { StyleSheet, AsyncStorage } from 'react-native';
import { Button, Text, Drawer } from 'native-base';
import App from './config/Routes';
import AppHeader from './components/Header/Header';

export default class Index extends Component {
    render() {
        const { globalContainer } = styles;
        return (
            <App 
                style={ globalContainer } 
                navigation={this.props.navigation}>
            </App>
        )
    }
}

Any help??


Solution

  • It appears from the documentation that it should be a named import, not a default.

    import { createAppContainer } from 'react-navigation';
    

    Please read the docs. It's also a good first place to look when debugging.