Next page after loads in React Native-CodePudding

I'm newbie in React-native , I've just confused on how can I go to next page when the Google API successfully load to my app, mostly in the internet they used onPress but I don't have any onPress just to trigger the event instead i've implement after it successfully login data and will trigger the event, how should I do it?

From Login > Home

Apps.js

import React from 'react';
import Login from './components/login'
import SplashScreen from 'react-native-splash-screen';

const App = () => {
  React.useEffect(() =>{
    SplashScreen.hide()
  },[])
  return (
    <Login/>
  )
}

export default App;

Login.js

import React, { Component } from 'react';
import { View, StyleSheet, ToastAndroid, Button ,Text,Image} from "react-native";
import {
    GoogleSignin,
    GoogleSigninButton,
    statusCodes,
  } from '@react-native-community/google-signin';
  GoogleSignin.configure({
    webClientId: 'testttttttt.........apps.googleusercontent.com',
    offlineAccess: true,
  });
  class Login extends Component {
    constructor(props){
      super(props)
      this.state={
        userGoogleInfo : {},
        loaded: false
      }}
    signIn = async () => {
        try {
          console.log("Processing");
          await GoogleSignin.hasPlayServices();
          const userInfo = await GoogleSignin.signIn();
          this.setState({
            userGoogleInfo : userInfo,
            loaded : true
          })
          // after this it goes to another page Home.js  -----------------------------------------<<<<<<<<<

        } catch (error) {
          if (error.code === statusCodes.SIGN_IN_CANCELLED) {
            console.log("e 1");
          } else if (error.code === statusCodes.IN_PROGRESS) {
            console.log("e 2");
          } else if (error.code === statusCodes.PLAY_SERVICES_NOT_AVAILABLE) {
            console.log("e 3");
          } else {
            console.log(error.message);
          }
        }
      };
      render() {
        return (
          <View style={styles.container}>
            <GoogleSigninButton
                style={{ width: 222, height: 48 }}
                size={GoogleSigninButton.Size.Wide}
                color={GoogleSigninButton.Color.Dark}
                onPress={this.signIn}
                />
              {this.state.loaded ?
                <View>
                  <Text>{this.state.userGoogleInfo.user.name}</Text>
                  <Text>{this.state.userGoogleInfo.user.email}</Text>
                  <Image 
                style={{ width: 100, height: 100 }}
                source={{uri: this.state.userGoogleInfo.user.photo}}
              />
                </View>
              : <Text>Not SignedIn</Text> }
          </View>
        );
    }
}
const styles = StyleSheet.create({
    container:{
      flex:1,
      backgroundColor:'#000000',
      padding:15,
    },
  });
export default Login;

Home.js

import React from 'react';
import Login from './components/login'
import SplashScreen from 'react-native-splash-screen';
import { View,Text} from "react-native";

const App = () => {
  React.useEffect(() =>{
    SplashScreen.hide()
  },[])
  return (
    <View>
      <Text>fsaf</Text>
    </View>
  )
}

export default App;

CodePudding user response：

You can use React Navigation

And once you have a proper setup use push method

navigation.push('YourView')

CodePudding user response：

First, you need to add a navigation component to your project. The React Native documentation has a section about it with some libraries suggestions.

The React Navigation is hugely used and has the CommonActions that resolve your problem. After installing the React Navigation you can see this section on the documentation to dispatch the CommonActions to navigate to the Home screen after login success on your try...catch.