Quantcast
Channel: Active questions tagged react-native+ios - Stack Overflow
Viewing all articles
Browse latest Browse all 16750

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

$
0
0

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
}

Viewing all articles
Browse latest Browse all 16750

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>