How to navigate one page to another page using React Native?

Question

my scenario, I am trying to navigate login.js page to home.js page. I need to implement navigation but need to hide into login.js but need to show into home.js. Here, login button click to navigate home page. The navigation should support iOS and Android both platform.how to achieve this?

App.js

import React, { Component } from 'react';
import { StyleSheet, Text, View} from 'react-native';
import Login from './components/Login';

export default class App extends Component {
  render(){
    return(
      <View style={styles.container}>
          <Login/>
      </View>
    );
  }
}

Login.js

import React from 'react';
import { View, Text, StyleSheet, TextInput, TouchableOpacity, ActivityIndicator } from 'react-native';

export default class Login extends React.Component {
    state = {
       isLoading: false 
    };

    showLoader = () => {
        this.setState({ isLoading: true });
    };

    // Login Click Action
    loginclick = () => {
        //this.showLoader();
        console.log('Login Clicked...'); // Need to move home page
    }

    render() {
        return (
            <View style={styles.container}>
                <TouchableOpacity style={styles.button} onPress={(this.loginclick)}>
                    <Text style={styles.btntext}>Sing In</Text>
                </TouchableOpacity>
                <View style={styles.activityview, styles.horizontal}>
                    <ActivityIndicator size="large" animating={this.state.isLoading} color='#fff' />
                </View>
            </View>
        );
    }
}

Package.json

   {
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web",
    "eject": "expo eject"
  },
  "dependencies": {
    "@react-native-community/masked-view": "0.1.5",
    "expo": "~36.0.0",
    "react": "~16.9.0",
    "react-dom": "~16.9.0",
    "react-native": "https://github.com/expo/react-native/archive/sdk-36.0.0.tar.gz",
    "react-native-gesture-handler": "~1.5.0",
    "react-native-reanimated": "~1.4.0",
    "react-native-safe-area-context": "0.6.0",
    "react-native-safe-area-view": "^1.0.0",
    "react-native-screens": "2.0.0-alpha.12",
    "react-native-web": "~0.11.7",
    "react-navigation": "^1.6.1",
    "react-navigation-stack": "^2.0.16"
  },
  "devDependencies": {
    "babel-preset-expo": "~8.0.0",
    "@babel/core": "^7.0.0"
  },
  "private": true
}

SDushan · Accepted Answer · 2020-01-26 07:05:15Z

2

You can use React Navigation for moving different screens.

Change your App.js as below in order to handle navigation

import React from "react";
import { createAppContainer } from "react-navigation";
import { createStackNavigator } from "react-navigation-stack";
import Login from "./components/Login";
import Home from "import your home component";

const RootStack = createStackNavigator(
  {
    Login: Login,
    Home: Home
  },
  {
    initialRouteName: "Login"
  }
);

const AppContainer = createAppContainer(RootStack);

export default class App extends React.Component {
  render() {
    return <AppContainer />;
  }
}

After that, you can handle navigation to Home from Login changing your loginclick function as below

loginclick = () => {
    this.props.navigation.navigate('Home')
}

Hope this helps you. Feel free for doubts.

answered Jan 26, 2020 at 7:05

SDushan

4,6512 gold badges20 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

mobile apps Over a year ago

I am getting error Unable to resolve "react-navigation-stack" from "App.js"

SDushan Over a year ago

you need to install npm install react-navigation

mobile apps Over a year ago

again I am getting error

TypeError: (0, _reactNavigation. (In'(0, _reactNavigation.createAppContainer) (RootStack)','(0, _reactNavigation.createAppContainer)' is undefined)

SDushan Over a year ago

try npm install react-navigation-stack @react-native-community/masked-view

SDushan Over a year ago

if you still getting the same error after you follow above guidelines, please share your package.json

|

Collectives™ on Stack Overflow

How to navigate one page to another page using React Native?

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related