movie-web/native-app
1
0
Fork 0
mirror of https://github.com/movie-web/native-app.git synced 2025-09-13 18:13:25 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: movie-web tab

Browse Source
This commit is contained in:
Adrian Castro
2024-02-18 22:22:50 +01:00
parent 8914cca32c
commit efab11bff5
6 changed files with 90 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
apps/expo/package.json
View File

@@ -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",

22
apps/expo/src/app/(tabs)/_layout.tsx
View File

@@ -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>
);
}

6
apps/expo/src/app/(tabs)/account.tsx → apps/expo/src/app/(tabs)/movie-web.tsx
View File

@@ -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>
);
}

19
apps/expo/src/components/Icon.tsx Normal file
View File

@@ -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>
);
};

21
apps/expo/src/components/SvgTabBarIcon.tsx Normal file
View File

@@ -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;
}

38
pnpm-lock.yaml generated
View File

@@ -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: