70 lines
2.0 KiB
TypeScript
70 lines
2.0 KiB
TypeScript
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 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 }) => {
|
|
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,
|
|
});
|
|
return (
|
|
<Provider store={store}>
|
|
<Tabs
|
|
screenOptions={{
|
|
tabBarActiveTintColor: Colors[colorScheme ?? "light"].tint,
|
|
headerShown: false,
|
|
}}
|
|
>
|
|
<Tabs.Screen
|
|
name="index"
|
|
options={{
|
|
title: "Plywood",
|
|
tabBarIcon: ({ color, focused }) => (
|
|
<TabBarIcon
|
|
name={focused ? "scale" : "scale-outline"}
|
|
color={color}
|
|
/>
|
|
),
|
|
}}
|
|
/>
|
|
<Tabs.Screen
|
|
name="carpet-roll-calculator"
|
|
options={{
|
|
title: "Carpet Roll Calculator",
|
|
tabBarIcon: ({ color, focused }) => (
|
|
<CarpetRollIcon selected={focused} />
|
|
),
|
|
}}
|
|
/>
|
|
<Tabs.Screen
|
|
name="product-editor"
|
|
options={{
|
|
title: "Edit Products",
|
|
tabBarIcon: ({ color, focused }) => (
|
|
<TabBarIcon
|
|
name={focused ? "list" : "list-outline"}
|
|
color={color}
|
|
/>
|
|
),
|
|
}}
|
|
/>
|
|
</Tabs>
|
|
</Provider>
|
|
);
|
|
}
|