got store working. now working on product-dimension switcher.

components/LengthInput.tsx

@@ -0,0 +1,86 @@
+import { Measure, Unit, length as en_length, area as en_area } from "enheter";
+import { useState } from "react";
+import { Button, StyleSheet, Text, TextInput, View } from "react-native";
+import { SafeAreaView } from "react-native-safe-area-context";
+
+export type LengthInputProps = {
+    onLengthSet?: (length: Measure<"length">) => any,
+    onAreaSet?: (area: Measure<"area">) => any,
+    isArea?: boolean,
+}
+
+export type t_length_unit = "foot" | "inch"
+
+export function LengthInput(props: LengthInputProps) {
+
+    const [length, setLength] = useState(null as null | number);
+    const [width, setWidth] = useState(null as null | number);
+    const [unit, setUnit] = useState("foot" as t_length_unit);
+
+    function doSetLength(text: string) {
+        const value = parseFloat(text);
+        setLength(value);
+        if (!props.isArea) {
+            const len = en_length(unit, value)
+            props.onLengthSet && props.onLengthSet(len)
+        } else {
+            const en_unit = unit == "foot" ? "squareFoot" : "squareInch"
+            const ar = en_area(en_unit, value);
+            props.onAreaSet && props.onAreaSet(ar);
+        }
+    }
+
+    function doSetWidth(text: string) {
+        const value = parseFloat(text);
+        setLength(value);
+        const len = en_length(unit, value)
+        props.onLengthSet && props.onLengthSet(len)
+    }
+
+    return (
+        <SafeAreaView>
+            <View style={styles.inputRow}>
+                <TextInput
+                    keyboardType="number-pad"
+                    onTouchEnd={() => setLength(null)}
+                    value={length?.toString() || ""}
+                    onChangeText={doSetLength}
+                    style={styles.textInput}
+                />
+                {props.isArea &&
+                    (<TextInput
+                        keyboardType="number-pad"
+                        onTouchEnd={() => setWidth(null)}
+                        value={length?.toString() || ""}
+                        onChangeText={doSetWidth}
+                        style={styles.textInput}
+                    />)
+                }
+                <Text style={styles.valueHint}>{unit == "foot" ? "ft" : "in"}</Text>
+                <Button
+                    title="Ft"
+                    onPress={() => setUnit("foot")}
+                    color={unit === "foot" ? "blue" : "gray"}
+                />
+                <Button
+                    title="In"
+                    onPress={() => setUnit("inch")}
+                    color={unit === "inch" ? "blue" : "gray"}
+                />
+            </View>
+        </SafeAreaView>
+    )
+}
+
+const styles = StyleSheet.create({
+    textInput: {
+        flexGrow: 1,
+    },
+    inputRow: {
+        flexDirection: "row"
+    },
+    valueHint: {
+        color: "grey",
+        margin: 5,
+    }
+})