feat: movie-web tab

apps/expo/package.json

@@ -51,6 +51,7 @@
     "react-native-reanimated": "~3.6.2",
     "react-native-safe-area-context": "~4.8.2",
     "react-native-screens": "~3.29.0",
+    "react-native-svg": "14.1.0",
     "react-native-web": "^0.19.10",
     "subsrt-ts": "^2.1.2",
     "tailwind-merge": "^2.2.1",

apps/expo/src/app/(tabs)/_layout.tsx

@@ -3,6 +3,8 @@ import { Tabs } from "expo-router";
 
 import Colors from "@movie-web/tailwind-config/colors";
 
+import { MovieWebSvg } from "~/components/Icon";
+import SvgTabBarIcon from "~/components/SvgTabBarIcon";
 import TabBarIcon from "~/components/TabBarIcon";
 
 export default function TabLayout() {
@@ -65,6 +67,17 @@ export default function TabLayout() {
           ),
         }}
       />
+      <Tabs.Screen
+        name="movie-web"
+        options={{
+          title: "movie-web",
+          tabBarIcon: ({ focused }) => (
+            <SvgTabBarIcon focused={focused}>
+              <MovieWebSvg />
+            </SvgTabBarIcon>
+          ),
+        }}
+      />
       <Tabs.Screen
         name="settings"
         options={{
@@ -74,15 +87,6 @@ export default function TabLayout() {
           ),
         }}
       />
-      <Tabs.Screen
-        name="account"
-        options={{
-          title: "Account",
-          tabBarIcon: ({ focused }) => (
-            <TabBarIcon name="user" focused={focused} />
-          ),
-        }}
-      />
     </Tabs>
   );
 }

apps/expo/src/app/(tabs)/movie-web.tsx

@@ -1,10 +1,10 @@
 import ScreenLayout from "~/components/layout/ScreenLayout";
 import { Text } from "~/components/ui/Text";
 
-export default function AccountScreen() {
+export default function MovieWebScreen() {
   return (
-    <ScreenLayout title="Account">
-      <Text>Account tab</Text>
+    <ScreenLayout title="movie-web">
+      <Text>movie-web config tab</Text>
     </ScreenLayout>
   );
 }

apps/expo/src/components/Icon.tsx

@@ -0,0 +1,19 @@
+import React from "react";
+import Svg, { G, Path } from "react-native-svg";
+
+export const MovieWebSvg = ({
+  fillColor = "currentColor",
+}: {
+  fillColor?: string;
+}) => {
+  const svgPath =
+    "M18.186,4.5V6.241H16.445V4.5H9.482V6.241H7.741V4.5H6V20.168H7.741V18.427H9.482v1.741h6.964V18.427h1.741v1.741h1.741V4.5Zm-8.7,12.186H7.741V14.945H9.482Zm0-3.482H7.741V11.464H9.482Zm0-3.482H7.741V7.982H9.482Zm8.7,6.964H16.445V14.945h1.741Zm0-3.482H16.445V11.464h1.741Zm0-3.482H16.445V7.982h1.741Z";
+
+  return (
+    <Svg width="24" height="24" viewBox="0 0 20.927 20.927" fill={fillColor}>
+      <G transform="translate(10.018 -7.425) rotate(45)">
+        <Path d={svgPath} />
+      </G>
+    </Svg>
+  );
+};

apps/expo/src/components/SvgTabBarIcon.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+
+import Colors from "@movie-web/tailwind-config/colors";
+
+interface SvgTabBarIconProps {
+  focused?: boolean;
+  children: React.ReactElement;
+}
+
+export default function SvgTabBarIcon({
+  focused,
+  children,
+}: SvgTabBarIconProps) {
+  const fillColor = focused ? Colors.primary[300] : Colors.secondary[300];
+
+  if (React.isValidElement(children)) {
+    return React.cloneElement(children, { fillColor } as React.Attributes);
+  }
+
+  return null;
+}