I started a new project with react-native. I created a component called Home.jsx in app/components/home/. It looks like this:
import React, { Component } from 'react';
import {
View,
Text,
StyleSheet,
} from 'react-native';
export default class Home extends Component {
render() {
return (
<View style={styles.container}>
<Text>This is the home component!</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
},
});
export default Home;
And my index.js (in the root) file looks like this:
import {AppRegistry} from 'react-native';
import Home from './app/components/home/Home';
import {name as appName} from './app.json';
AppRegistry.registerComponent(appName, () => Home);
When I try to load up the app in the the emulator, I get this error message:
error: bundling failed: Error: Unable to resolve module
`./app/components/home/Home` from
`/Users/[my_name]/repos/[repo_name]/index.js`:
The module `./app/components/home/Home` could not be found from
`/Users/[my_name]/repos/[repo_name]/index.js`. Indeed, none of these
files exist:
What am I doing wrong?
I got it working by not using a folder called app and instead using src. I'm not entirely sure why this solved the issue but there we go!
Related
I am using react-native to build an app. The app has 2 screens: HomeScreen and Search screen. The file explorer cant find the module for Search but the same path for HomeScreen is working. Also I am using android if it helps.
My App.js includes:
import React from 'react';
import type { Node } from 'react';
import { StatusBar } from 'react-native';
import Search from './src/screens/Search/index';
const App: () => Node = () => {
return (
<>
<StatusBar barStyle='dark-content' />
<Search />
</>
);
};
export default App;
Search/index.js includes
import React from "react";
import { View, Text } from "react-native-vector-icons";
const Search = (props) => {
return (
<View>
<Text>Hi</Text>
</View>
);
};
export default Search;
Error:
However if I replace Search by HomeScreen, the app works. Could you please help my figure out what I am doing wrong. I am using the same code and same directory search style in both my index.js files. However, I made HomeScreen/index.js before Search/index.js.
Here is my HomeScreen/index.js
import React from "react";
import { View, Text } from "react-native";
import HomeMap from '../../components/HomeScreenMap';
const HomeScreen = (props) => {
return (
<View>
<HomeMap />
</View>
);
};
export default HomeScreen;
Here is my directory:
MEDLIFE
>__tests__
>.vscode
>android
>ios
>node_modules
>src
>components
>screens
>HomeScreen
>index.js
>Search
>index.js
.buckconfig
.editorconfig
.eslintrc.js
.flowconfig
.gitattributes
.gitignore
.prettierrc.js
.watchmanconfig
App.js
app.json
babel.config.js
index.js
metro.config.js
package.json
yarn.lock
Change this:
import { View, Text } from "react-native-vector-icons";
To this:
import { View, Text } from "react-native";
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 have just started react-native and trying to create first Hello, world screen but I'm getting below error
ReactNativeJS: ReferenceError: Can't find variable: View
This error is located at:
in Unknown
in RCTView
in RCTView
in c
below is my code for App.js
import React, {Fragment,Component} from 'react';
import HelloWorldApp from './components/HelloWorldApp';
import { BrowserRouter as Router, Route } from "react-router-dom"
const App = () => {
return (
<Router>
<div>
<Route exact path='/' component={HelloWorldApp} />
</div>
</Router>
);
};
export default App;
Below is my code for HelloWorldApp.js
import React, {Component} from 'react';
import {Text, View} from 'react-native';
export default class HelloWorldApp extends Component {
render() {
return (
<View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
<Text>Hello, world!</Text>
</View>
);
}
}
I have already import this import {Text, View} from 'react-native'; but still I'm getting error Can't find variable: View
Below are some links that i have already check but it didn't help me to solve my issue
Can't find Variable : "View"
Can't find variable: React
ReferenceError: Can't Find Variable
UPDATE
I have tried this Delete and re-install the node modules
Now I'm getting this error
ReactNativeJS: Error: Invariant failed
This error is located at:
in l
in f
in RCTView
in RCTView
in c
can anybody tell me what I'm missing
Can anybody help me to solve this issue
If need more information please do let me know. Thanks in advance. Your efforts will be appreciated.
there is no problem in your code.you should only try react-native init example again and enjoy on another directory
Might be some issues while loading.
Do one thing :
Close the packager and restart the packager along with closing and deleting the
app and reinstalling it.
OR
Delete and re-install the node modules
App.js
import React, {Fragment,Component} from 'react';
import HelloWorldApp from './components/HelloWorldApp';
import { BrowserRouter as Router, Route } from "react-router-dom"
const App = () => {
return (
<Router>
<Route exact path='/' component={HelloWorldApp} />
</Router>
);
};
export default App;
import React,{Component} from 'react';
import {View,Text} from 'react-native';
export default class App extends React.Component {
render(){
return (
Hello world!!
)
}
}
1.Create new react native project
2.Delete App.js code
3.And paste this code in App.js
4.run.
import React, { Component } from 'react';
import {View,Text} from 'react-native';
export default class App extends Component {
render(){
return(
<View>
<Text>Hello world</Text>
</View>
)
}
}
Create new project
Delete App.js code
and paste this code in App.js
run
Need to set Login page as my rootview and used code. if i use the login page details in app.js file getting the result but tried to import login.js in app.js file its not working
import React, {Component} from 'react';
import { StyleSheet,
NavigatorIOS,} from 'react-native';
import LoginPage from './src/pages/Login';
type Props = {};
export default class App extends Component<{}> {
render() {
return (
<NavigatorIOS
// style={styles.container}
initialRoute={{
title: 'Login',
component: LoginPage,
}}/>
);
}
}
and in my login.js class
import React, { Component } from 'react';
import { AppRegistry, StyleSheet, Text, View } from 'react-native';
export default class Login extends Component {
render() {
return (
<View>
<Text style={styles.red}>Login</Text>
</View>
);
}
}
const styles = StyleSheet.create({
bigblue: {
color: 'blue',
fontWeight: 'bold',
fontSize: 30,
},
red: {
color: 'red',
},
});
// skip this line if using Create React Native App
AppRegistry.registerComponent('Demo', () => Login);
but it not showing the login page as rootview
I have an excepted answer in the below question.
How to navigate from splash screen to login screen in react native?
There is a google drive link on it from where you can download a sample project, its a simple app figure it out from the sample app how you should set up the App.js.
I suggest You should use StackNavigator for navigation its the best method to follow in my app App.js is configured using StackNavigator.
I am getting this error:
builded with expo
Trouble in import containers to main file app.js
SignIn code
import React, { Component } from 'react';
import LoginForm from '../components/LoginForm';
export default class SignIn extends Component {
render() {
return (
<View>
<Text>
</Text>
</View>
);
}
}
App.js code
import React, { Component } from 'react';
import {
Platform,
StyleSheet,
Text,
View,
TextInput
} from 'react-native';
import SignIn from './app/containers';
export default class App extends Component {
render() {
return (
<View style={styles.container}>
<Text style={styles.instructions}>
Ma App
</Text>
<SignIn />
</View>
);
}
}
if I remove signIn it's work!
Error on screen
Most likely the path to your SignIn component is incorrect, or you are missing the index.js export. You can test this theory by console logging the component SignIn; you will find it prints undefined.
The reason is you are attempting to import a default module SignIn from path ./app/containers. Assuming that is a valid path, you are attempting to import the default export from ./app/containers/index.js. This is unlikely to be correct as the index.js (AKA barrel) purpose is to export multiple public modules from an app directory.
Assuming your index.js is defined correctly, and includes the following or similar.
export { default as SignIn } from './SignIn.js';
Then you should update your import of SignIn to import a named module instead of the default module; as follows.
import { SignIn} from './app/containers';
Alternatively, you could import the default module direct from the component's source file.
import SignIn from './app/containers/SignIn';
Hope this helps!