CODEWITHSUNDEEP
react-native
MojtabaRezaeimehr
MojtabaRezaeimehr

Reputation: 359

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

Upvotes: 0

Views: 5315

Answers (1)

Kirankumar Dafda
Kirankumar Dafda

Reputation: 2384

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

Upvotes: 2

Related Questions