undefined is not an object navigation.navigate

Question

I am using react navigation in react native and I am able to move between certain screens. However on my Dashboard.js I am using a ternary to render the Borrower.js component which has icons. When I press on the Pay Debt icon it's suppose to bring me to the home screen component but I am getting the following message "undefined is not an object navigation.navigate". I tried to deconstruct navigation as a prop and then as a parameter in the onPress function but it does not work and hence deleted that code. What am I doing wrong?

App.js

import "react-native-gesture-handler";
import { NavigationContainer } from "@react-navigation/native";
import { createStackNavigator } from "@react-navigation/stack";
import React from "react";
import { StyleSheet } from "react-native";
import { ScreenStack } from "react-native-screens";
import Login from "./Login";
import Join from "./Join";
import Home from "./Home";
import Dashboard from "./Dashboard";
import BorrowMap from "./BorrowMap";
import SpotRequest from "./SpotRequest";

const Stack = createStackNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen
          name="Home"
          component={Home}
          options={{ title: "Welcome" }}
        />
        <Stack.Screen
          name="Login"
          component={Login}
          options={{ title: "Login" }}
        />
        <Stack.Screen
          name="Join"
          component={Join}
          options={{ title: "Register" }}
        />
        <Stack.Screen
          name="Dashboard"
          component={Dashboard}
          options={{ title: "Dashboard" }}
        />
        <Stack.Screen
          name="Spot Request"
          component={SpotRequest}
          options={{ title: "Spot Request Details" }}
        />
        <Stack.Screen
          name="Finding Buddy"
          component={BorrowMap}
          options={{ title: "Finding Buddy" }}
        />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },
});

Dashboard.js

import React from "react";
import { StyleSheet, Text, View, Switch } from "react-native";
import { ScrollView } from "react-native-gesture-handler";
import { Icon } from "react-native-elements";
import { Avatar, Accessory, Header, Divider } from "react-native-elements";
import { useState } from "react";
import BorrowerDash from "./BorrowerDash";
import LenderDash from "./LenderDash";

function Dashboard({ navigation }) {
  const [switchValue, setSwitchValue] = useState(false);
  const toggleSwitch = (value) => {
    setSwitchValue(value);
  };
  navigation;
  return (
    <ScrollView contentContainerStyle={styles.container}>
      <View style={styles.container}>
        <View style={styles.row}>
          <View style={styles.avatar}>
            <Avatar
              size={35}
              rounded
              title="KM"
              source={{
                uri: "KM",
              }}
            ></Avatar>
          </View>

          <Switch
            style={styles.switch}
            onValueChange={toggleSwitch}
            value={switchValue}
          />
          <View>
            {switchValue ? (
              <Text style={styles.portalSwitch}>Lender</Text>
            ) : (
              <Text style={styles.portalSwitch}>Borrower</Text>
            )}
            <View style={styles.ratingRow}>
              <View style={styles.ratingSpace}>
                <Icon name="star" size={10} type="font-awesome" color="gold" />
              </View>
              <View style={styles.ratingSpace}>
                <Icon name="star" size={10} type="font-awesome" color="gold" />
              </View>
              <View style={styles.ratingSpace}>
                <Icon name="star" size={10} type="font-awesome" color="gold" />
              </View>
              <View style={styles.ratingSpace}>
                <Icon name="star" size={10} type="font-awesome" color="gold" />
              </View>
            </View>
          </View>
        </View>

        {/* <Text style={styles.iconRatingText}>Rating</Text> */}
        {switchValue ? (
          <Text style={styles.iconText}>Spot</Text>
        ) : (
          <Text style={styles.iconText}>Owe</Text>
        )}
        <View style={styles.row}>
          {switchValue ? (
            <Text style={styles.dashTitle}>
              <Text style={styles.spotColor}>$650.00</Text>
            </Text>
          ) : (
            <Text style={styles.dashTitle}>
              <Text style={styles.oweColor}>$305.47</Text>
            </Text>
          )}
        </View>
        {!switchValue ? <BorrowerDash /> : <LenderDash />}
      </View>
    </ScrollView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "white",
    alignItems: "center",
    justifyContent: "space-evenly",
  },

  header: {
    height: "20px !important",
  },

  avatar: {
    marginRight: 0,
    marginTop: 5,
    marginLeft: 10,
  },

  switch: {
    marginTop: 5,
    marginLeft: 130,
    marginRight: 80,
  },

  switchText: {
    marginBottom: 30,
  },

  portalSwitch: {
    marginRight: 20,
    padding: 10,
    color: "black",
    fontWeight: "bold",
  },

  welcome: {
    fontSize: 35,
    fontWeight: "bold",
    marginBottom: 1,
    marginTop: 5,
    marginLeft: 0,
  },
  dashTitle: {
    fontSize: 80,
    color: "black",
    fontWeight: "normal",
    marginBottom: 1,
    marginTop: 2,
    padding: 15,
  },

  lendColor: {
    color: "#28a745",
    borderRightColor: "gray",
    borderRightWidth: 10,
  },

  oweColor: {
    color: "#343d47",
  },

  spotColor: {
    color: "#343d47",
  },

  button: {
    alignItems: "center",
    justifyContent: "center",
    backgroundColor: "#28a745",
    padding: 10,
    width: 375,
    height: 50,
    marginBottom: 5,
    borderRadius: 5,
  },

  buttonText: {
    color: "white",
    fontWeight: "bold",
  },

  row: {
    flexDirection: "row",
    justifyContent: "space-between",
    marginBottom: 30,
  },

  ratingRow: {
    flexDirection: "row",
    justifyContent: "center",
    marginBottom: 1,
  },
  iconText: {
    textAlign: "center",
    fontWeight: "bold",
    color: "gray",
  },
  iconRatingText: {
    textAlign: "center",
    fontWeight: "bold",
    color: "gray",
    marginBottom: 20,
  },
  iconSpace: {
    marginLeft: 5,
    marginRight: 5,
    padding: 2,
  },

  ratingSpace: {
    marginLeft: 1,
    marginRight: 1,
  },

  iconAlert: {},
});

export default Dashboard;

import React from "react";
import { StyleSheet, Text, View } from "react-native";
import { ScrollView } from "react-native-gesture-handler";
import { Icon } from "react-native-elements";
import { useState } from "react";


function BorrowerDash({navigation}) {
  const [switchValue, setSwitchValue] = useState(false);
  const toggleSwitch = (value) => {
    setSwitchValue(value);
  };

  return (
    <ScrollView>
      <View style={styles.container}>
        <View style={styles.row}>
          <View style={styles.iconSpace}>
            <Icon
              name="message"
              size={60}
              color="#28a745"
              underlayColor="#be748b"
            />
            <Text style={styles.iconText}>Messages</Text>
          </View>

          <View style={styles.iconSpace}>
            <Icon
              name="redeem"
              size={60}
              color="#28a745"
              onPress={() =>
                navigation.navigate("Spot Request", {
                  name: "Spot Request Details",
                })
              }
            />
            <Text style={styles.iconText}>Borrow</Text>
          </View>
          <View style={styles.iconSpace}>
            <Icon name="history" size={60} color="#28a745" color="#28a745" />
            <Text style={styles.iconText}>Activity</Text>
          </View>
          <View style={styles.iconSpace}>
            <Icon
              name="monetization-on"
              size={60}
              color="#28a745"
              onPress={() =>
                navigation.navigate("Home", { name: "Home" })
              }
            />
            <Text style={styles.iconText}>Pay Debt</Text>
          </View>
        </View>
        <View style={styles.row}>
          <View style={styles.iconSpace}>
            <Icon name="person" size={60} color="#28a745" />
            <Text style={styles.iconText}>Profile</Text>
          </View>
          <View style={styles.iconSpace}>
            <Icon name="payment" size={60} color="#28a745" />
            <Text style={styles.iconText}>Card Info</Text>
          </View>
          <View style={styles.iconSpace}>
            <Icon
              name="file-text-o"
              size={60}
              color="#28a745"
              type="font-awesome"
              onPress={() => navigation.navigate("Home", { name: "Home" })}
            />
            <Text style={styles.iconText}>Docs</Text>
          </View>
          <View style={styles.iconSpace}>
            <Icon name="block" size={60} color="#28a745" color="#28a745" />
            <Text style={styles.iconText}>Block</Text>
          </View>
        </View>
        <View style={styles.row}>
          <View style={styles.iconSpace}>
            <Icon name="search" size={60} type="font-awesome" color="#28a745" />
            <Text style={styles.iconText}>Search</Text>
          </View>
        </View>
      </View>
    </ScrollView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "white",
    alignItems: "center",
    justifyContent: "space-evenly",
  },

  header: {
    height: "20px !important",
  },

  welcome: {
    fontSize: 35,
    fontWeight: "bold",
    marginBottom: 1,
    marginTop: 5,
    marginLeft: 0,
  },
  dashTitle: {
    fontSize: 20,
    color: "gray",
    fontWeight: "bold",
    marginBottom: 1,
    marginTop: 2,
    padding: 10,
  },

  lendColor: {
    color: "#28a745",
    borderRightColor: "gray",
    borderRightWidth: 10,
  },

  oweColor: {
    color: "crimson",
  },

  button: {
    alignItems: "center",
    justifyContent: "center",
    backgroundColor: "#28a745",
    padding: 10,
    width: 375,
    height: 50,
    marginBottom: 5,
    borderRadius: 5,
  },

  buttonText: {
    color: "white",
    fontWeight: "bold",
  },

  row: {
    flexDirection: "row",
    justifyContent: "space-between",
    marginBottom: 50,
  },
  iconText: {
    textAlign: "center",
    fontWeight: "bold",
    color: "gray",
  },
  iconSpace: {
    marginLeft: 10,
    marginRight: 10,

    padding: 5,
  },

  iconAlert: {},
});

export default BorrowerDash;

Answer 1

You can fix that by passing navigation to the <BorrowerDash /> and <LenderDash />

in Dashboard.js :

//...
  {
    !switchValue ? (
      <BorrowerDash navigation={navigation} />
    ) : (
      <LenderDash navigation={navigation} />
    );
  }

//...