We Keep Coding

undefined is not an object (evaluating '_react.React.Component')

I am developing an app in react-native while running the app I get this error.
My index.js file
import App from './App';
import {name as appName} from './app.json';
AppRegistry.registerComponent(appName, () => App);
My App.js file
import { StyleSheet, View, StatusBar } from 'react-native';
import Routes from './src/store/Routes';
import 'react-native-gesture-handler';
export default class App extends Component {
render() {
return (
<View style={styles.container}>
<StatusBar backgroundColor="#18163E" barStyle="light-content" />
<Routes />
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flexGrow: 1,
},
}); ```
While running i am getting above error and it is pointed to index.js file

This is missing.
import React, { Component } from 'react';

Your error message clearly states the React component missing.
In your App.js file add the below line:
import React, { Component } from 'react';
All of your react components should have this line.
After adding the above line your App.js file will appear as below:
import React, { Component } from 'react';
import { StyleSheet, View, StatusBar } from 'react-native';
import Routes from './src/store/Routes';
import 'react-native-gesture-handler';
export default class App extends Component {
render() {
return (
<View style={styles.container}>
<StatusBar backgroundColor="#18163E" barStyle="light-content" />
<Routes />
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flexGrow: 1,
},
});

Did you forget to import AppRegistry from react-native?

React Native Navigation Error:the component for the route must be a React Component

Hello Every one I am new to react native I am building a very simple navigation system but i am getting this error.Please any one guide me
enter image description here
The screenshot attached above is the error i am running on my physical android phone S7 edge Oreo 8.0
***Homescreen.js***
import React from "react";
import { Text, StyleSheet } from "react-native";
const HomeScreen = () => {
return <Text style={styles.text}>Hello World</Text>;
};
const styles = StyleSheet.create({
text: {
fontSize: 30
}
});
***App.js***
import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
import HomeScreen from './src/screens/HomeScreen'
import ComponentsScreen from './src/screens/ComponentsScreen'
const navigator = createStackNavigator(
{
Home: HomeScreen,
Components:ComponentsScreen
},
{
initialRouteName: 'Components',
defaultNavigationOptions: {
title: "App"
}
}
);
export default createAppContainer(navigator);
***ComponentsScreen.js***
import React from 'react'
import {Text,StyleSheet} from 'react-native'
const ComponentsScreen=function(){
return <Text style={styles.textStyle}>This is the Components Screen</Text>
}
const styles=StyleSheet.create({
textStyle:{
fontSize:30
}
})

I had tried you code its working perfectly just add exports in your HomeScreen and ComponentsScreen:
import React from "react";
import { Text, StyleSheet } from "react-native";
const HomeScreen = () => {
return <Text style={styles.text}>Hello World</Text>;
};
export default HomeScreen;
const styles = StyleSheet.create({
text: {
fontSize: 30
}
});
ComponentsScreen:
import React from 'react'
import {Text,StyleSheet} from 'react-native'
const ComponentsScreen=function(){
return <Text style={styles.textStyle}>This is the Components Screen</Text>
}
export default ComponentsScreen;
const styles=StyleSheet.create({
textStyle:{
fontSize:30
}
})
And make sure you have correct name declaration you had declared Homescreen component as Homescreen, where s is small but you are importing in your App.js with caps, check this.
Hope this helps!

React Native "TypeError: Object(...) is not a function" Error for react navigation stack

I'm having an issue with my react-navigation-stack, I believe it could be a problem with dependencies, but I'm not sure if that's it. I am simply trying to have some text redirect to another page. If there is code that is irrelevant to the issue, such as a button, I apologize as I am trying to learn react native. The problem is being pointed at homeStack.js at the first import, "import { createStackNavigator } from '#react-navigation/stack';" , but previously I just used react-navigation-stack there, which I believe was a part of old dependencies, but it gave me a module not found error at first, which changed to what I have now when I put #react-navigation/stack instead. I was learning from a video tutorial, but the code from the tutorial was not compiling. I redownloaded react navigation multiple times and have tried some thing that did not work. I will post my code below and would really appreciate help and input as to what can help my problem. Thanks you!
Picture of error
homeStack.js
import { createStackNavigator } from '#react-navigation/stack';
//import { createAppContainer } from '#react-navigation/native';
//import { createStackNavigator } from 'react-navigation-stack';
import { createAppContainer } from 'react-navigation';
import Home from '../screens/home';
import ReviewDetails from '../screens/reviewDetails';
const screens = {
Home: {
screen: Home,
},
ReviewDetails: {
screen: ReviewDetails,
},
};
// home stack navigator screens
const HomeStack = createStackNavigator(screens);
export default createAppContainer(HomeStack);
home.js
import React from 'react';
import { StyleSheet, View, Text, } from 'react-native';
import { globalStyles } from '../styles/global';
export default function Home() {
return (
<View style={globalStyles.container}>
<Text style={globalStyles.titleText}>Home Screen</Text>
</View>
);
}
App.js
//import React from 'react';
import React, { Component } from 'react';
import { StyleSheet, Text, View, Image, Button } from 'react-native';
import Buttonwithbackground from './src/Buttonwithbackground';
import { StackNavigator } from 'react-navigation';
//import Expo from 'expo';
//import Screen from 'screen2';
import { AppLoading } from 'expo';
import Navigator from './routes/homeStack';
import { render } from 'react-dom';
//
//import {Link} from 'react-router-dom';
class HomeScreen extends React.Component{
static NavigationOptions = {
title: 'Home',
};
render(){
const { navigate} = this.props.navigation;
return(
<View style={styles.container}>
<Text
onPress= { ()=> navigate('Home') }>Navigate to Profile
</Text>
</View>
);
}
}
class ProfileScreen extends React.Component{
static NavigationOptions = {
title: 'Profile',
};
render(){
const { navigate} = this.props.navigation;
return(
<View style={styles.container}>
<Text
onPress= { ()=> navigate('Profile') }>Navigate to Profile
</Text>
</View>
);
}
}
//export default function App() {
export default class App extends Component {
editUser = () => {
this.props.navigation.navigate("Screen");
// this.navigation.navigate("screen2");
// window.location.href = 'screen2';
};
editUser2 = () => {
//if the second button is clicked, it will redirect to yahoo.com
window.location.href="http://yahoo.com"
};
render(){
return (
<View style={styles.container}>
<Image
style={{width: 350, height: 200}}
source = {require('./assets/dolanduckjoker.jpg')}
/>
<Navigator />
<Buttonwithbackground text='Login' color='black' onPress={this.editUser2}/>
<p><br/></p>
<Button title='Login' color='black' onPress={this.editUser2}/>
<Button title='Login' color='black' onPress={() => navigation.navigate('screen2.js')}/>
<p><br/></p>
<Button
style={styles.cancelButton}
onPress={this.editUser}
title="Register"
color="#343434"
accessibilityLabel="Register a User."/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: 'white',
alignItems: 'center',
justifyContent: 'center',
},
title: {
fontSize: 32,
textAlign: 'center',
margin: 10,
},
});

The error says what's wrong -
Object(...) is not a function
createStackNavigator expects a function and you are passing an object to it as a parameter. According to docs
Your code should look like -
import { createStackNavigator } from '#react-navigation/stack';
//import { createAppContainer } from '#react-navigation/native';
//import { createStackNavigator } from 'react-navigation-stack';
import { createAppContainer } from 'react-navigation';
import Home from '../screens/home';
import ReviewDetails from '../screens/reviewDetails';
const Stack = createStackNavigator();
function MyStack() {
return (
<Stack.Navigator>
<Stack.Screen name="Home" component={Home} />
<Stack.Screen name="ReviewDetails" component={ReviewDetails} />
</Stack.Navigator>
);
}
export default MyStack; //you need to render this
Now in your root file, It should be something like this (excluding your additional code) -
import { createStackNavigator } from '#react-navigation/stack';
import MyStack from "yourPath";
export default function App() {
return (
<NavigationContainer>
<MyStack />
</NavigationContainer>
);
}

Fix Error: The component for route 'Home' must be a React component

I'm trying to used react-navigation but I can not get it to work when I move each screens' components into multiple files. I always get this error: "The component for route 'Home' must be a React component". This error doesn't happen if I move all of the code into one file, so I'm not sure what the difference is.
Here is my App.js:
import React from 'react';
import { StackNavigator } from 'react-navigation';
import { AppRegistry, StyleSheet, Text, View, TouchableHighlight } from 'react-native';
import { HomeScreen } from './screens/HomeScreen';
import { JoinScreen from './screens/JoinScreen';
import { HostScreen } from './screens/HostScreen';
const Root = StackNavigator(
{
Home: {
screen: HomeScreen,
},
Details: {
screen: JoinScreen,
}
},
{
initialRouteName: 'Home',
headerMode: 'none',
}
);
export default class App extends React.Component {
render() {
return (
<Root />
)
}
}
And here is my .screens/HomeScreen.js
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
export default class HomeScreen extends React.Component {
render() {
const { navigate } = this.props.navigation;
return (
<View style={styles.container}>
<Text style={styles.title}>Hello World</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'space-around',
}
});

I think that if you change this line:
import { HomeScreen } from './screens/HomeScreen';
to:
import HomeScreen from './screens/HomeScreen';
(i.e. removing the braces around HomeScreen) then it will work. Because you used export default in the HomeScreen component's source file, you don't need the destructuring on the import. This is attempting to access a variable called HomeScreen on the component, which is resolving to undefined and causes the error you saw.
Alternatively, you can remove the default from export default and keep the import the same. I personally prefer removing the braces as the code looks cleaner.
There's also a missing closing brace on this line:
import { JoinScreen from './screens/JoinScreen';
But I assumed that was a typo ;)

I think that react is having a problem figuring out what to import
Since you're exporting one thing by default
You should replace import { HomeScreen } from './screens/HomeScreen';
with
import HomeScreen from './screens/HomeScreen';

Try with:
Home: {
screen: () => <HomeScreen/>,
},

It also happens if you do not export your class.
export default class HomeScreen extends React.Component {
render() {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Home Screen</Text>
<Button
title="Go to Details"
onPress={() => this.props.navigation.navigate('Details')}
/>
</View>
);
}
}

Add this to your js file at the bottom add this Line
export default MainActivity;
import React, { Component } from 'react';
import { createStackNavigator } from 'react-navigation-stack';
class MainActivity extends Component{
...
}
export default MainActivity;

Since you've mentioned the default, I think that if you change this line:
import { HomeScreen } from './screens/HomeScreen';
to:
import HomeScreen from './screens/HomeScreen';
This would solve the issue. Cheers mate!

Keep the braces intact for your external screen files imports. Just do the following and it should run on both Android and iOS simulators regardless
// HomeScreen.js
... all imports
export class HomeScreen extends React.Component {
...
This fixed the issue for me in both platforms.

I was using "react" instead of 'react'. I removed the double quotes from react and the error gone away.

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.