Button that leads to another screen/page in react native-CodePudding

i'am fairly new to react native and i'm doing a social media clone. I've got my navigator and the login via a database done , but i was wondering if there was a way to link a page/screen to another one by pressing a button . Here is my code for the home screen after logging in :

import React, {Component} from 'react';
import {View, Text, FlatList} from 'react-native';
import AsyncStorage from '@react-native-async-storage/async-storage';

class HomeScreen extends Component {
  constructor(props){
    super(props);

    this.state = {
      isLoading: true,
      listData: []
    }
  }

  componentDidMount() {
    this.unsubscribe = this.props.navigation.addListener('focus', () => {
      this.checkLoggedIn();
    });
  
    this.getData();
  }

  componentWillUnmount() {
    this.unsubscribe();
  }

  getData = async () => {
    const value = await AsyncStorage.getItem('@session_token');
    return fetch("http://localhost:3333/api/1.0.0/search", {
          'headers': {
            'X-Authorization':  value
          }
        })
        .then((response) => {
            if(response.status === 200){
                return response.json()
            }else if(response.status === 401){
              this.props.navigation.navigate("Login");
            }else{
                throw 'Something went wrong';
            }
        })
        .then((responseJson) => {
          this.setState({
            isLoading: false,
            listData: responseJson
          })
        })
        .catch((error) => {
            console.log(error);
        })
  }

  checkLoggedIn = async () => {
    const value = await AsyncStorage.getItem('@session_token');
    if (value == null) {
        this.props.navigation.navigate('Login');
    }
  };

  render() {

    if (this.state.isLoading){
      return (
        <View
          style={{
            flex: 1,
            flexDirection: 'column',
            justifyContent: 'center',
            alignItems: 'center',
          }}>
          <Text>Loading..</Text>
        </View>
      );
    }else{







      
      return (

        
         
        <View

        
        style={{
          flex: 1,
          justifyContent: 'center',
          alignItems: 'center',
        }}>
        <Text>Welcome to The app </Text>
      </View>

        
      );
    }
    
  }
}



export default HomeScreen;

Now ideally i would want a button in my else statement which could lead me to another screen (eg main screen of the app ) after logging in .

App.js :

import 'react-native-gesture-handler';
import React, { Component } from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createDrawerNavigator } from '@react-navigation/drawer';

import HomeScreen from './screens/home';
import LoginScreen from './screens/login';
import SignupScreen from './screens/signup';
import LogoutScreen from './screens/logout';

const Drawer = createDrawerNavigator();

class App extends Component{
    render(){
        return (
            <NavigationContainer>
                <Drawer.Navigator initialRouteName="Home">
                    <Drawer.Screen name="Home" component={HomeScreen} />
                    <Drawer.Screen name="Login" component={LoginScreen} />
                    <Drawer.Screen name="Signup" component={SignupScreen} />
                    <Drawer.Screen name="Logout" component={LogoutScreen} />
                </Drawer.Navigator>
                
            </NavigationContainer>
        );
    }
}

export default App;

CodePudding user response：

If you're new to react native, I'd suggest that you give functional components and hooks a try, this is how your code would look like as a functional component after some clean up

(The answer is included in component)

import React, { Component, useEffect, useState } from "react";
import { View, Text, FlatList, Button } from "react-native";
import AsyncStorage from "@react-native-async-storage/async-storage";

const HomeScreen = (props) => {
    const [isLoading, setIsLoading] = useState(true);
    const [listData, setListData] = useState([]);

    useEffect(() => {
        const subscription = props.navigation.addListener("focus", () => {
            checkLoggedIn();
        });
        getData();
        return subscription.remove(); //similar to component unmount, syntax might be different based on your version
    }, []);

    const getData = async () => {
        setIsLoading(true)
        const value = await AsyncStorage.getItem("@session_token");
        return fetch("http://localhost:3333/api/1.0.0/search", {
            headers: {
                "X-Authorization": value,
            },
        })
            .then((response) => {
                if (response.status === 200) {
                    return response.json();
                } else if (response.status === 401) {
                    props.navigation.navigate("Login");
                } else {
                    throw "Something went wrong";
                }
            })
            .then((responseJson) => {
                setIsLoading(false);
                setListData(responseJson);
            })
            .catch((error) => {
                console.log(error);
            });
    };

    const checkLoggedIn = async () => {
        const value = await AsyncStorage.getItem("@session_token");
        if (value == null) {
            props.navigation.navigate("Login");
        }
    };

    return (
        <>
            {isLoading ? (
                <View
                    style={{
                        flex: 1,
                        flexDirection: "column",
                        justifyContent: "center",
                        alignItems: "center",
                    }}
                >
                    <Text>Loading..</Text>
                </View>
            ) : (
                <View
                    style={{
                        flex: 1,
                        justifyContent: "center",
                        alignItems: "center",
                    }}
                >
                    <Text>Welcome to The app </Text>
                    <Button
                        title="Next Page"
                        onPress={() => {
                            props.navigation.navigate("yourScreenName");
                        }}
                    />
                </View>
            )}
        </>
    );
};

export default HomeScreen;

since you screens are

<Drawer.Screen name="Home" component={HomeScreen} />
<Drawer.Screen name="Login" component={LoginScreen} />
<Drawer.Screen name="Signup" component={SignupScreen} />
<Drawer.Screen name="Logout" component={LogoutScreen} />
//you can add more screens here just make sure to import them first
//example
<Drawer.Screen name="Example" component={ExampleScreen} />
// name will be the name you use to navigate to that screen
// component should have the screen you imported

then you should pass one of those names to props.navigation.navigate() so the button would be

<Button
   title="Next Page"
   onPress={() => {
      props.navigation.navigate("Login");
   }}
/>

CodePudding user response：

If you want to stick with a class component, then :

import {TouchableOpacity} from "react-native"

In the else part,

<TouchableOpacity style ={{width:100, height:100}} onPress={()=>{this.props.navigation.navigate("screenname")}}></TouchableOpacity>

TouchableOpacity is a blank space on the screen, which can be styled easily, and you have an onPress event. Basically it's like a better version of a button. You can also place other components inside the TouchableOpacity, and make the whole thing clickable