working on getting input to respond correctly.

app/(tabs)/_layout.tsx

@@ -1,37 +1,43 @@
 import { Tabs } from 'expo-router';
-import React from 'react';
 
 import { Colors } from '@/constants/Colors';
 import { useColorScheme } from '@/hooks/useColorScheme';
 import { TabBarIcon } from '@/components/navigation/TabBarIcon';
+import { Provider } from 'react-redux';
+import { products as fixtures } from "@/__fixtures__/initialProducts"
+import { setupStore } from '../store';
 
 export default function TabLayout() {
   const colorScheme = useColorScheme();
-
+  const store = setupStore({
+    products: fixtures
+  });
   return (
-    <Tabs
-      screenOptions={{
-        tabBarActiveTintColor: Colors[colorScheme ?? 'light'].tint,
-        headerShown: false,
-      }}>
-      <Tabs.Screen
-        name="index"
-        options={{
-          title: 'Conversion',
-          tabBarIcon: ({ color, focused }) => (
-            <TabBarIcon name={focused ? 'recording' : 'recording-outline'} color={color} />
-          ),
-        }}
-      />
-      <Tabs.Screen
-        name="product-editor"
-        options={{
-          title: 'Products',
-          tabBarIcon: ({ color, focused }) => (
-            <TabBarIcon name={focused ? 'recording' : 'recording-outline'} color={color} />
-          ),
-        }}
-      />
-    </Tabs>
+    <Provider store={store}>
+      <Tabs
+        screenOptions={{
+          tabBarActiveTintColor: Colors[colorScheme ?? 'light'].tint,
+          headerShown: false,
+        }}>
+        <Tabs.Screen
+          name="index"
+          options={{
+            title: 'Conversion',
+            tabBarIcon: ({ color, focused }) => (
+              <TabBarIcon name={focused ? 'recording' : 'recording-outline'} color={color} />
+            ),
+          }}
+        />
+        <Tabs.Screen
+          name="product-editor"
+          options={{
+            title: 'Products',
+            tabBarIcon: ({ color, focused }) => (
+              <TabBarIcon name={focused ? 'recording' : 'recording-outline'} color={color} />
+            ),
+          }}
+        />
+      </Tabs>
+    </Provider>
   );
 }

app/(tabs)/index.tsx

@@ -1,36 +1,165 @@
-import { Image, StyleSheet, Platform, ImageBackground } from 'react-native';
+import { Image, StyleSheet, Platform, ImageBackground, View, Text, Button, TextInputKeyPressEventData } from 'react-native';
 
 import { SafeAreaView } from 'react-native-safe-area-context';
-import { MeasurementInput } from '@/components/LengthInput';
-import { setupStore, useAppDispatch } from '../store';
+import { useAppSelector } from '../store';
 import { selectProducts } from '@/features/product/productSlice';
-import { Product } from '@/lib/product';
+import { Product, dimensions_t } from '@/lib/product';
 import { ProductTile } from '@/components/ProductTile';
-import { Measure, area, length } from 'enheter';
+import { useEffect, useState } from 'react';
+import { TextInput, TouchableHighlight } from 'react-native-gesture-handler';
 
 export default function HomeScreen() {
 
-  const products = useAppDispatch(selectProducts);
+  const products = useAppSelector(selectProducts);
+  const [activeProduct, setActiveProduct] = useState(null as Product | null);
+  const [price, setPrice] = useState("0.00");
+  const [length, setLength] = useState("0");
+  const [width, setWidth] = useState("0");
+  const [units, setUnits] = useState("in" as "ft" | "in");
 
   function calculatePrice() {
-
+    if (!activeProduct) {
+      setPrice("0.00");
+      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);
   }
 
-  const selectProduct = (product : Product) => {
+  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();
   }
 
   return (
-    <SafeAreaView>
-      <MeasurementInput onMeasurementSet={calculatePrice} />
+    <SafeAreaView style={styles.wrapper}>
+      <View style={styles.bigPriceWrapper}>
+        <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>)
+            }
+            </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>
       {products.map((product) => {
-        <ProductTile product={product} onProductSelected={selectProduct} />
+        return (
+          <TouchableHighlight onPress={() => setActiveProduct(product)} >
+            <View
+              style={product.id === activeProduct?.id ? styles.activeProduct : styles.inactiveProduct}>
+              <ProductTile product={product} onProductSelected={onProductSelected} />
+            </View>
+          </TouchableHighlight>
+        )
       })}
     </SafeAreaView>
   );
 }
 
 const styles = StyleSheet.create({
+  wrapper: {
+    padding: 10,
+    alignItems: "center",
+  },
+  bigPriceWrapper: {
+    alignContent: "center",
+  },
+  bigPrice: {
+    alignSelf: "center",
+    fontSize: 40,
+    marginTop: 100,
+    marginBottom: 100,
+  },
+  inputWrapper: {
+    flexDirection: "row",
+  },
+  unitSelector: {
+  },
+  inputAndUnitWrapper: {
+    flexDirection: "row",
+  },
+  unitHints: {
+    fontSize: 30,
+    padding: 10,
+  },
+  lengthInput: {
+    borderWidth: 1,
+    borderRadius: 4,
+    borderColor: "grey",
+    padding: 4,
+    margin: 4,
+    fontSize: 30,
+    width: 200,
+  },
+  widthInput: {
+    width: 200,
+    borderWidth: 1,
+    borderRadius: 4,
+    borderColor: "grey",
+    padding: 4,
+    margin: 4,
+    fontSize: 30,
+  },
+  activeProduct: {
+    borderWidth: 2,
+    borderColor: "black",
+    borderStyle: "solid",
+  },
+  inactiveProduct: {
+
+  },
   titleContainer: {
     flexDirection: 'row',
     alignItems: 'center',

app/(tabs)/product-editor.tsx

@@ -1,12 +1,7 @@
 import { Image, StyleSheet, Platform, ImageBackground } from 'react-native';
 
 import { SafeAreaView } from 'react-native-safe-area-context';
-import { MeasurementInput } from '@/components/LengthInput';
-import { setupStore, useAppDispatch } from '../store';
-import { selectProducts } from '@/features/product/productSlice';
-import { Product } from '@/lib/product';
-import { ProductTile } from '@/components/ProductTyle';
-import { Measure, area, length } from 'enheter';
+import { ProductEditor } from '@/components/ProductEditor';
 
 export default function HomeScreen() {