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.
Related
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!
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'm getting below error when im trying to navigate to different screen from home screen. i defined initial loading screen in routes. From initial screen trying to navigate to different screen then getting below error.
this.props is returning just {}. Not really sure why.
login.component.js
import React, {Component} from 'react';
import {NavigationActions} from 'react-navigation';
import {
Platform,
StyleSheet,
Text,
View,
TextInput,
TouchableOpacity,
Touchable,
Image,
Button
} from 'react-native';
import { handleFbLogin } from '../../config/authConfig/';
class Login extends Component {
render () {
console.log("this.props")
console.log(this.props)
return (
<View style={{flex: 1,backgroundColor: '#37afa6'}}>
<Button
title="Go to Details"
onPress={() => this.props.navigation.navigate('setupProfile')}
/>
</View>
);
}
}
export default Login;
routes/index.js
import {StackNavigator} from 'react-navigation';
import Login from '../pages/Login.page';
import SetupProfile from '../pages/setupProfile.page';
const Config = {
navigation: {
login: {
screen: Login
},
setupProfile: {
screen: SetupProfile,
}
}
}
export default Config;
App.container.js
import React, {Component} from 'react';
import Login from './pages/Login.page';
import {connect} from 'react-redux';
import Router from './routes';
import {
Platform,
StyleSheet,
Text,
View,
TextInput
} from 'react-native';
class App extends Component {
render () {
return (
<Router />
);
}
}
export default App;
index.js(startup point):
import { AppRegistry } from 'react-native';
import { StackNavigator } from 'react-navigation';
import app from './app/index';
import Config from './app/routes/index';
export const AppNavigator = StackNavigator(Config.navigation,{initialRouteName : 'login'});
AppRegistry.registerComponent('BuddApp', () => AppNavigator);
export default app;
i'm able to load initalscreen after these changes but when trying to navigate still getting the same error.
EDIT :
I got it. You forgot the constructor in your login screen, that's why your props are empty :
constructor(props) {
super(props);
}
PREVIOUS ANSWER :
Without the full code, i can't see what the exact problem is, but i will give you an exemple of use of react-navigation :
In your index.js (start point of your app) :
import { AppRegistry } from 'react-native';
import { StackNavigator } from 'react-navigation';
export const AppNavigator = StackNavigator(Config.navigation);
AppRegistry.registerComponent('appName', () => AppNavigator);
In the navigation config :
const Config = {
navigation: {
login: {
screen: Login
},
setupProfile: {
screen: SetupProfile,
}
}
}
The first object found in the navigation config is the start of your app.
Now you can use your navigation function in the "login" page with navigate :
this.props.navigation.navigate('setupProfile')
If the AppRegistry is filled everything should run fine.
I hope it help !
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.
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.