We Keep Coding

Object(...) is not a function in React Natiive

I try to make a change of views, I'm relying on a video that I've seen on YouTube and when I implement it in my project for some reason it doesn't work. What I want to do is a change of sight, but trying gives me a strange error: "TypeError: Object(...) is not a function" and I don't know how to fix the problem
App.js
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import AppContainer from './routes'
const App = () => {
return (
<AppContainer/>
);
}
export default App;
routes.js
import { createAppContainer } from 'react-navigation'
import { createStackNavigation } from 'react-navigation-stack'
import LoginScreen from './components/LoginScreen'
import DashboardScreen from './components/dashboardScreen'
import AuthLoadingScreen from './components/authLoadingScreen'
const BeforeSignin = createStackNavigation({
Login: {
screen: LoginScreen
},
}, {
headerMode: "none",
initialRouteName: "Login"
})
const AfeterSignin = createStackNavigation({
Dashboard: {
screen: DashboardScreen
},
}, {
headerMode: "none",
initialRouteName: "Dashboard"
})
const AppNavigator = createStackNavigation({
Auth: BeforeSignin,
App: AfeterSignin,
AuthLoadingScreen: AuthLoadingScreen
}, {
eaderMode: "none",
initialRouteName: "Auth"
})
export default createAppContainer(AppNavigator);
error

Got this error in app.js trying to run this code again but getting the same error help me guys

import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
import HomeScreen from "./src/screens/HomeScreen";
import ComponentsScreen "./src/screens/ComponentsScreen";
const navigator = createStackNavigator(
{
Home: HomeScreen,
Components: ComponentsScreen,
},
{
initialRouteName: 'Components',
defaultNavigationOptions: {
title: 'App'
}
}
);
export default createAppContainer(Navigator);
Got this error when i try to run the code in mobile using expo
got this error in app.js file when running in mobile help me

You're missing the from on the fourth line.
Change:
import ComponentsScreen "./src/screens/ComponentsScreen";
To:
import ComponentsScreen from "./src/screens/ComponentsScreen";

Am I receiving a false error where the solution is terminal based or am I missing something?

The error is saying that it cannot find './Menu/SettingScreen' from './Menu/DrawerNavigation' saying it doesn't exist. But I have removed the SettingScreen file from App.js and DrawerNavigation but I'm still getting the exact error
In short, I tried removing the file but the error stays the same. Can someone please help? Below I will show the DrawerNavigation code without the presence of the SettingScreen file
import React from 'react';
import { Platform, Dimensions} from 'react-native';
import { createDrawerNavigator, createAppContainer} from 'react-navigation';
import Map from './Menu/Map'
const WIDTH = Dimensions.get('window').width;
const DrawerConfig = {
drawerWidth: WIDTH*0.83,
};
const menuDrawerNavigator= createDrawerNavigator ({
Home:{ screen: Map
},
},
DrawerConfig
);
export default createAppContainer(DrawerNavigator);

Uncaught Error: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function but got: undefined

I am creating a DrawerNavigation with react-navigation . Everything was working fine in a single file until I decided to split it into smaller modules .
The structure is basic Drawer Navigator which contains a couple of Stack Navigators inside.
DrawerNavigators.js
StackNavigators
|__HomeNavigator.js
|__MenuNavigator.js
I spent hours trying to investigate the issue, and at first the error seemed to be related to modules not properly being imported but now I reckon my imports are kind of right but I still get the error as soon as I try to navigate to a particular screen .
Here is my code sample :
DrawerNavigator.js
import React, { Component } from 'react';
import { View, Platform, Image, StyleSheet, ScrollView, Text } from 'react-native';
import { Icon } from 'react-native-elements';
import HomeNavigator from './StackNavigators/HomeNavigator';
import {
createStackNavigator,
createAppContainer,
createDrawerNavigator,
} from 'react-navigation';
const MainNavigator = createDrawerNavigator({
Acceuil: {
screen: HomeNavigator,
navigationOptions: {
title: 'Acceuil',
drawerLabel: 'Acceuil',
drawerIcon: ({ tintColor }) => (
<Icon
name='home'
type='font-awesome'
size={24}
color={tintColor}
/>
)
}
},
});
export default createAppContainer(MainNavigator);
HomeNavigator.js
import {Icon} from 'react-native-elements';
import HomeScreen from '../../HomeComponent';
import { createStackNavigator, createAppContainer } from 'react-navigation';
import React, { Component } from 'react';
const HomeNavigator = createStackNavigator({
Home: { screen: HomeScreen }
},
{
navigationOptions: {
headerStyle: {
backgroundColor: "#512DA8"
},
headerTintColor: '#fff',
headerTitleStyle: {
color: "#fff"
},
}
}
);
export default HomeNavigator;
A screenshot to the error can be find below . Any Help would be very appreciated .

React Native Navigation: Undefined is not a function

I've recently ran into an issue with React Native Navigation that I cannot seem to solve.
I'm trying to organize my stacks by placing different stacks for different components in different files and then bringing them all together in the router.js file that I have created in config/router.js.
I keep getting this error
undefined is not a function (near '...(0, _reactNativeNavigation.createStackManager)...')
My router.js looks like this
import { createBottomTabNavigator } from 'react-navigation';
import Icon from 'react-native-vector-icons/Ionicons';
import { MapStack } from '../components/MapStack';
export const HomeViewTabs = createBottomTabNavigator({
Map: {
screen: MapStack,
navigationOptions: {
tabBarIcon: ({tintColor}) => (
<Icon name="ios-navigate" size={24} color={tintColor}/>
)
}},
}, {
initialRouteName: 'Map',
});
and my imported MapStack.js
import { createStackNavigator } from 'react-native-navigation';
import Map from '../screens/Map';
import BoxOverview from '../screens/BoxOverview';
export const MapStack = createStackNavigator({
Map: { screen: Map },
BoxOverview: { screen: BoxOverview},
});
My index.js
import React, { Component } from 'react';
import { HomeViewTabs } from './config/router';
class App extends Component {
render() {
return <HomeViewTabs />;
}
}
export default App;
Any help would be appreciated and any tips on my styling is also appreciated!
Edit:
Added photo of error for clarity
File Structure
app/
+--components/
+----MapStack.js
+--config/
+----router.js
+--screens/
+----Box.js
+----BoxOverview.js
Solution:
I was importing the wrong React Navigation module in my MapStack.js file. It was supposed to be import { createStackNavigation } from 'react-navigation' and I had the module set as 'react-native-navigation'...

In MapStack.js change this
import { createStackNavigator } from 'react-native-navigation';
To this
import { createStackNavigator } from 'react-navigation';
Found this solution after my friend pointed out that my imported module name was incorrect...

Looks like you're not importing the proper navigator in your router:
import { createStackNavigator } from 'react-navigation';
should be: import { createBottomTabNavigator } from 'react-navigation';