ProductCard List in Selector page.

Added Product List and Tab Navigation

apps/expo/package.json

@@ -15,6 +15,8 @@
     "@acme/api": "*",
     "@acme/tailwind-config": "*",
     "@clerk/clerk-expo": "^0.17.7",
+    "@react-navigation/bottom-tabs": "^6.5.11",
+    "@react-navigation/native": "^6.1.9",
     "@shopify/flash-list": "^1.4.0",
     "@tanstack/react-query": "^4.16.1",
     "@trpc/client": "^10.1.0",
@@ -31,7 +33,8 @@
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-native": "0.70.5",
-    "react-native-safe-area-context": "4.4.1",
+    "react-native-safe-area-context": "4.5.0",
+    "react-native-screens": "~3.20.0",
     "react-native-web": "~0.18.10"
   },
   "devDependencies": {

apps/expo/src/_app.tsx

@@ -1,11 +1,14 @@
-import { StatusBar } from "expo-status-bar";
 import React from "react";
 
 import { ClerkProvider } from "@clerk/clerk-expo";
 import { tokenCache } from "./utils/cache";
 import Constants from "expo-constants";
 import HomeScreen from "./screens/home";
 import { TRPCProvider } from "./utils/trpc";
+import { NavigationContainer } from "@react-navigation/native";
+import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
+
+const Tab = createBottomTabNavigator();
 
 function App() {
   return (
@@ -14,8 +17,11 @@ function App() {
       tokenCache={tokenCache}
     >
       <TRPCProvider>
-        <HomeScreen />
-        <StatusBar />
+        <NavigationContainer>
+          <Tab.Navigator>
+            <Tab.Screen name="Selector" component={HomeScreen} />
+          </Tab.Navigator>
+        </NavigationContainer>
       </TRPCProvider>
     </ClerkProvider>
   );

apps/expo/src/components/ProductCard.tsx

@@ -0,0 +1,47 @@
+import type { AppRouter } from "@acme/api";
+import type { inferProcedureOutput } from "@trpc/server";
+import { memo } from "react";
+import { View, Image, Text } from "react-native";
+
+export interface ProductCardProps {
+  item: inferProcedureOutput<AppRouter["item"]["byId"]>;
+}
+
+function ProductCard({ item }: ProductCardProps) {
+  const hasStock = item.stock.greaterThan(0);
+
+  return (
+    <View className="flex flex-row items-center rounded border border-gray-200 bg-white p-2 py-4 shadow">
+      <Image
+        source={{ uri: item.image_url ?? "" }}
+        className="h-20 w-20"
+        resizeMode="contain"
+      />
+      <View className="flex h-full items-start ">
+        <Text numberOfLines={1} className="text-base font-semibold">
+          {item.name}
+        </Text>
+
+        {hasStock && (
+          <Text numberOfLines={1} className="font-base text-lg">
+            {item.price ? `C$ ${item.price}` : "Free"}
+          </Text>
+        )}
+
+        <View>
+          {hasStock ? (
+            <Text className="text-base text-green-900">
+              {item.stock.toNumber()} Disponible
+            </Text>
+          ) : (
+            <View>
+              <Text className="text-base text-red-900">No Disponible</Text>
+            </View>
+          )}
+        </View>
+      </View>
+    </View>
+  );
+}
+
+export default memo(ProductCard);

apps/expo/src/screens/home.tsx

@@ -1,9 +1,7 @@
 import React, { useMemo, useState } from "react";
 import { FlatList, Text, View, Image, TextInput } from "react-native";
-import { SafeAreaView } from "react-native-safe-area-context";
 import { trpc } from "../utils/trpc";
-import { inferProcedureOutput } from "@trpc/server";
-import { AppRouter } from "@acme/api";
+import ProductCard from "../components/ProductCard";
 
 function HomeScreen() {
   const { data } = trpc.item.all.useQuery();
@@ -19,40 +17,20 @@ function HomeScreen() {
   );
 
   return (
-    <SafeAreaView className="px-2">
+    <View className="flex-1 bg-gray-50 px-2">
       <TextInput
-        className="my-2 rounded border py-1 pl-3"
+        className="my-2 rounded border border-gray-200 bg-white py-1.5 pl-3 shadow-lg"
         placeholder="Busca un Producto"
         onChangeText={setNameFilter}
       />
       <FlatList
         data={filteredData}
         renderItem={(item) => (
-          <View className="w-[49%]">
-            <ProductCard item={item.item} key={item.item.id} />
-          </View>
+          <ProductCard item={item.item} key={item.item.id} />
         )}
-        ItemSeparatorComponent={() => <View className="h-2 w-[2%]" />}
-        numColumns={2}
-        columnWrapperStyle={{ justifyContent: "space-between" }}
+        ItemSeparatorComponent={() => <View className="mt-2.5" />}
+        ListFooterComponent={() => <View className="mt-2.5" />}
       />
-    </SafeAreaView>
-  );
-}
-
-export interface ProductCardProps {
-  item: inferProcedureOutput<AppRouter["item"]["byId"]>;
-}
-
-function ProductCard({ item }: ProductCardProps) {
-  return (
-    <View className="rounded border border-gray-400 px-2 py-2">
-      <Image
-        source={{ uri: item.image_url ?? "" }}
-        className="h-16"
-        resizeMode="contain"
-      />
-      <Text numberOfLines={1}>{item.name}</Text>
     </View>
   );
 }