I made a separate Index.js file to hold all the components that I want to export throughout the app I'm creating. I thought the file path I'm taking would be correct but instead...
I'm getting an error that says:
Could not resolve
'/User/user/projects/Something/src/components/components' as a file
nor as a folder (null)
How can I fix this?
Here's LoginForm.js:
import React, { Component } from 'react';
import { TouchableOpacity, StyleSheet, View, Text ,Button } from 'react-native';
import { UserInput } from './components';
class LoginForm extends Component {
render() {
return(
<View style={styles.container}>
<UserInput/>
<TouchableOpacity style={styles.button}>
<Button
title="Press Me"
/>
</TouchableOpacity>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
paddingHorizontal: 10
},
button: {
alignItems: 'center',
backgroundColor: '#DDDDDD',
padding: 10
}
});
export default LoginForm;
Here's Index.js:
export * from './UserInput';
export * from './LoginForm';
In the current working directory of LoginForm.js , there is no components folder.
From your script, you want UserInput component in the LoginForm component.
You can simply do it
import { UserInput } from './UserInput';
Right use of index.js of components folder is when you want to import the selected component of folder's in other directory's component's
update :
in the LoginForm component do
import UserInput from './UserInput'; //default export
Related
I am working on a ReactNative Project. I am a beginner so this question might seem silly. I am creating a basic navigation for a login screen and keep getting this error message
'Unable to resolve module ./src/Home from /app7-react-native/App.js:
Then it says none of these files exist
Here is my App. js
import React from 'react';
import { View, Text, Button } from 'react-native';
import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
import Home from '.src/Home';
import Login from './src/Login';
const Navigator = createStackNavigator ({
Home: { screen: Home},
Login: { screen: Login},
});
const App = createAppContainer(Navigator);
export default App;
Home.js
import React from 'react';
import { StyleSheet, View, Text, Button} from 'react-native';
export default class Home extends React.Component {
static navigationsOptions = ({ navigation }) => {
return {
title: navigation.getParam('name'),
};
};
render() {
const { navigate, state } = this.props.navigation;
return (
<View style={styles.container}>
<Text>Hello {state.params.name}</Text>
<Button
title="Go to home screen"
onPress={() => navigate('Home')}
/>
</View>
)
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center'
}
});
Login.js
import React from 'react';
import { Text, View, TextInput, Stylesheet, Button, Touchableopacity } from 'react-native';
export default class Login extends React.Component {
static navigationsOptions = {
title = 'Login',
};
render() {
const { navigate } = this.props.navigation;
return (
<View style={styles.container}>
<Button
title="Go to profile screen"
onPress={() => navigate(
'Profile', { name: 'Jane'}
)}
/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center'
}
})
Try to replace this '.src/Home' with './src/Home';
and your folder structure must be :
App. js
src
Home.js
Login.js
2 fixes need to be done here
Replace '.src/Home' with './src/Home' in your App.js file.
MyRNProject
App.js
src
Home.js
Login.js
You seem to be calling "Home" from inside of Home.js onPress function. You are creating an infinite loop here. Change it to a different screen like Login or Profile
I'm new to React Native and tried to follow the lesson "Organize a React Native Project" so I moved the code from App.js to App/index.js and deleted App.js. That works fine in the Android simulator but not in the Web browser.
There I get this error:
Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.
Check the render method of `ExpoRootComponent`.
▶ 24 stack frames were collapsed.
registerRootComponent
C:/Users/me/Documents/src/launch/registerRootComponent.web.tsx:14
11 | const RootComponent: React.FC<P> = props => <App {...props} />;
12 | AppRegistry.registerComponent('main', () => RootComponent);
13 | const rootTag = document.getElementById('root') ?? document.getElementById('main');
> 14 | AppRegistry.runApplication('main', { rootTag });
15 | }
My app code is really simple, it is the default one from the Expo basic template. index.js :
import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
export default function App() {
return (
<View style={styles.container}>
<Text>Open up App.js to start working on your app!</Text>
<StatusBar style="auto" />
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
I have run the commands expo start and npm start but no difference.
Provide (the default) AppEntry.js in case it is of interest:
import registerRootComponent from 'expo/build/launch/registerRootComponent';
import App from '../../App';
registerRootComponent(App);
You need to change the package.json file to have the main property as follows.
"main": "YourFilePath/YourEntryFile.js"
in your case "main": "App/index.js",
and in the component that you want to make the root component,
Class-based component YourEntryFile.js
import { registerRootComponent } from 'expo';
import React from 'react';
import { View } from 'react-native';
class App extends React.Component {
render() {
return <View />;
}
}
registerRootComponent(App); //this is important
Functional component YourEntryFile.js
import { registerRootComponent } from 'expo';
import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
const App = () => {
return (
<View style={styles.container}>
<Text>Open up App.js to start working on your app!</Text>
<StatusBar style="auto" />
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
registerRootComponent(App) //This line is important
Please refer to expo docs for more info
I'm new to react-native and trying to set up my app with mobx for state management, when trying to inject rootStore into my HomeScreen component I get the following error:
Error: C:\xampp\htdocs\second-try\screens\HomeScreen.js: Leading decorators must be attached to a class declaration
This is my component, as you see I'm suing function based component and I get a warning, but how can I use components ass Class and inject mobx stre into my react-native component.
My HomeScreen file:
import * as React from 'react';
import { StatusBar } from 'expo-status-bar';
import { View, Text, StyleSheet } from 'react-native';
#inject(stores => ({
postStore: rootStore.postStore,
//authStore: rootStore.authStore,
})
)
//ERROR IS RIGHT
#observer
const HomeScreen = function()
{
return (
<View style={styles.container}>
<Text>{postStore.postMessage}</Text>
<StatusBar style="auto" />
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
export default HomeScreen;
The same issue was already solved in several posts, but non of them helped me (I'm new to React Native, so possibly there is a solution, but I can't find it)
My code uses route and screen.
App.js:
import React from 'react';
import { StackNavigator } from 'react-navigation';
import HomeScreen from './screens/HomeScreen.js';
const App = StackNavigator({
Home: { screen: HomeScreen }
});
HomeScreen.js:
import React, { Component } from 'react';
import { StyleSheet, Text, View, Button } from 'react-native';
export default class HomeScreen extends Component {
onPressLearnMore() {
}
render() {
return (
<View style={styles.container}>
<Button title="Learn More" onPress={() => this.onPressLearnMore()} />
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
What is wrong?
The project structure:
you must export default App in app.js
You don't need to define the file type in your import.
Change this import HomeScreen from './screens/HomeScreen.js';
To this import HomeScreen from './screens/HomeScreen';
Hope it helps.
Edit: Just to gather all information in this answer, as suggested in the comments you should also export your App.js
I want to break things down into components. Inside my App.js file, I would like to see the text input box that would come about from the <CreateAccount/> component. The problem is that it's giving me an error. As soon as I include <View></View>, my background disappears (just have a white screen) and I see Email (from placeholder) on the top left corner of my physical device.
I want to have the text input box directly underneath the title My App. This whole React Native thing is so different from regular HTML & CSS so I'm wondering why this is happening in my case and what can I do to fix it?
Here's App.js file:
import React, {Component} from 'react';
import {View} from 'react-native';
import BackGround from './components/BackGround';
import CreateAccount from './components/CreateAccount';
export default class App extends Component {
render() {
return(
<View>
<BackGround/>
<CreateAccount/>
</View>
);
}
}
Here's BackGround.js file:
import React, {Component} from 'react';
import {StyleSheet, Image, Text} from 'react-native';
export default class BackGround extends Component {
render() {
return(
<Image style={styles.container} source={require('../pictures/smoke.jpg')}>
<Text style={styles.title}>My App</Text>
</Image>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
width: null,
height: null,
backgroundColor: 'rgba(0,0,0,0)'
},
title: {
paddingBottom: 390,
fontSize: 50
}
});
Here's CreateAccount file:
import React, {Component} from 'react';
import {TextInput} from 'react-native';
export default class CreateAccount extends Component {
render() {
return(
<TextInput
placeholder={"Email"}
placeholderTextColor={"#f44242"}
/>
);
}
}