I cant get .map work in React Native -- undefined is not a function (near '..._products.default.map...')

Question

I just started learning React Native but i cant figure out how to use.map in it and i get this error

undefined is not a function (near '..._products.default.map...')

// products.js
const products = [
  {
    _id: "1",
    name: "Blue and Red",
    image: "./images/Epic Venge logo.png",
    description: "Blue and Red",
    brand: "Old",
    category: "Logos",
    price: 19.99,
    countInStock: 10,
    rating: 3.5,
    numReviews: 12,
  },
];

// HomePage.js
import products from "../products";
import ProductCard from "../components/ProductCard";

export default function HomePage({ navigation }) {
  return (
    <DismissKeyboard>
      <View>
        <Header />
        {products.map((product) => (
          <View key={product._id}>
            <ProductCard product={product} />
          </View>
        ))}
      </View>
  );
}

// ProductPage.js
export default function ProductPage({ navigation }) {
  return (
    <SafeAreaView>
      <Text onPress={() => navigation.push("Home")}>It Worked!!</Text>
    </SafeAreaView>
  );
}

Answer 1

You are not exporting products.js

// products.js
export const products = [
  {
    _id: "1",
    name: "Blue and Red",
    image: "./images/Epic Venge logo.png",
    description: "Blue and Red",
    brand: "Old",
    category: "Logos",
    price: 19.99,
    countInStock: 10,
    rating: 3.5,
    numReviews: 12,
  },
];

then import it like so

import { products } from "./products";