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";
Related
im building a music player, using react-native-track-playe v1.2.3, so i needed so functions that are in the v2 so i installed it npm i react-native-track-player#2.0.0-rc13, in my project the package.json react-native`track-player is already in v2, but when i reload the project this error came out:
this is my index:
import {AppRegistry} from "react-native";
import App from './App';
import {name as appName} from "./app.json";
import TrackPlayer from "react-native-track-player";
AppRegistry.registerComponent(appName, () => App);
TrackPlayer.registerPlaybackService( () => require("./services/Services.js"));
and heres the app:
import { registerRootComponent } from 'expo';
import * as React from 'react';
import Tab_Navigator from "./routes/Tab_Navigator";
import { AppProvider } from "./context/AppProvider";
console.reportErrorsAsExceptions = false;
export default class App extends React.Component {
render() {
return (
<>
<AppProvider>
<Tab_Navigator></Tab_Navigator>
</AppProvider>
</>
);
}
}
registerRootComponent(App);
eveything is the same before i update the package, didnt touch anything, how can solve this?
Try this way
import {AppRegistry} from "react-native";
import App from './App';
AppRegistry.registerComponent("AppName", () => App);
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
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!
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!
This is the error in the console: Cannot find module 'expo' from 'setup.js'.
Below is my code:
component.test.js:
import React from 'react';
import MyComponent from '../components/Component';
import renderer from 'react-test-renderer';
test('create component correctly', () =>{
const tree = renderer.create(
<MyComponent/>
).toJSON();
expect(tree).toMatchSnapshot();
});
Component.js:
import React, { Component } from 'react';
import {Text, View } from 'react-native';
export default class MyComponent extends React.Component{
render(){
return(
<View style={{flex: 1}}>
<View style={styles.cameraContainer}>
<Text> Test Component </Text>
</View>
</View>
);
}
}
When I try to use npm test the error that I mentioned before appears and I already try to uninstall and re-install jest and the error keeps showing.
Assuming you are using create-react-native-app, looks like this is coming from the "jest-expo" preset in the jest configuration.
Replace it with the react-native Jest preset, which is now built in to Jest:
jest.config.js:
module.exports = {
preset: 'react-native'
};
Or in package.json:
"jest": {
"preset": "react-native"
}