Just implemented a login page.
After user click the login button.
How to navigate to my home page module?
The code should look like this:
login module:
class MyClient extends Component{
render() {
return (
<View style={styles.container}>
<TouchableHighlight style={styles.button}
onPress={this.login.bind(this)}>
</TouchableHighlight>
</View>
);
}
login() {
//How to switch to home view here?
}
}
module.exports = MyClient;
Home module:
class Home extends Component{
render() {
return (
<View>
<Text>This is home page</Text>
</View>
);
}
}
module.experts = Home;
I don't want to use navigator this component cuz' I think home module & login module should not be sort of parent&child relationship.
Is there a way to switch between these two page?
You have to use the navigator. You could try to use "replace" instead of "push". With this you can achieve an instant navigation between Components.
this.props.navigator.replace({
title: 'Home', component: Home
});
And just in case you want to hide the navigation bar there is the "navigationBarHidden" property of NavigatorIOS component.
<NavigatorIOS navigationBarHidden = 'true' />
Related
How can I use navigation using class component, the screens that I currently have on my app are functional components, and this is how I'm able to navigate from one page to another, but If try to implement this using functional comopenent it doesn't work.
export default function Activity({navigation}) {
return (
<View style={styles.MainContainer}>
<TouchableOpacity onPress={() => navigation.navigate("Home")}>
</TouchableOpacity>
</View>
)
}
How Can I implemented in here :/
I tried
this.props.navigation.navigate('Home')
and I got the following error/warning
cannot update a component while rendering a different component
export default class App extends React.Component {
render() {
return (
<View style={styles.MainContainer}>
<TouchableOpacity onPress={() => navigation.navigate("Home")}>
</TouchableOpacity>
</View>
)
}
For my navigation, I had to add at the beginning of the file this importation
import { useNavigation } from '#react-navigation/native'
And in my functional component
const navigation = useNavigation()
Like this :
I just implemented bottom navigation bar and it seems like I need to change the way I navigate between screens now on. This is how I was doing it before:
onPress={() => this.props.navigation.navigate('my_profile')}
but now it doesn't work, it shows this message:
Do you have a screen named 'my_profile'?
If you're trying to navigate to a screen in a nested navigator, see https://reactnavigation.org/docs/nesting-navigators#navigating-to-a-screen-in-a-nested-navigato
This is how I have implemented the bottom tab:
export default function home_customers() {
return (
<NavigationContainer>
<Tab.Navigator>
<Tab.Screen name="Home" component={home_customer_screen} />
<Tab.Screen name="More" component={settings_screen} />
</Tab.Navigator>
</NavigationContainer>
);
}
//this class below is located in the same file with the function home_customers
class home_customer_screen extends Component{
...
}
//this class is located in a different file that's why I am exporting it
export default class settings_screen extends Component{
render() {
return (
<View>
<TouchableOpacity onPress={() => this.props.navigation.navigate('my_profile')}>
<Text>My profile/Text>
</TouchableOpacity>
</View >
);
}
}
//this is where I am trying to navigate to
export default class my_profile extends Component {
...
}
FYI: I am not using Functions but Classes!
UPDATE
I am using nested navigators. This is the createStackNavigator located in another file:
const AppNavigator = createStackNavigator({
login: {
screen: login
},
home_customers: {
screen: home_customers
},
settings_screen: {
screen: settings_screen
},
my_profile: {
screen: my_profile
},
},
{
initialRouteName: "login"
}
);
From your updated snippet, you seem to be trying to use the react-navigation V4 syntax when defining your stack navigator and the V5 syntax for the tab navigator.
I would suggest you read the stack navigation guide in order to define your screens appropriately.
Once that is done you'll be able to navigate correctly.
I'm currently developing on a react-native application and I'm stucked at something for some time.
The problem is that I have a setup like this
Home Page -> Settings Page -> Information Page
I've hidden the header on home page, made a visible header on Settings Page and what I want to do:
I want to hide the header from the settings page when I navigate to Information Page. I mean I want that the third page gets all the space from the screen.
I'll attach a snack example of what happens in my case...
Hope someone could tell me a solution.
Thank you in advance! :)
https://snack.expo.io/#sapuu_ae/example-snack-stack -> open it on android/iOS device, it won't show good on web simulator.
The problem isn't the header, it's just that your navigation setup is a bit funky. Here are two working versions which use a different navigation setup. First, we need to define our screens.
class Home extends React.Component {
render() {
return (
<View style={styles.container}>
<Text style={styles.paragraph} onPress={() => this.props.navigation.navigate('Second')}>
Press it
</Text>
</View>
);
}
}
class Second extends React.Component {
render() {
return (
<View style={styles.container}>
<Text style={styles.paragraph}>
Second Page
</Text>
<Text style={styles.paragraph} onPress={() => this.props.navigation.navigate('Third')}>
Press for Third Page
</Text>
</View>
);
}
}
class Third extends React.Component {
render() {
return (
<View style={styles.container}>
<Text style={styles.paragraph}>
Third page here
</Text>
</View>
);
}
}
This one assumes that all screens are part of the same stack:
const RootStack = createStackNavigator({
Home: Home,
Second: Second,
Third : Third
});
const AppContainer = createAppContainer(RootStack);
export default class App extends React.Component {
render() {
return <AppContainer />;
}
}
This one assumes that the third screen is contained in another stack, along with the second screen.
const secondScreenStack = createStackNavigator({
Second: Second,
Third: Third
}, {
defaultNavigationOptions: {
header: null
}
});
const RootStack = createStackNavigator({
Home: Home,
Second: secondScreenStack
});
const AppContainer = createAppContainer(RootStack);
export default class App extends React.Component {
render() {
return <AppContainer />;
}
}
i have below roots in my react native project using react navigation:
https://i.stack.imgur.com/NA2gd.jpg
main is a bottomTabNavigator with 3 screens and in the Profile Screen i have a 3 screen topTabNavigator.
in the EditProfile screen i have a log out button. when i press the log out button i want to navigate to Login screen . please help me reach this out
i found it by my self
in the Profile screen i used screenProps just like this:
class Profile extends Component{
constructor(props){
super(props);
}
render(){
return(
<View style={{ flex: 1,}}>
<AppNavigator screenProps={{ rootNavigation: this.props.navigation }}/>
</View>
)
}
}
and in the EditProfile page when user touches logout button i run this code:
this.props.screenProps.rootNavigation.navigate('login')
I have button as mentioned below and I have an another page named JobDetails on the same folder in the project. When I click on the button "next" i need to display that JobDetails page. I have added onButtonPress with alert function and it works fine. I'm not sure on how to bring the next page on clicking the button using routing.
onButtonPress(){
alert("Prem")
}
<TouchableOpacity onPress={this.onButtonPress.bind(this)} style={styles.buttonStyle} >
<Text style={styles.nextPage}>
Next
</Text>
</TouchableOpacity>
It's very simple for react-native-router-flux, just do:
import { Actions } from 'react-native-router-flux';
onButtonPress(){
Actions.JobDetails();
}
Make sure your Scene key is correct (JobDetails in your case).
<Scene key="JobDetails" component={JobDetails} />
You can achieve this using Stack Navigator from react-navigation
Installation:
npm install --save react-navigation
Example:
import React from 'react';
import { View, Text, TouchableOpacity } from 'react-native';
import { StackNavigator } from 'react-navigation';
class MyHomeScreen extends React.Component {
static navigationOptions = {
title: 'Home'
}
onButtonPress(){
this.props.navigation.navigate('JobDetails'); // navigate to JobDetails screen!
}
render() {
return (
<TouchableOpacity onPress={this.onButtonPress.bind(this)} style={styles.buttonStyle} >
<Text style={styles.nextPage}>
Next
</Text>
</TouchableOpacity>
);
}
}
class JobDetailsScreen extends React.Component {
static navigationOptions = {
title: 'Job Details'
}
render() {
return (
<View>
<Text>I'm job screen!</Text>
</View>
);
}
}
const ModalStack = StackNavigator({
Home: {
screen: MyHomeScreen
},
JobDetails: {
screen: JobDetailsScreen
}
});
export default ModalStack;