Basic product Scroll and Filtering

apps/expo/app.config.ts

@@ -1,6 +1,7 @@
 import { ExpoConfig, ConfigContext } from "@expo/config";
 
-const CLERK_PUBLISHABLE_KEY = "your-clerk-publishable-key";
+const CLERK_PUBLISHABLE_KEY =
+  "pk_test_ZXBpYy1jaWNhZGEtNzAuY2xlcmsuYWNjb3VudHMuZGV2JA";
 
 const defineConfig = (_ctx: ConfigContext): ExpoConfig => ({
   name: "expo",

apps/expo/index.ts

@@ -1,6 +1,6 @@
 import { registerRootComponent } from "expo";
 
-import { App } from "./src/_app";
+import App from "./src/_app";
 
 // registerRootComponent calls AppRegistry.registerComponent('main', () => App);
 // It also ensures that whether you load the app in Expo Go or in a native build,

apps/expo/src/_app.tsx

@@ -1,31 +1,24 @@
 import { StatusBar } from "expo-status-bar";
 import React from "react";
-import { SafeAreaProvider } from "react-native-safe-area-context";
-import { TRPCProvider } from "./utils/trpc";
 
-import { HomeScreen } from "./screens/home";
-import { SignInSignUpScreen } from "./screens/signin";
-import { ClerkProvider, SignedIn, SignedOut } from "@clerk/clerk-expo";
+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";
 
-export const App = () => {
+function App() {
   return (
     <ClerkProvider
       publishableKey={Constants.expoConfig?.extra?.CLERK_PUBLISHABLE_KEY}
       tokenCache={tokenCache}
     >
-      <SignedIn>
-        <TRPCProvider>
-          <SafeAreaProvider>
-            <HomeScreen />
-            <StatusBar />
-          </SafeAreaProvider>
-        </TRPCProvider>
-      </SignedIn>
-      <SignedOut>
-        <SignInSignUpScreen />
-      </SignedOut>
+      <TRPCProvider>
+        <HomeScreen />
+        <StatusBar />
+      </TRPCProvider>
     </ClerkProvider>
   );
-};
+}
+
+export default App;

apps/expo/src/screens/home.tsx

@@ -1,16 +1,60 @@
-import React from "react";
-
-import { Button, Text, TextInput, TouchableOpacity, View } from "react-native";
-import { useAuth } from "@clerk/clerk-expo";
+import React, { useMemo, useState } from "react";
+import { FlatList, Text, View, Image, TextInput } from "react-native";
 import { SafeAreaView } from "react-native-safe-area-context";
-import { FlashList } from "@shopify/flash-list";
-import type { inferProcedureOutput } from "@trpc/server";
-import type { AppRouter } from "@acme/api";
+import { trpc } from "../utils/trpc";
+import { inferProcedureOutput } from "@trpc/server";
+import { AppRouter } from "@acme/api";
+
+function HomeScreen() {
+  const { data } = trpc.item.all.useQuery();
+
+  const [nameFilter, setNameFilter] = useState("");
+
+  const filteredData = useMemo(
+    () =>
+      data?.filter((item) =>
+        item.name.toLowerCase().includes(nameFilter.toLocaleLowerCase()),
+      ) ?? [],
+    [nameFilter, data],
+  );
 
-export const HomeScreen = () => {
   return (
-    <SafeAreaView className="bg-[#2e026d] bg-gradient-to-b from-[#2e026d] to-[#15162c]">
-      <View className="h-full w-full p-4">Home Screen</View>
+    <SafeAreaView className="px-2">
+      <TextInput
+        className="my-2 rounded border py-1 pl-3"
+        placeholder="Busca un Producto"
+        onChangeText={setNameFilter}
+      />
+      <FlatList
+        data={filteredData}
+        renderItem={(item) => (
+          <View className="w-[49%]">
+            <ProductCard item={item.item} key={item.item.id} />
+          </View>
+        )}
+        ItemSeparatorComponent={() => <View className="h-2 w-[2%]" />}
+        numColumns={2}
+        columnWrapperStyle={{ justifyContent: "space-between" }}
+      />
     </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>
+  );
+}
+
+export default HomeScreen;