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?
Related
I am going to implement a react native footer menu (bottom tam navigator). But I got some errors on running it.
this is my drawer.js file
import React,{Component} from 'react';
import {View,Text,StyleSheet} from "react-native";
import {createAppContainer}from "react-navigation";
import {createMaterialBootomTabNavigator} from "react-navigation-material-bottom-tabs";
import Homescreen from "./home.js";
class drawer extends React.Component{
render() {
return (
<View style={styles.container}>
<Text>drawer</Text>
</View>
);
}
}
const styles=StyleSheet.create({
container:{
flex:1,
justifyContent:"center",
alignItems:"center",
}
});
const TabNavigator=createMaterialBootomTabNavigator(
{
Home:{
screen:Homescreen,
}
},
{
initialRouteName:"home",
activeColor:"#f0edf6",
inactiveColor:"#3e2465",
barStyle:{ backgroundColor: '#694fad' },
}
);
export default createAppContainer(TabNavigator);
I had already installed the react-navigator.
By run it on my emulator I got this error.
how can I fix this?
Change createMaterialBootomTabNavigator to createMaterialBottomTabNavigator
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>
);
}
I'm trying to use react-navigate v5 to setup a stacknavigator for four screens. Currently I'm getting this error while trying to run the app:
My App.js:
import React from 'react';
import SafeAreaView from 'react-native-safe-area-view';
import MainStackNavigator from './navigation/Navigator';
import {LocalizationProvider} from './utils/localization/LocalizationContext';
import { NavigationContainer } from '#react-navigation/native';
const App: () => React$Node = () => {
return (
<NavigationContainer>
<LocalizationProvider>
<MainStackNavigator />
</LocalizationProvider>
</NavigationContainer>
);
};
export default App;
My Navigator.js:
import React from 'react';
import {NavigationContainer} from '#react-navigation/native';
import {createStackNavigator} from '#react-navigation/stack';
import {Map} from '../components/Map';
import {HomeScreen} from '../components/HomeScreen';
import {LanguageSettings} from '../components/LanguageSettings';
import {MarkerDetails} from '../components/MarkerDetails';
// import screens
const Stack = createStackNavigator();
function MainStackNavigator() {
return (
<Stack.Navigator
initialRouteName='Home'>
<Stack.Screen
name='Home'
component={HomeScreen}
/>
<Stack.Screen
name='LanguageSettings'
component={LanguageSettings}
/>
<Stack.Screen
name='MainMap'
component={Map}
/>
<Stack.Screen
name='MarkerDetails'
component={MarkerDetails}
/>
</Stack.Navigator>
);
}
export default MainStackNavigator;
And the home screen itself that's generating the error (the other screens do too):
import React, {useContext} from 'react';
import {
View,
Image,
StyleSheet,
Dimensions,
ImageBackground,
Layout,
Text,
Modal,
Button
} from 'react-native';
const { width, height } = Dimensions.get('window');
const frameWidth = width;
const columnWidth = frameWidth / 3;
class HomeScreen extends React.Component {
static navigationOptions = {};
constructor(props) {
super(props);
this.state = {
firstLaunch: null,
condUpdate: null
};
}
///....///
render() {
return(
<View
style={{
flex: 1,
alignItems: 'center',
justifyContent: 'center',
margin: 20,
}}>
</View>
);
}
}
export default HomeScreen;
Not sure what's going on, would appreciate some help. Thanks!
This is happening because of the way you export and import HomeScreen.
If you export default you need to import the entire file. Your fix would be to change the import in the Navigator.js from:
import {HomeScreen} from '../'
to
import HomeScreen from '../'
A time you would use the destructuring import is with a workflow like so:
modules.export = {
a: apple
b: banana
}
----
import { a, b } from './fruits.jsx'
this is a problem with the export
this error occurs when you define the components with default
like this:-
import Home from "./Home";
import Room from "./Room";
import Hall from "./Hall";
export default{Home, Room, Hall};
so you have to define without it like this:-
import Home from "./Home";
import Room from "./Room";
import Hall from "./Hall";
export{Home, Room, Hall};
I am new to React Native. I created a new project using npx react-native init NewProject2. Then, I imported the project in VS Code. When I run my project on my Android device, it works fine but VS Code shows an error. This is my App.js :
/**
* Sample React Native App
* https://github.com/facebook/react-native
*
* #format
* #flow
*/
import React from 'react';
import {
SafeAreaView,
StyleSheet,
ScrollView,
View,
Text,
StatusBar,
} from 'react-native';
import {
Colors
} from 'react-native/Libraries/NewAppScreen';
import Login from './src/pages/Login';
const App: () => React$Node = () => {
return (
<View style={styles.container}>
<StatusBar
backgroundColor = "#e1ad01"
></StatusBar>
<Text style={{color:"#e1ad01",fontSize:18}}>Just some text!!</Text>
</View>
);
};
const styles = StyleSheet.create({
container : {
flex : 1,
backgroundColor:'#000000',
alignItems : "center",
justifyContent : "center"
}
});
export default App;
And this is my index.js :
/**
* #format
*/
import {AppRegistry} from 'react-native';
import App from './App';
import {name as appName} from './app.json';
AppRegistry.registerComponent(appName, () => App);
This is the error image :
My Login.js has the same error.
Hey so you could just delete your app.js and make a new one like this below
App.js:
import React, { Component } from 'react';
import {View,Text,StyleSheet} from 'react-native';
class App extends Component {
render(){
return(
<View style={styles.container}>
<StatusBar
backgroundColor = "#e1ad01"
></StatusBar>
<Text style={{color:"#e1ad01",fontSize:18}}>Just some text!!</Text>
</View>
);
}
const styles = StyleSheet.create({
container : {
flex : 1,
backgroundColor:'#000000',
alignItems : "center",
justifyContent : "center"
}
});
export default App;
I would suggest making a new folder in your project as "src" and place all your code in it, so inside "src" place this App.js file and then import it into your "index.js" like this. I didn't run your code so I don't know if there is any issue with ur code but it seems fine to me.
index.js:
import {AppRegistry} from 'react-native';
import App from './src/App';
import {name as appName} from './app.json';
AppRegistry.registerComponent(appName, () => App);
I used to the class component instead of functional cuz u might be dealing with states later on so it will be helpful.
Fell free to comment if you face any error again.
I got expected a component class got object error when I try to use loginPage component which I created.
here is index.ios.js
import React, {Component} from 'react';
import {
AppRegistry,
View
} from 'react-native';
import loginPage from './pages/loginPage'
class app extends Component {
render() {
return (
<View>
<loginPage/>
</View>
);
}
}
AppRegistry.registerComponent('app', () => app);
and here is the loginPage.js
import React, { Component } from 'react';
import {
StyleSheet,
Text,
View
} from 'react-native';
export default class loginPage extends Component {
render() {
return (
<View>
<Text>
Welcome to React Native!
</Text>
</View>
);
}
}
You need to rename your loginPage class to LoginPage, the class must be capitalize
loginPage.js
import React from 'react';
import {
Text,
View
} from 'react-native';
const LoginPage = () => {
return (
<View>
<Text>
Welcome to React Native!
</Text>
</View>
);
}
export default LoginPage;
index.ios.js
import React, {Component} from 'react';
import {
AppRegistry,
View
} from 'react-native';
import LoginPage from './pages/loginPage'
class app extends Component {
render() {
return (
<View>
<LoginPage/>
</View>
);
}
}
remove the tags in index.ios.js
import React, {Component} from 'react';
import {
AppRegistry,
View
} from 'react-native';
import loginPage from './pages/loginPage'
class app extends Component {
render() {
return (
<loginPage/>
);
}
}
AppRegistry.registerComponent('app', () => app);