add svg icons. running into scroll issue. will upgrade packages.

app/(tabs)/_layout.tsx

@@ -1,23 +1,26 @@
 import { Tabs } from "expo-router";
 
+import { SvgUri } from "react-native-svg";
 import { Colors } from "@/constants/Colors";
 import { useColorScheme } from "@/hooks/useColorScheme";
 import { TabBarIcon } from "@/components/navigation/TabBarIcon";
 import { Provider } from "react-redux";
 import fixtures from "@/__fixtures__/initialProducts";
 import { setupStore } from "../store";
-const CarpetRoleSvg = require("@/assets/images/icons/icon-carpet-roll.svg");
-const CarpetRoleSelectedSvg = require("@/assets/images/icons/icon-carpet-roll-selected.svg");
+
+const CARPET_ROLL_SVG = "/assets/images/icons/icon-carpet-roll-raw.svg";
+const CARPET_ROLL_SELECTED_SVG =
+  "/assets/images/icons/icon-carpet-roll-selected-raw.svg";
 
 const CarpetRollIcon = ({ selected }: { selected: boolean }) => {
-  return selected ? CarpetRoleSelectedSvg : CarpetRoleSvg;
+  const uri = selected ? CARPET_ROLL_SELECTED_SVG : CARPET_ROLL_SVG;
+  return <SvgUri width="2em" height="2em" uri={uri} />;
 };
 
 export default function TabLayout() {
   const colorScheme = useColorScheme();
   const store = setupStore({
     products: fixtures,
-    units: "ft",
   });
   return (
     <Provider store={store}>
@@ -40,7 +43,7 @@ export default function TabLayout() {
           }}
         />
         <Tabs.Screen
-          name="product-editor"
+          name="carpet-roll-calculator"
           options={{
             title: "Carpet Roll Calculator",
             tabBarIcon: ({ color, focused }) => (

app/(tabs)/carpet-roll-calculator.tsx

@@ -0,0 +1,10 @@
+import CarpetRollCalculator from '@/components/CarpetRollCalculator';
+import { View } from 'react-native';
+
+export default function CarpetRollCalculatorView () {
+  return (
+    <View>
+      <CarpetRollCalculator />
+    </View>
+  )
+}

app/_layout.tsx

@@ -7,7 +7,6 @@ import * as SplashScreen from 'expo-splash-screen';
 import { useEffect } from 'react';
 
 import { useColorScheme } from '@/hooks/useColorScheme';
-import { Text, View } from 'react-native';
 
 // Prevent the splash screen from auto-hiding before asset loading is complete.
 SplashScreen.preventAutoHideAsync();

app/store.ts

@@ -1,39 +1,35 @@
-import { useDispatch, useSelector } from 'react-redux';
-import { configureStore } from '@reduxjs/toolkit';
-import { rememberReducer, rememberEnhancer } from 'redux-remember';
-import reducers from "@/features/product/productSlice"
-import AsyncStorage from '@react-native-async-storage/async-storage';
-import { ProductData } from "@/lib/dimensions_t";
-import {Length} from "convert"
+import { useDispatch, useSelector } from "react-redux";
+import { configureStore } from "@reduxjs/toolkit";
+import { rememberReducer, rememberEnhancer } from "redux-remember";
+import reducers, { DEFAULT_PRELOADED_STATE } from "@/features/product/productSlice";
+import AsyncStorage from "@react-native-async-storage/async-storage";
 
-const rememberedKeys = ['products'];
+const PERSIST_WHOLE_STORE =
+  new Boolean(process.env.PERSIST_WHOLE_STORE).valueOf() || false;
+
+const rememberedKeys = ["products"];
 
 const rootReducer = reducers;
 
-const isBrowser = (typeof window !== "undefined");
+// const isBrowser = typeof window !== "undefined";
 
-export function setupStore(preloadedState = {
-    products: [] as ProductData[],
-    units: "ft" as Length,
-}) {
-    return configureStore({
-        reducer: rememberReducer(reducers),
-        preloadedState,
-        enhancers: (getDefaultEnhancers) => getDefaultEnhancers().concat(
-            rememberEnhancer(
-                AsyncStorage,
-                rememberedKeys,
-                {
-                    persistWholeStore: false,
-                },
-            )
-        ),
-    });
+
+export function setupStore(preloadedState = DEFAULT_PRELOADED_STATE) {
+  return configureStore({
+    reducer: rememberReducer(reducers),
+    preloadedState,
+    enhancers: (getDefaultEnhancers) =>
+      getDefaultEnhancers().concat(
+        rememberEnhancer(AsyncStorage, rememberedKeys, {
+          persistWholeStore: PERSIST_WHOLE_STORE,
+        })
+      ),
+  });
 }
 
 export type RootState = ReturnType<typeof rootReducer>;
 export type AppStore = ReturnType<typeof setupStore>;
-export type AppDispatch = AppStore['dispatch'];
+export type AppDispatch = AppStore["dispatch"];
 
 export const useAppDispatch = useDispatch.withTypes<AppDispatch>();
 export const useAppSelector = useSelector.withTypes<RootState>();