diff --git a/apps/expo/package.json b/apps/expo/package.json index f0b5e44..53e39ba 100644 --- a/apps/expo/package.json +++ b/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", diff --git a/apps/expo/src/app/(tabs)/_layout.tsx b/apps/expo/src/app/(tabs)/_layout.tsx index b52b70c..d5332c4 100644 --- a/apps/expo/src/app/(tabs)/_layout.tsx +++ b/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() { ), }} /> + ( + + + + ), + }} + /> - ( - - ), - }} - /> ); } diff --git a/apps/expo/src/app/(tabs)/account.tsx b/apps/expo/src/app/(tabs)/movie-web.tsx similarity index 54% rename from apps/expo/src/app/(tabs)/account.tsx rename to apps/expo/src/app/(tabs)/movie-web.tsx index 572ac36..8b7e445 100644 --- a/apps/expo/src/app/(tabs)/account.tsx +++ b/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 ( - - Account tab + + movie-web config tab ); } diff --git a/apps/expo/src/components/Icon.tsx b/apps/expo/src/components/Icon.tsx new file mode 100644 index 0000000..97568b1 --- /dev/null +++ b/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 ( + + + + + + ); +}; diff --git a/apps/expo/src/components/SvgTabBarIcon.tsx b/apps/expo/src/components/SvgTabBarIcon.tsx new file mode 100644 index 0000000..803fb20 --- /dev/null +++ b/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; +} diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index a965813..90c9270 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -93,7 +93,7 @@ importers: version: 10.0.3 nativewind: specifier: ~4.0.23 - version: 4.0.23(patch_hash=42qwizvrnoqgalbele35lpnaqi)(@babel/core@7.23.9)(react-native-reanimated@3.6.2)(react-native-safe-area-context@4.8.2)(react-native@0.73.2)(react@18.2.0)(tailwindcss@3.4.1) + version: 4.0.23(patch_hash=42qwizvrnoqgalbele35lpnaqi)(@babel/core@7.23.9)(react-native-reanimated@3.6.2)(react-native-safe-area-context@4.8.2)(react-native-svg@14.1.0)(react-native@0.73.2)(react@18.2.0)(tailwindcss@3.4.1) react: specifier: 18.2.0 version: 18.2.0 @@ -108,7 +108,7 @@ importers: version: 1.14.1(react-native@0.73.2)(react@18.2.0) react-native-css-interop: specifier: ~0.0.22 - version: 0.0.22(@babel/core@7.23.9)(react-native-reanimated@3.6.2)(react-native-safe-area-context@4.8.2)(react-native@0.73.2)(react@18.2.0)(tailwindcss@3.4.1) + version: 0.0.22(@babel/core@7.23.9)(react-native-reanimated@3.6.2)(react-native-safe-area-context@4.8.2)(react-native-svg@14.1.0)(react-native@0.73.2)(react@18.2.0)(tailwindcss@3.4.1) react-native-gesture-handler: specifier: ~2.14.1 version: 2.14.1(react-native@0.73.2)(react@18.2.0) @@ -130,6 +130,9 @@ importers: react-native-screens: specifier: ~3.29.0 version: 3.29.0(react-native@0.73.2)(react@18.2.0) + react-native-svg: + specifier: 14.1.0 + version: 14.1.0(react-native@0.73.2)(react@18.2.0) react-native-web: specifier: ^0.19.10 version: 0.19.10(react-dom@18.2.0)(react@18.2.0) @@ -4712,6 +4715,14 @@ packages: nth-check: 2.1.1 dev: false + /css-tree@1.1.3: + resolution: {integrity: sha512-tRpdppF7TRazZrjJ6v3stzv93qxRcSsFmW6cX0Zm2NVKpxE1WV1HblnghVv9TreireHkqI/VDEsfolRF1p6y7Q==} + engines: {node: '>=8.0.0'} + dependencies: + mdn-data: 2.0.14 + source-map: 0.6.1 + dev: false + /css-what@6.1.0: resolution: {integrity: sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw==} engines: {node: '>= 6'} @@ -7539,6 +7550,10 @@ packages: resolution: {integrity: sha512-c2YOUbp33+6thdCUi34xIyOU/a7bvGKj/3DB1iaPMTuPHf/Q2d5s4sn1FaCOO43XkXggnb08y5W2PU8UNYNLKQ==} dev: false + /mdn-data@2.0.14: + resolution: {integrity: sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow==} + dev: false + /memoize-one@5.2.1: resolution: {integrity: sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q==} dev: false @@ -7951,13 +7966,13 @@ packages: engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1} hasBin: true - /nativewind@4.0.23(patch_hash=42qwizvrnoqgalbele35lpnaqi)(@babel/core@7.23.9)(react-native-reanimated@3.6.2)(react-native-safe-area-context@4.8.2)(react-native@0.73.2)(react@18.2.0)(tailwindcss@3.4.1): + /nativewind@4.0.23(patch_hash=42qwizvrnoqgalbele35lpnaqi)(@babel/core@7.23.9)(react-native-reanimated@3.6.2)(react-native-safe-area-context@4.8.2)(react-native-svg@14.1.0)(react-native@0.73.2)(react@18.2.0)(tailwindcss@3.4.1): resolution: {integrity: sha512-7eKMjcdoZMqxmPwJhLwe5VbuwCNTdIXChxV9n4FwdzKTpZX3kNGj95J7fpqpefFPRT6yYp6SqK2n6TG/BSzA+w==} engines: {node: '>=16'} peerDependencies: tailwindcss: '>3.3.0' dependencies: - react-native-css-interop: 0.0.22(@babel/core@7.23.9)(react-native-reanimated@3.6.2)(react-native-safe-area-context@4.8.2)(react-native@0.73.2)(react@18.2.0)(tailwindcss@3.4.1) + react-native-css-interop: 0.0.22(@babel/core@7.23.9)(react-native-reanimated@3.6.2)(react-native-safe-area-context@4.8.2)(react-native-svg@14.1.0)(react-native@0.73.2)(react@18.2.0)(tailwindcss@3.4.1) tailwindcss: 3.4.1 transitivePeerDependencies: - '@babel/core' @@ -8974,7 +8989,7 @@ packages: react-native: 0.73.2(@babel/core@7.23.9)(@babel/preset-env@7.23.9)(react@18.2.0) dev: false - /react-native-css-interop@0.0.22(@babel/core@7.23.9)(react-native-reanimated@3.6.2)(react-native-safe-area-context@4.8.2)(react-native@0.73.2)(react@18.2.0)(tailwindcss@3.4.1): + /react-native-css-interop@0.0.22(@babel/core@7.23.9)(react-native-reanimated@3.6.2)(react-native-safe-area-context@4.8.2)(react-native-svg@14.1.0)(react-native@0.73.2)(react@18.2.0)(tailwindcss@3.4.1): resolution: {integrity: sha512-JHLYHlLEqM13dy0XSxIPOWvqmQkPrqUt+KHPkbLV0sIiw/4aN6B5TPsNKZFX9bJJaZ//dAECn782R0MqDrTBWQ==} engines: {node: '>=16'} peerDependencies: @@ -8999,6 +9014,7 @@ packages: react-native: 0.73.2(@babel/core@7.23.9)(@babel/preset-env@7.23.9)(react@18.2.0) react-native-reanimated: 3.6.2(@babel/core@7.23.9)(@babel/plugin-proposal-nullish-coalescing-operator@7.18.6)(@babel/plugin-proposal-optional-chaining@7.21.0)(@babel/plugin-transform-arrow-functions@7.23.3)(@babel/plugin-transform-shorthand-properties@7.23.3)(@babel/plugin-transform-template-literals@7.23.3)(react-native@0.73.2)(react@18.2.0) react-native-safe-area-context: 4.8.2(react-native@0.73.2)(react@18.2.0) + react-native-svg: 14.1.0(react-native@0.73.2)(react@18.2.0) tailwindcss: 3.4.1 transitivePeerDependencies: - '@babel/core' @@ -9108,6 +9124,18 @@ packages: warn-once: 0.1.1 dev: false + /react-native-svg@14.1.0(react-native@0.73.2)(react@18.2.0): + resolution: {integrity: sha512-HeseElmEk+AXGwFZl3h56s0LtYD9HyGdrpg8yd9QM26X+d7kjETrRQ9vCjtxuT5dCZEIQ5uggU1dQhzasnsCWA==} + peerDependencies: + react: '*' + react-native: '*' + dependencies: + css-select: 5.1.0 + css-tree: 1.1.3 + react: 18.2.0 + react-native: 0.73.2(@babel/core@7.23.9)(@babel/preset-env@7.23.9)(react@18.2.0) + dev: false + /react-native-web@0.19.10(react-dom@18.2.0)(react@18.2.0): resolution: {integrity: sha512-IQoHiTQq8egBCVVwmTrYcFLgEFyb4LMZYEktHn4k22JMk9+QTCEz5WTfvr+jdNoeqj/7rtE81xgowKbfGO74qg==} peerDependencies: