How can i fix this error undefined is not an object(evaluating'navigation.Navigate')?

Question

I am new to react native, working on a project I have completed all the screens of my project but when I want to navigate to a different screen I am getting this error on clicking the button instead of switching screen. This is my app.js code

import { StatusBar } from "expo-status-bar";
import React from "react";
import Cardlist from "./components/MainMenu";

export default function App() {
  return <Cardlist />;
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    // backgroundColor: 'red',
    alignItems: "center",
    justifyContent: "center",
    width: "100%",
  },
});

This is my button screen, here I have created two buttons at the bottom of the screen and when i press the button i am getting the error

import React from "react";
import { View, Text, FlatList, Dimensions, Image } from "react-native";
import { Button } from "react-native-elements";
import { NavigationContainer } from "@react-navigation/native";
import { createStackNavigator } from "@react-navigation/stack";
import CardView from "../CardView";
import LoginScreen from "../Login/login";
import ApplyLoan from "../MainPage/ApplyLoan";
import styles from "./styles";
import imgs from "./imgs";

function BtnScreen({ navigation }) {
  return (
    <View style={styles.btncontainer}>
      <Button
        buttonStyle={styles.loginButton}
        title="Login"
        onPress={() => navigation.Navigate("Login")}
      />

      <Button
        buttonStyle={styles.loginButton}
        title="Apply Now"
        onPress={() => navigation.Navigate("Applynow")}
      ></Button>
    </View>
  );
}

const AuthStack = createStackNavigator();
const Cardlist = (props) => {
  return (
    <View style={styles.button}>
      <View style={styles.container}>
        <Image
          style={styles.logo}
          source={require("../../assets/images/123.jpeg")}
        />
      </View>
      <FlatList
        style={styles.flat}
        data={imgs}
        renderItem={({ item }) => <CardView card={item} />}
        showsVerticalScrollIndicator={false}
        snapToAlignment={"start"}
        decelerationRate={"fast"}
        snapToInterval={Dimensions.get("window").height}
      />

      <BtnScreen />

      <NavigationContainer>
        <AuthStack.Navigator>
          <AuthStack.Screen name="Login" component={LoginScreen} />
          <AuthStack.Screen name="Applynow" component={ApplyLoan} />
        </AuthStack.Navigator>
      </NavigationContainer>
    </View>
  );
};
export default Cardlist;

Answer 1

navigation.navigate('Login')

instead of

navigation.Navigate('Login')

Modify your navigator so BtnScreen is inside AuthStack

 <AuthStack.Navigator initialRouteName="ButtonScreen">
       <AuthStack.Screen name="Login" component={LoginScreen} />
       <AuthStack.Screen name="Applynow" component={ApplyLoan} />
       <AuthStack.Screen name="ButtonScreen" component={BtnScreen} />
       <AuthStack.Screen name="CardList" component={CardList} />
     </AuthStack.Navigator>