fixed display errors

App.tsx

@@ -17,15 +17,15 @@ DefaultTheme.colors.background = '#FFFFFF';
 const App = () => {
   return (
     <NavigationContainer theme={DefaultTheme}>
-      <LoginStack.Navigator initialRouteName="Login">
+      {/* <LoginStack.Navigator initialRouteName="Login">
         <LoginStack.Screen
           name="Login"
           component={LoginScreen}
           options={{ headerShown: false }}
         />
-      </LoginStack.Navigator>
+      </LoginStack.Navigator> */}
 
-      <RootStack.Navigator initialRouteName="Home">
+      <RootStack.Navigator initialRouteName="TreeSearch">
         <RootStack.Screen
           name="Home"
           component={HomeScreen}

app.json

@@ -7,6 +7,7 @@
     "orientation": "portrait",
     "icon": "./assets/bp-icon.png",
     "userInterfaceStyle": "light",
+    "newArchEnabled": true,
     "plugins": [
       [
         "expo-camera",

package.json

@@ -15,32 +15,32 @@
     "pre-commit": "(npm run tsc || true) && (npm run lint:check || true) && npm run prettier:check"
   },
   "dependencies": {
-    "@expo/metro-runtime": "~3.2.3",
-    "@react-native-async-storage/async-storage": "^2.0.0",
+    "@expo/metro-runtime": "~4.0.0",
+    "@react-native-async-storage/async-storage": "1.23.1",
     "@react-navigation/native": "^6.1.18",
     "@react-navigation/native-stack": "^6.11.0",
     "@supabase/supabase-js": "^2.45.6",
     "@types/react-navigation": "^3.0.8",
     "dotenv": "^16.4.5",
-    "expo": "^52.0.7",
-    "expo-auth-session": "~5.5.2",
-    "expo-camera": "~15.0.16",
-    "expo-constants": "~16.0.2",
-    "expo-crypto": "~13.0.2",
-    "expo-dev-client": "~4.0.28",
+    "expo": "~52.0.14",
+    "expo-auth-session": "~6.0.1",
+    "expo-camera": "~16.0.9",
+    "expo-constants": "~17.0.3",
+    "expo-crypto": "~14.0.1",
+    "expo-dev-client": "~5.0.5",
     "expo-dev-launcher": "^5.0.14",
-    "expo-device": "~6.0.2",
-    "expo-status-bar": "~1.12.1",
-    "expo-web-browser": "~13.0.3",
+    "expo-device": "~7.0.1",
+    "expo-status-bar": "~2.0.0",
+    "expo-web-browser": "~14.0.1",
     "nodemon": "^3.1.7",
-    "react": "18.2.0",
-    "react-native": "^0.74.5",
+    "react": "18.3.1",
+    "react-native": "0.76.3",
     "react-native-config": "^1.5.3",
     "react-native-dotenv": "^3.4.11",
     "react-native-gesture-handler": "^2.20.0",
     "react-native-reanimated": "^3.15.4",
-    "react-native-safe-area-context": "^4.10.5",
-    "react-native-screens": "^3.31.1",
+    "react-native-safe-area-context": "4.12.0",
+    "react-native-screens": "~4.1.0",
     "react-native-svg": "^15.7.1",
     "react-native-toast-message": "^2.2.1",
     "react-native-url-polyfill": "^2.0.0",
@@ -52,10 +52,11 @@
     "@babel/core": "^7.24.0",
     "@eslint/js": "^9.9.0",
     "@ianvs/prettier-plugin-sort-imports": "^4.3.1",
-    "@types/react": "~18.2.79",
+    "@types/react": "~18.3.12",
+    "@types/react-dom": "^18.3.1",
     "babel-plugin-module-resolver": "^5.0.2",
     "eslint": "^8.57.0",
-    "eslint-config-expo": "~7.1.2",
+    "eslint-config-expo": "~8.0.1",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-prettier": "^5.2.1",
     "husky": "^9.1.5",

src/components/searchBar.tsx

@@ -1,70 +1,21 @@
-import React, { useState } from 'react';
-import {
-  Button,
-  Modal,
-  Text,
-  TextInput,
-  TouchableOpacity,
-  View,
-} from 'react-native';
+import React from 'react';
+import { TextInput, View } from 'react-native';
 import { styles } from '../screens/TreeSearch/styles';
 
-interface SearchBarProps {
+type SearchBarProps = {
   value: string;
   onChange: (text: string) => void;
-}
+};
 
 const SearchBar: React.FC<SearchBarProps> = ({ value, onChange }) => {
-  const [modalVisible, setModalVisible] = useState(false);
-  const [filterValue, setFilterValue] = useState('');
-
-  const handleFilterChange = (text: string) => {
-    setFilterValue(text);
-  };
-
-  const handleApplyFilter = () => {
-    onChange(filterValue);
-    setModalVisible(false);
-  };
-
   return (
-    <View style={styles.searchContainer}>
-      <View style={{ flexDirection: 'row', alignItems: 'center' }}>
-        <TextInput
-          style={styles.searchBarInput}
-          placeholder="Search species..."
-          value={value}
-          onChangeText={onChange}
-          autoCapitalize="none"
-          autoCorrect={false}
-        />
-        <TouchableOpacity onPress={() => setModalVisible(true)}>
-          <Text>Filter</Text>
-        </TouchableOpacity>
-      </View>
-
-      <Modal
-        transparent={true}
-        visible={modalVisible}
-        animationType="slide"
-        onRequestClose={() => setModalVisible(false)}
-      >
-        <View style={styles.filterOverlay}>
-          <View style={styles.filterContent}>
-            <Text style={styles.filterHeading}>Filter</Text>
-            <TextInput
-              style={styles.searchBarInput}
-              placeholder="Enter filter criteria"
-              value={filterValue}
-              onChangeText={handleFilterChange}
-            />
-            <View style={styles.filterButtons}>
-              <Button title="Apply Filter" onPress={handleApplyFilter} />
-              <Button title="Cancel" onPress={() => setModalVisible(false)} />
-            </View>
-          </View>
-        </View>
-      </Modal>
+    <View>
+      <TextInput
+        style={styles.searchBarInput}
+        placeholder="Search for trees..."
+        value={value}
+        onChangeText={onChange}
+      />
     </View>
   );
 };

src/screens/TreeSearch/TreeSearch.tsx

@@ -19,31 +19,42 @@ type TreeItem = {
   species: string;
   image_url: string;
   sold: boolean;
+  stockCount: number;
 };
 
 export default function TreeSearch({ navigation }: TreeSearchProps) {
   const [trees, setTrees] = useState<TreeItem[]>([]);
   const [searchQuery, setSearchQuery] = useState<string>('');
+  const [loading, setLoading] = useState<boolean>(true);
+  const [error, setError] = useState<string | null>(null);
 
   useEffect(() => {
     const loadTreeData = async () => {
-      const speciesData = await getAllSpecies();
+      try {
+        setLoading(true);
+        const speciesData = await getAllSpecies();
 
-      if (!speciesData || speciesData.length === 0) {
-        console.error('Failed to fetch tree data');
-        return;
-      }
-
-      const treesData: TreeItem[] = speciesData.map((species: any) => ({
-        tree_id: species.id,
-        species: species.name,
-        image_url: species.image,
-        sold: species.sold ?? false,
-      }));
+        if (!speciesData || speciesData.length === 0) {
+          throw new Error('No tree data found');
+        }
 
-      const remainingTrees = treesData.filter(tree => !tree.sold);
+        const treesData: TreeItem[] = speciesData.map((species: any) => ({
+          tree_id: species.id ?? -1,
+          species: species.name ?? 'Unknown Species',
+          image_url: species.image ?? '',
+          sold: species.sold ?? false,
+          stockCount: species.stockCount ?? 0,
+        }));
 
-      setTrees(remainingTrees);
+        const remainingTrees = treesData.filter(tree => !tree.sold);
+        setTrees(remainingTrees);
+        setError(null);
+      } catch (err) {
+        console.error('Failed to fetch tree data:', err);
+        setError('Unable to load tree data. Please try again later.');
+      } finally {
+        setLoading(false);
+      }
     };
 
     loadTreeData();
@@ -53,35 +64,62 @@ export default function TreeSearch({ navigation }: TreeSearchProps) {
     tree.species.toLowerCase().includes(searchQuery.toLowerCase()),
   );
 
-  const remainingCount = filteredTrees.length;
+  const groupedTrees = filteredTrees.reduce(
+    (acc, tree) => {
+      if (!tree.sold) {
+        if (!acc[tree.species]) {
+          acc[tree.species] = [];
+        }
+        acc[tree.species].push(tree);
+      }
+      return acc;
+    },
+    {} as Record<string, TreeItem[]>,
+  );
 
   const renderTreeCard = ({ item }: { item: TreeItem }) => (
     <View style={styles.treeCard}>
       <ImageBackground
-        source={{ uri: item.image_url }}
+        source={{
+          uri: item.image_url || 'https://example.com/placeholder.jpg',
+        }}
         style={styles.treeImage}
       />
-      <View>
-        <Text style={styles.treeName}>{item.species}</Text>
-      </View>
+      <Text style={styles.treeName} numberOfLines={1}>
+        {item.species}
+      </Text>
+      <Text style={styles.treeStock}>{item.stockCount} in stock</Text>
     </View>
   );
 
   return (
     <ScrollView style={styles.backgroundContainer}>
-      <View style={styles.searchContainer}>
-        <Text style={styles.Heading4Search}>Trees Inventory</Text>
-        <Text style={styles.treeInfo}>in stock: {remainingCount}</Text>
+      <View style={styles.searchBarContainer}>
+        <Text style={styles.searchHeading}>Trees Inventory</Text>
         <SearchBar value={searchQuery} onChange={setSearchQuery} />
-        <FlatList
-          data={filteredTrees}
-          renderItem={renderTreeCard}
-          keyExtractor={item => item.tree_id.toString()}
-          numColumns={2}
-          columnWrapperStyle={styles.treeGrid}
-          scrollEnabled={false}
-        />
       </View>
+
+      <FlatList
+        data={Object.entries(groupedTrees)}
+        keyExtractor={([species]) => species}
+        renderItem={({ item: [species, treesArray] }) => (
+          <View key={species}>
+            <FlatList
+              data={treesArray}
+              renderItem={renderTreeCard}
+              keyExtractor={item => item.tree_id.toString()}
+              numColumns={2}
+              columnWrapperStyle={styles.treeGrid}
+            />
+          </View>
+        )}
+        contentContainerStyle={styles.backgroundContainer}
+        ListEmptyComponent={
+          <Text style={styles.treeError}>
+            No trees found matching your search.
+          </Text>
+        }
+      />
     </ScrollView>
   );
 }