We Keep Coding

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";

Element type is invalid React Native

I have been having this error for hours and I don't know how to fix it, it's driving me crazy. In this shortcode here, I keep getting this error:
Element type is invalid: expected a string (for built-in components)
or a class/function (for composite components) but got: undefined. You
likely forgot to export your component from the file it's defined in,
or you might have mixed up default and named imports.
import * as Font from 'expo-font';
import React, {Component} from "react";
import { ActivityIndicator } from 'react-native'
import {Application} from "./src/Application.js";
class App extends Component {
constructor() {
super();
this.state = {
isReady: false,
};
}
componentWillMount = async() => {
await Font.loadAsync({
Roboto: require('./node_modules/native-base/Fonts/Roboto.ttf'),
Roboto_medium: require('./node_modules/native-base/Fonts/Roboto_medium.ttf')
});
this.setState({isReady: true,});
};
render() {
if (!this.state.isReady) {
return <ActivityIndicator />
}
return (
<Application/>
);
}
}
export default App;
The error pointed to _callee$ in 18:16, which is this line
this.setState({isReady: true,});
What could be causing this and a possible solution?
I tried importing import {Application} from "./src/Application.js" without {} before, but it also returned the error of
Check the render method of _default
Edited: Added "Application.js"
import React from 'react';
import Root from "native-base";
import { createAppContainer } from '#react-navigation/native';
import { createStackNavigator } from 'react-navigation-stack';
import { createDrawerNavigator } from 'react-navigation-drawer';
import Home from "./screens/home/index";
import Email from "./screens/email/index";
import ProfileScreen from "./screens/ProfileScreen";
import SideBar from "./screens/SideBar/SideBar";
const Drawer = createDrawerNavigator(
{
Home: { screen: Home},
//Email: { screen: Email},
ProfileScreen: { screen: ProfileScreen}
},
{
initialRouteName: "Home",
contentOptions: {
activeTintColor: "#e91e63"
},
contentComponent: props => <SideBar {...props}/>
}
);
const AppNavigator = createStackNavigator (
{
Drawer: {screen: Drawer}
},
{
initialRouteName: "Drawer",
headerMode: "none"
}
);
const AppContainer = createAppContainer(AppNavigator);
export default () =>
<Root>
<AppContainer/>
</Root>

With this statement,
export default () =>
<Root>
<AppContainer/>
</Root>
Without parentheses,it will interpreted as
export default () =>();
<Root>
<AppContainer/>
</Root>
So,it will return undefined which is not valid react element.Because of this above error will occur.
wrap the export default statement with ().It should be
export default () =>(
<Root> <AppContainer/></Root>
);
OR
export default () =>( <Root> <AppContainer/></Root> );
And import should be
import Application from "./src/Application";

Try
import * as Application from './src/application.js';
You are not exporting a named item but just a function byt you are trying to import a named item.

Check that you are exporting Application correctly from Application.js.
It should just be "export Application".

You are probably importing your components the wrong way.
How are you exporting Application in Application.js ?
Maybe remove {} will fix it
import Application from "./src/Application.js";
There is two ways you can export/import
export function ...
// another file
import {...} from '...'
Or using the default export
export default function ...
// another file
import ... from '...'
If you want to import it like
import {Application} from "./src/Application.js";
You should be exporting it like
export function Application...
And if you look ate what the error says...
...You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

React Navigation - createStackNavigator Error - "Undefined is not a function"

I've created the following code to import into app.js
import React from "react";
import { View } from "react-native";
import { createStackNavigator } from "react-navigation";
import HomeScreen from '../screens/HomeScreen';
import ProfileScreen from '../screens/auth/ProfileScreen';
import FilterScreen from '../screens/FilterScreen';
const Routes = createStackNavigator(
{
Home: {
screen: HomeScreen
},
Filters: {
screen: FilterScreen
},
Profile: {
screen: ProfileScreen
}
},
{
initialRouteName: "Home",
navigationOptions: {
headerTitleStyle: {
fontWeight: "bold",
color: "#fff",
},
headerTintColor: "#fff"
}
}
);
export default Routes;
I'm importing into app.js as follows
import Routes from './navigation/StackNavigator';
When I preview my app at this stage, I receive the following error:
undefined is not a function (near '...(0,
_reactNavigation.createStackNavigator)...')
<unknown>
C:\Apps\test\app\navigation\StackNavigator.js:9:6
loadModuleImplementation
C:\Apps\test\app\node_modules\metro\src\lib\polyfills\require.js:213:12
<unknown>
C:\Apps\test\app\App.js:7
loadModuleImplementation
C:\Apps\test\app\node_modules\metro\src\lib\polyfills\require.js:213:12
<unknown>
C:\Apps\test\app\node_modules\expo\AppEntry.js:2
loadModuleImplementation
C:\Apps\test\app\node_modules\metro\src\lib\polyfills\require.js:213:12
guardedLoadModule
C:\Apps\test\app\node_modules\metro\src\lib\polyfills\require.js:140:45
global code
<unknown file>:0
Does anyone have any idea what might be wrong? I'm tearing my hair out! Any suggestion will be GREATLY appreciated!

Suggestions:
Rename Routes to something else e.g. Routes1 (in both app.js and navigation/StackNavigator)
Narrow the scope of the error e.g. remove options from createStackNavigator and try something like:
const Routes1 = createStackNavigator();
export default Routes1;
Try the tab navigator in this file (instead of stackNavigator) and see if it works ok.
Cleanup and do the forced reinstall of modules

React-native:cannot read property 'navigate' of undefined

I'm getting below error when im trying to navigate to different screen from home screen. i defined initial loading screen in routes. From initial screen trying to navigate to different screen then getting below error.
this.props is returning just {}. Not really sure why.
login.component.js
import React, {Component} from 'react';
import {NavigationActions} from 'react-navigation';
import {
Platform,
StyleSheet,
Text,
View,
TextInput,
TouchableOpacity,
Touchable,
Image,
Button
} from 'react-native';
import { handleFbLogin } from '../../config/authConfig/';
class Login extends Component {
render () {
console.log("this.props")
console.log(this.props)
return (
<View style={{flex: 1,backgroundColor: '#37afa6'}}>
<Button
title="Go to Details"
onPress={() => this.props.navigation.navigate('setupProfile')}
/>
</View>
);
}
}
export default Login;
routes/index.js
import {StackNavigator} from 'react-navigation';
import Login from '../pages/Login.page';
import SetupProfile from '../pages/setupProfile.page';
const Config = {
navigation: {
login: {
screen: Login
},
setupProfile: {
screen: SetupProfile,
}
}
}
export default Config;
App.container.js
import React, {Component} from 'react';
import Login from './pages/Login.page';
import {connect} from 'react-redux';
import Router from './routes';
import {
Platform,
StyleSheet,
Text,
View,
TextInput
} from 'react-native';
class App extends Component {
render () {
return (
<Router />
);
}
}
export default App;
index.js(startup point):
import { AppRegistry } from 'react-native';
import { StackNavigator } from 'react-navigation';
import app from './app/index';
import Config from './app/routes/index';
export const AppNavigator = StackNavigator(Config.navigation,{initialRouteName : 'login'});
AppRegistry.registerComponent('BuddApp', () => AppNavigator);
export default app;
i'm able to load initalscreen after these changes but when trying to navigate still getting the same error.

EDIT :
I got it. You forgot the constructor in your login screen, that's why your props are empty :
constructor(props) {
super(props);
}
PREVIOUS ANSWER :
Without the full code, i can't see what the exact problem is, but i will give you an exemple of use of react-navigation :
In your index.js (start point of your app) :
import { AppRegistry } from 'react-native';
import { StackNavigator } from 'react-navigation';
export const AppNavigator = StackNavigator(Config.navigation);
AppRegistry.registerComponent('appName', () => AppNavigator);
In the navigation config :
const Config = {
navigation: {
login: {
screen: Login
},
setupProfile: {
screen: SetupProfile,
}
}
}
The first object found in the navigation config is the start of your app.
Now you can use your navigation function in the "login" page with navigate :
this.props.navigation.navigate('setupProfile')
If the AppRegistry is filled everything should run fine.
I hope it help !

Cannot read property 'navigate' of undefined - React Native Navigation

I am currently working on a app which works with react native and I tried to make a flow using react-navigation working on this tutorial but I am having trouble at the point of running my project, I've done a lot of research and i just cant get to the solution, first for all I am using react-native-cli: 2.0.1 and react-native: 0.48.3, this is my code:
App.js:
import React, { Component } from 'react';
import { Text, Button, View } from 'react-native';
import {
StackNavigator,
} from 'react-navigation';
class App extends Component {
static navigationOptions = {
title: 'Welcome',
};
render() {
console.log(this.props.navigation);
const { navigate } = this.props.navigation;
return (
<View>
<Text>Go to maps!</Text>
<Button
onPress={() => navigate('Map')}
title="MAP"
/>
</View>
);
}
}
export default App;
my Router.js
import {
StackNavigator,
} from 'react-navigation';
import MapMarker from './MapMarker';
import App from './App';
export const UserStack = StackNavigator({
ScreenMap:
{
screen: MapMarker,
navigationOptions:
{
title: "Map",
header:null
},
},
ScreenHome:
{
screen: App,
navigationOptions:
{
title: "Home",
headerLeft:null
},
},
});
As you can see this is a pretty basic App which i just cant make work, this is a screenshot of my error on the simulator:
I would really really appreciate if you guys could help me with this.
Thanks.

You should change the code onPress={() => navigate('Map')} to onPress={() => navigate('ScreenMap')} and ScreenHome should be the first screen then ScreenMap as you want to navigate from App to MapMarker. Or you can set initialRouteName: ScreenHome in the stacknavigator.

You create your StackNavigator, but where do you use it? You should have something like
import React, { Component } from 'react';
import {
AppRegistry,
View
} from 'react-native';
import {
StackNavigator,
} from 'react-navigation';
export default class MyApp extends Component {
render() {
return (
<View style={{flex:1}}>
<StackNavigator/>
</View>
);
}
}
AppRegistry.registerComponent('MyApp', () => MyApp);
Now that your StackNavigator is controlling what is shown, your App component will have navigation in its props. Note, you do not "pass" the navigation prop. This is handled for you.