How do I Navigate between multiple .js file in my React Native App?

As a newbie in React Native, I'm trying to find a way to Navigate between the pages. everything that I found from google was about navigating between classes inside App.js and some other that has separated files was not working for me.
I found a lot of examples of using 'Navigator','StackNavigator','React-native-router-flux' but none of them worked for me.
this is what I need to learn:

login page: ./src/pages/Login.js

Homepage: ./src/pages/Home.js

login page(username & password) ------> if true -----> Homepage

1 Answer
1

Just install plugin

npm install --save react-navigation


import plugin and files in your app.js

import {
createStackNavigator,
} from 'react-navigation';

import LoginScreen from './src/pages/Login.js';
import HomeScreen from './src/pages/Home.js';

const App = createStackNavigator({
Login: { screen: LoginScreen },
Home: { screen: HomeScreen },
});


Considering this as your login screen

class LoginScreen extends React.Component {
static navigationOptions = {
title: 'Login',
};
render() {
return (
<Button
title="Login"
onPress={() => this.checkLogin() }
/>
);
}

checkLogin = () => {
const { navigate } = this.props.navigation;
if(username == "user" && password == "pass"){
navigate('Home')
}
}
}


Find out more from React navigation

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.