I am facing the issue while trying to navigate to pages using carousel

Question

the error is undefined is not an object (evaluating '_this2.props')not able to navigate to the respected pages through carousel using the navigation tried passing navigation through props even not working at all

Home.js

import {
  StyleSheet,
  View,
  Text,
  FlatList,
  Image,
  SafeAreaView,
  ScrollView,
  Dimensions,
  TouchableOpacity,
} from "react-native";
import { useState } from "react";
import MyCarousel from "../Components/CarouselCards";
export default function Home({ navigation }) {
  const [men, setMen] = useState([
    {
      image:

• List item

       "https://ae01.alicdn.com/kf/HTB1bCH7KamWBuNjy1Xaq6xCbXXaj/316L-titanium-stainless-steel-bracelet-men-gold-chain-bracelets-bangles-hippop-punk-fashion-mens-jewelry-22cm.jpg",
     name: "Bracelet",
     id: "1",
   },
   {
     image: "https://i.ebayimg.com/images/i/172413460700-0-1/s-l1000.jpg",
     name: "Chain",
     id: "2",
   },
   {
     image:
       "https://img-new.cgtrader.com/items/665880/8606ad05ed/designer-rings-for-men-3d-model-stl-3dm.jpg",
     name: "Ring",
     id: "3",
   },
   {
     image:
       "https://i5.walmartimages.com/asr/1a74652a-dbb7-4755-9d3d-296b98cb2782_1.8f29f00678708fca749418288479e302.jpeg",
     name: "Fashion Jewellery",
     id: "4",
   },
  

  ]); const [wedding, setWedding] = useState([ { image: "https://www.brilliance.com/sites/default/files/recently-purchased-rings/gleaming-pave-setting-3-carat-diamond-ring/179899-3-carat-round-pave-diamond-engagement-1.jpg", name: "Wedding Rings", id: "1", }, { image: "https://cdn.shopify.com/s/files/1/0001/8241/9514/products/[email protected]", name: "Bridal Jewellery Set", id: "2", }, { image: "https://www.langantiques.com/media/catalog/product/e/d/edwardian-platinum-diamond-necklace-1_2_90-1-11136.jpg", name: "Platinum", id: "3", }, { image: "https://i.pinimg.com/originals/60/b4/a9/60b4a92ed7e154e22047b3833f47cf19.jpg", name: "Modern Bridal Set", id: "4", }, ]); const [jewel, setJewel] = useState([ { image: "https://m.media-amazon.com/images/I/81LMvUUqQ3L.UL1500.jpg", name: "Necklace", id: "1", }, { image: "https://www.kalyanjewellers.net/images/Jewellery/Gold/images/kajjara-nimah-gold-jhumka.jpg", name: "Earrings", id: "2", }, { image: "https://n3.sdlcdn.com/imgs/i/b/7/Sukkhi-Fancy-Gold-Plated-Mangalsutra-SDL981550473-3-597d7.jpeg", name: "Mangalsutra", id: "3", }, { image: "https://images-na.ssl-images-amazon.com/images/I/71F3eKfGedL.AC_UL1072.jpg", name: "Bangles", id: "4", }, { image: "https://www.vam.ac.uk/on/demandware.static/-/Sites-VAM_Storefront/default/dw88c1556f/images/category/jewellery/jewellery_homepage_desktop.jpg", name: "Fashionable", id: "5", }, { image: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ0ztfp1Vm7pj0qMlTor_h9_ieuZYA4m1CC3w&usqp=CAU", name: "Pendents", id: "6", }, ]); return ( <ScrollView style={{ height: Dimensions.get("window").height / 1.17 }}> <View style={{ backgroundColor: "white" }}> <View style={{ marginTop: 6, backgroundColor: "#eee", height: Dimensions.get("window").height / 1.6, }} > Women's Fashion Jewellery <View style={{ height: Dimensions.get("window").height / 2 }}> <FlatList numColumns={3} keyExtractor={(item) => item.id} data={jewel} renderItem={({ item }) => ( <TouchableOpacity onPress={() => { navigation.navigate("ProductList", { name: item.name }); }} > <Image source={{ uri: item.image }} style={styles.jewel} /> <Text style={{ color: "#888", marginVertical: 6 }}> {item.name} )} scrollEnabled={false} /> <View style={{ marginTop: 6, backgroundColor: "#eee" }}> Wedding Jewellery <View style={{ height: Dimensions.get("window").height / 1.2 }}> <FlatList numColumns={2} keyExtractor={(item) => item.id} data={wedding} renderItem={({ item }) => ( <TouchableOpacity onPress={() => { navigation.navigate("ProductList", { name: item.name }); }} > <Image source={{ uri: item.image }} style={{ height: Dimensions.get("window").height / 3, width: Dimensions.get("window").width / 2.5, marginHorizontal: 20, marginVertical: 10, borderRadius: 12, }} /> <Text style={{ color: "#888", marginVertical: 6 }}> {item.name} )} scrollEnabled={false} /> <View style={{ marginTop: 6, backgroundColor: "#eee" }}> Men's Fashion Jewellery <View style={{ height: Dimensions.get("window").height / 1.2 }}> <FlatList numColumns={2} keyExtractor={(item) => item.id} data={men} renderItem={({ item }) => ( <TouchableOpacity onPress={() => { navigation.navigate("ProductList", { name: item.name }); }} > <Image source={{ uri: item.image }} style={{ height: Dimensions.get("window").height / 3, width: Dimensions.get("window").width / 2.5, marginHorizontal: 20, marginVertical: 10, borderRadius: 12, }} /> <Text style={{ color: "#888", marginVertical: 6 }}> {item.name} )} scrollEnabled={false} /> ); }

  const styles = StyleSheet.create({ container: { height: 200, backgroundColor: "#FFE4E1", }, text: { fontSize: 16, textAlign: "center", margin: 10, }, jewel: { height: Dimensions.get("window").height / 5.5, width: Dimensions.get("window").width / 3.55, margin: 10, borderRadius: 12, }, grid: { justifyContent: "space-evenly", alignItems: "center", } });

navigation.js `

    import * as React from "react";

import { NavigationContainer } from "@react-navigation/native";
import { createDrawerNavigator } from "@react-navigation/drawer";
import { createNativeStackNavigator } from "@react-navigation/native-stack";
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import { FontAwesome } from "@expo/vector-icons";
import { MaterialCommunityIcons } from "@expo/vector-icons";
import { Fontisto } from "@expo/vector-icons";
import ProductList from "../Screens/ProductList";
import Product from "../Screens/Product";
import Home from "../Screens/Home";
import Register from "../Screens/Register";
import Login from "../Screens/login";
import Header from "../Components/Header";
import AboutUs from "../Screens/AboutUs";
import Signup from "../Screens/SignUp";

const Drawer = createDrawerNavigator();
function StartPage() {
  return (
    <Drawer.Navigator initialRouteName="Register">
      <Drawer.Screen
        name="Register"
        component={Register}
        options={{
          headerShown: false,
        }}
      />
      <Drawer.Screen
        name="Login"
        component={Login}
        options={{
          headerShown: false,
        }}
      />
      <Drawer.Screen
        name="SignUp"
        component={Signup}
        options={{
          headerShown: false,
        }}
      />
      <Drawer.Screen
        name="Home"
        component={JewelleryTabs}
        options={{
          headerTitle: () => <Header text="Radhika gold plated Jewellery" />,
          headerTintColor: "#000",
          headerStyle: {
            backgroundColor: "#FFE4E1",
          },
        }}
      />
    </Drawer.Navigator>
  );
}

const Tab = createBottomTabNavigator();

function JewelleryTabs() {
  return (
    <Tab.Navigator
      independent={true}
      screenOptions={{
        headerShown: false,
        tabBarActiveTintColor: "#444",
        tabBarInactiveTintColor: "#999",
        tabBarStyle: { backgroundColor: "#FFE4E1" },
      }}
      initialRouteName="Home"
    >
      <Tab.Screen
        name="HomeScreen"
        component={Home}
        options={{
          tabBarLabel: "Home",
          tabBarIcon: ({ color, size }) => (
            <MaterialCommunityIcons name="home" color={color} size={size} />
          ),
        }}
      />
      <Tab.Screen
        name="Orders"
        component={Home}
        options={{
          tabBarLabel: "Orders",
          tabBarIcon: ({ color }) => (
            <Fontisto name="shopping-bag-1" color={color} size={20} />
          ),
        }}
      />
      <Tab.Screen
        name="Wishlist"
        component={Home}
        options={{
          tabBarIcon: ({ color }) => (
            <MaterialCommunityIcons
              name="storefront-outline"
              size={24}
              color={color}
            />
          ),
        }}
      />
      <Tab.Screen
        name="About Us"
        component={AboutUs}
        options={{
          headerShown: false,
          tabBarLabel: "About Us",
          tabBarIcon: ({ color }) => (
            <FontAwesome name="building" color={color} size={20} />
          ),
        }}
      />
    </Tab.Navigator>
  );
}

const Stack = createNativeStackNavigator();

export default function CustomNavigation({ navigation, route }) {
  return (
    <NavigationContainer independent={true}>
      <Stack.Navigator initialRouteName="Start">
        <Stack.Screen
          name="ProductList"
          component={ProductList}
          options={({ route }) => ({
            headerTitle: () => <Header text={route.params.name} />,
            headerTintColor: "#000",
          })}
        />
        <Stack.Screen
          name="Product"
          component={Product}
          options={({ route }) => ({
            headerTitle: () => <Header text={route.params.name} />,
            headerTintColor: "#000",
          })}
        />
        <Stack.Screen
          name="Start"
          component={StartPage}
          options={{ headerShown: false }}
        />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

carousel.js

    import * as React from "react";
import { Box, AspectRatio } from "native-base";
import {
  View,
  SafeAreaView,
  Image,
  Dimensions,
  TouchableOpacity,
} from "react-native";

import Carousel from "react-native-snap-carousel";

const { width } = Dimensions.get("window");
export default class MyCarousel extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      activeIndex: 0,
      carouselItems: [
        {
          url: "https://challanijewels-website.s3.amazonaws.com/images/ChallaniJewellers/challani_day_3_125114_copy1.jpg",
          page: "Bridal Jewellery Set",
        },
        {
          url: "https://www.totaramsons.com/images/new-bannaer-2.jpg",
          page: "Modern Bridal Set",
        },
        {
          url: "http://opencart.multipurposethemes.com/jewelrythemes/oc04/image/cache/catalog/Data/slider/slide-1-1820x750.png",
          page: "Modern Bridal Set",
        },
        {
          url: "https://i.pinimg.com/originals/e2/e9/e5/e2e9e506991481015588a7df31c825aa.jpg",
          page: "Earrings",
        },
        {
          url: "https://www.dukesjewelers.com/media/slides/banner-stuller-wedding-bands.jpg",
          page: "Wedding Rings",
        },
      ],
    };
  }

  _renderItem({ item, index }) {
    return (
      <Box
        maxW="100%"
        rounded="lg"
        overflow="hidden"
        borderColor="coolGray.200"
        borderWidth="1"
        _dark={{
          borderColor: "coolGray.600",
          backgroundColor: "gray.700",
        }}
        _web={{
          shadow: 2,
          borderWidth: 0,
        }}
        _light={{
          backgroundColor: "gray.50",
        }}
      >
        <TouchableOpacity
          onPress={() =>
            this.props.navigation.navigate("ProductList", { name: item.page })
          }
        >
          <AspectRatio ratio={21 / 9}>
            <Image
              source={{
                uri: item.url,
              }}
              alt="image"
            />
          </AspectRatio>
        </TouchableOpacity>
      </Box>
    );
  }

  render() {
    return (
      <SafeAreaView style={{ flex: 1 }}>
        <View
          style={{
            flex: 1,
            flexDirection: "row",
            justifyContent: "center",
            alignItems: "center",
          }}
        >
          <Carousel
            layout={"default"}
            ref={(ref) => (this.carousel = ref)}
            data={this.state.carouselItems}
            sliderWidth={width}
            itemWidth={width}
            renderItem={this._renderItem}
            onSnapToItem={(index) => this.setState({ activeIndex: index })}
            autoplay={true}
            loop={true}
          />
        </View>
      </SafeAreaView>
    );
  }
}