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>
+  )
+}