made it look prettier. working on fixing product editor.

app/(tabs)/index.tsx

@@ -1,12 +1,13 @@
-import { Image, StyleSheet, Platform, ImageBackground, View, Text, Button, TextInputKeyPressEventData } from 'react-native';
+import { Image, StyleSheet, Platform, ImageBackground, View, Text, Button, TextInputKeyPressEventData, TextInput, FlatList } from 'react-native';
 
 import { SafeAreaView } from 'react-native-safe-area-context';
 import { useAppSelector } from '../store';
 import { selectProducts } from '@/features/product/productSlice';
 import { Product, dimensions_t } from '@/lib/product';
-import { ProductTile } from '@/components/ProductTile';
 import { useEffect, useState } from 'react';
-import { TextInput, TouchableHighlight } from 'react-native-gesture-handler';
+import { TouchableHighlight } from 'react-native-gesture-handler';
+
+const fallbackImage = require("@/assets/images/board-stock-lightened-blurred.png");
 
 export default function HomeScreen() {
 
@@ -17,101 +18,83 @@ export default function HomeScreen() {
   const [width, setWidth] = useState("0");
   const [units, setUnits] = useState("in" as "ft" | "in");
 
-  function calculatePrice() {
-    if (!activeProduct) {
-      setPrice("0.00");
-      return;
+  useEffect(function () {
+    const iv = setInterval(function () {
+      if (!activeProduct) return;
+      const l = Number.parseInt(length);
+      const w = Number.parseInt(width);
+      console.log("l=%d, w=%d", l, w);
+      const u = units;
+      const d: dimensions_t = activeProduct.area ? { l, w, u } : { l, u };
+      const p = activeProduct.priceFor(d);
+      console.log("set price %s", p);
+      const s = p.toLocaleString(undefined, {
+        minimumFractionDigits: 2,
+        maximumFractionDigits: 2,
+      })
+      setPrice(s == "NaN" ? "0.00" : s);
+    }, 10);
+    return function () {
+      clearInterval(iv);
     }
-    const l = Number.parseInt(length);
-    const w = Number.parseInt(width);
-    console.log("l=%d, w=%d", l, w);
-    const u = units;
-    const d : dimensions_t = activeProduct.area ? {l, w, u} : {l, u};
-    const p = activeProduct.priceFor(d);
-    console.log("set price %s", p);
-    const s = p.toLocaleString(undefined, {
-      minimumFractionDigits: 2,
-      maximumFractionDigits: 2,
-    })
-    setPrice(s);
-  }
-
-  const onProductSelected = (product: Product) => {
-    setActiveProduct(product);
-    calculatePrice();
-  }
-
-  const onUnitPressed = (u : "ft" | "in") => {
-    setUnits(u);
-    calculatePrice();
-  }
-
-  const onLengthChanged = (value : string) => {
-    setLength(value);
-    calculatePrice();
-  }
-
-  const onWidthChanged = (width : string) => {
-    setWidth(width);
-    calculatePrice();
-  }
+  }, [activeProduct, length, width]);
 
   return (
     <SafeAreaView style={styles.wrapper}>
       <View style={styles.bigPriceWrapper}>
-        <Text style={styles.bigPrice}>$ { price }</Text>
+        <Text style={styles.bigPrice}>$ {price}</Text>
       </View>
       <View style={styles.inputAndUnitWrapper}>
         <View style={styles.inputWrapper}>
           {activeProduct ? (
             <View>
-            <TextInput
-              clearTextOnFocus={true}
-              defaultValue={length}
-              onChangeText={onLengthChanged}
-              inputMode='decimal'
-              style={styles.lengthInput}
-            />
-            <Text style={styles.unitHints}>{units}</Text>
-            {activeProduct.area && 
-
-          (<View><TextInput
-            clearTextOnFocus={true}
-            defaultValue={width}
-            onPressIn={() => calculatePrice()}
-            onChangeText={setWidth}
-            inputMode='decimal'
-            style={styles.widthInput}
-            />
-            <Text style={styles.unitHints}>{units}</Text>
-            </View>)
-            }
+              <TextInput
+                clearTextOnFocus={true}
+                onChangeText={setLength}
+                inputMode='decimal'
+                style={styles.lengthInput}
+              />
+              <Text style={styles.unitHints}>{units}</Text>
+              {activeProduct.area && (
+                <View>
+                  <TextInput
+                    clearTextOnFocus={true}
+                    defaultValue={width}
+                    onChangeText={setWidth}
+                    inputMode='decimal'
+                    style={styles.widthInput}
+                  />
+                  <Text style={styles.unitHints}>{units}</Text>
+                </View>)
+              }
             </View>
           ) : (<Text>Please choose a product</Text>)}
-          </View>
-          <View style={styles.unitSelector}>
-            <Button title="in" onPress={() => onUnitPressed("in")} color={units === "in" ? "gray" : "blue"} />
-            <Button title="ft" onPress={() => onUnitPressed("ft")} color={units === "ft" ? "gray" : "blue"} />
-          </View>
+        </View>
+        <View style={styles.unitSelector}>
+          <Button title="in" onPress={() => setUnits("in")} color={units === "in" ? "gray" : "blue"} />
+          <Button title="ft" onPress={() => setUnits("ft")} color={units === "ft" ? "gray" : "blue"} />
+        </View>
       </View>
-      {products.map((product) => {
-        return (
-          <TouchableHighlight onPress={() => setActiveProduct(product)} >
-            <View
-              style={product.id === activeProduct?.id ? styles.activeProduct : styles.inactiveProduct}>
-              <ProductTile product={product} onProductSelected={onProductSelected} />
-            </View>
-          </TouchableHighlight>
-        )
-      })}
+      <FlatList
+        data={products}
+        style={styles.productSelectorFlatList}
+        renderItem={({ item }) => {
+          return (
+            <TouchableHighlight
+              style={item === activeProduct ? styles.productTileTouchableActive : styles.productTileTouchable}
+              onPress={() => setActiveProduct(item)}>
+                  <Text style={item === activeProduct ? styles.productTileTextActive : styles.productTileText}>{item.attributes.name || `Product ${item.id}`}</Text>
+            </TouchableHighlight>
+          )
+        }}
+      />
+
     </SafeAreaView>
   );
 }
 
 const styles = StyleSheet.create({
   wrapper: {
-    padding: 10,
-    alignItems: "center",
   },
   bigPriceWrapper: {
     alignContent: "center",
@@ -124,11 +107,13 @@ const styles = StyleSheet.create({
   },
   inputWrapper: {
     flexDirection: "row",
+    alignItems: "flex-start",
   },
   unitSelector: {
   },
   inputAndUnitWrapper: {
     flexDirection: "row",
+    alignSelf: "center",
   },
   unitHints: {
     fontSize: 30,
@@ -162,7 +147,6 @@ const styles = StyleSheet.create({
   },
   titleContainer: {
     flexDirection: 'row',
-    alignItems: 'center',
     gap: 8,
   },
   stepContainer: {
@@ -174,6 +158,39 @@ const styles = StyleSheet.create({
     width: 290,
     bottom: 0,
     left: 0,
-    position: 'absolute',
   },
+
+  productSelectorFlatList: {
+    padding: 10,
+    margin: 10,
+  },
+
+  productTileTouchable: {
+    margin: 10,
+    padding: 20,
+    backgroundColor: "grey",
+  },
+
+  productTileTouchableActive: {
+    borderWidth: 2,
+    borderStyle: "solid",
+    borderColor: "black",
+    margin: 10,
+    padding: 20,
+  },
+
+  productTileText: {
+    textAlign: "center",
+    color: "white",
+  },
+
+  productTileTextActive: {
+    textAlign: "center",
+    color: "black",
+  },
+
+  productTileCover: {
+    padding: 4,
+  },
+
 });