How to navigate in react native

Question

Whan, you click the text "create a new one" or "login" you can switch the screen once and back to the original, but then it stops working is till se AndoidToast but it just doesn't switch back, I am using expo bdw.

is there any library that has to import or something that is wrong with the code, I found this on react-navigation..

There is index.js

import React from 'react';
import { Text, View, StyleSheet, TextInput, Button, ToastAndroid } from 'react-native';
//import Icon from 'react-native-vector-icons/FontAwesome';
//import { Button } from 'react-native-elements';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';


import { initializeApp } from "firebase/app";
import { getDatabase, ref, set,  } from "firebase/database";
const Stack = createNativeStackNavigator();
const firebaseConfig = {
  // we aint doing that
};
const app = initializeApp(firebaseConfig);
const db = getDatabase(app);


// set(ref(db, 'users/' + "userId"), {
//     username: "name",
//     email: "email",
//     profile_picture : "imageUrl"
//   });

ToastAndroid.show("app started", ToastAndroid.SHORT);




const MainSceen = ({ navigation }) => {

  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen
          name="Login"
          component={LoginSceen}
          options={{ title: 'Login' }}
        />
        <Stack.Screen
          name="SignUp"
          component={SignupScreeen}
          options={{ title: 'SignUp' }}
        />
      </Stack.Navigator>
    </NavigationContainer>
  )
}







const LoginSceen = ({ navigation }) => {
  // function signup() {
  //   // signup button..
  //   ToastAndroid.show("A pikachu appeared nearby !", ToastAndroid.SHORT);
  //   usersRef.set({
  //     alanisawesome: {
  //       date_of_birth: 'June 23, 1912',
  //       full_name: 'Alan Turing'
  //     },
  // }

  handleClick = () => {
         ToastAndroid.show("Clicked!", ToastAndroid.SHORT);
         navigation.navigate("SignUp")
          }
  return (
    <View>
      <Text style={styles.title1}>LogIn</Text>
      <Text style={styles.text2}>Username</Text>
      <TextInput style={styles.input} placeholder="John" />
      <Text style={styles.text3}>Password</Text>
      <TextInput style={styles.input} placeholder="********" />
      <Text style={styles.text4}>You dont have an account yet? <Text style={styles.link1} onPress={() => handleClick(this)} >Create One.</Text> </Text>
      <View style={styles.button1}>
        <Button style={styles.button2} title="LogIn"     />
      </View>

    </View>
  )
}
const SignupScreeen = ({ navigation }) => {
  // function signup() {
  //   // signup button..
  //   ToastAndroid.show("A pikachu appeared nearby !", ToastAndroid.SHORT);
  //   usersRef.set({
  //     alanisawesome: {
  //       date_of_birth: 'June 23, 1912',
  //       full_name: 'Alan Turing'
  //     },
  // }

  handleClick = () => {
         ToastAndroid.show("Clicked!", ToastAndroid.SHORT);
         navigation.navigate("Login")
          }
  return (
    <View>
      <Text style={styles.title1}>SignUp</Text>
      <Text style={styles.text2}>Username</Text>
      <TextInput style={styles.input} placeholder="John" />
      <Text style={styles.text3}>Password</Text>
      <TextInput style={styles.input} placeholder="********" />
      <Text style={styles.text4}>You alrady have an account? <Text  onPress={() => handleClick(this)} style={styles.link1} >Login.</Text> </Text>
      <View style={styles.button1}>
        <Button style={styles.button2} title="LogIn"     />
      </View>

    </View>
  )
}

const styles = StyleSheet.create({


// i deleted style BCS it was to much code to post in StackOverflow
  

  
});

export default MainSceen;

Answer 1

Do this

<Text style={styles.text4}>You alrady have an account? <Text  onPress={() => navigation.navigate("Login")} style={styles.link1} >Login.</Text> </Text>

or

const handleClick = () =>{
    ToastAndroid.show("Clicked!", ToastAndroid.SHORT);
    navigation.navigate("Login")
}

<Text style={styles.text4}>You alrady have an account? <Text  onPress={() => handleClick()} style={styles.link1} >Login.</Text> </Text>