From 7131482e5a26a67311dca063bf7154d4b8e7c276 Mon Sep 17 00:00:00 2001 From: Robert Eggl Date: Fri, 6 Dec 2024 20:25:46 +0100 Subject: [PATCH] refactor(layout): simplify layout components by removing unnecessary padding and views --- src/app/(tabs)/(food)/_layout.tsx | 35 +++++------------- src/app/(tabs)/(index)/index.tsx | 38 ++++++-------------- src/app/(tabs)/(timetable)/_layout.tsx | 32 ++++++----------- src/app/_layout.tsx | 13 ++----- src/components/Layout/DefaultTabs.tsx | 33 +++-------------- src/components/Universal/WorkaroundStack.tsx | 12 +++++-- 6 files changed, 45 insertions(+), 118 deletions(-) diff --git a/src/app/(tabs)/(food)/_layout.tsx b/src/app/(tabs)/(food)/_layout.tsx index 81bc336c..9fb5d9b8 100644 --- a/src/app/(tabs)/(food)/_layout.tsx +++ b/src/app/(tabs)/(food)/_layout.tsx @@ -1,35 +1,22 @@ import { Stack } from 'expo-router' import React from 'react' import { useTranslation } from 'react-i18next' -import { Platform, View } from 'react-native' -import { useSafeAreaInsets } from 'react-native-safe-area-context' import { createStyleSheet, useStyles } from 'react-native-unistyles' export default function FoodStack(): JSX.Element { const { styles, theme } = useStyles(stylesheet) const { t } = useTranslation('navigation') - const safeArea = useSafeAreaInsets() - const topInset = safeArea.top - const hasDynamicIsland = Platform.OS === 'ios' && topInset > 50 - const paddingTop = hasDynamicIsland ? topInset : 0 return ( - - - + > ) } @@ -37,8 +24,4 @@ const stylesheet = createStyleSheet((theme) => ({ background: { backgroundColor: theme.colors.background }, headerBackground: { backgroundColor: theme.colors.card }, headerTextStyle: { color: theme.colors.text }, - page: { - backgroundColor: theme.colors.card, - flex: 1, - }, })) diff --git a/src/app/(tabs)/(index)/index.tsx b/src/app/(tabs)/(index)/index.tsx index 9a6445d3..21f21e07 100644 --- a/src/app/(tabs)/(index)/index.tsx +++ b/src/app/(tabs)/(index)/index.tsx @@ -12,17 +12,11 @@ import { router } from 'expo-router' import Head from 'expo-router/head' import React, { useEffect, useState } from 'react' import { useTranslation } from 'react-i18next' -import { Dimensions, LayoutAnimation, Platform, View } from 'react-native' -import { useSafeAreaInsets } from 'react-native-safe-area-context' +import { Dimensions, LayoutAnimation, View } from 'react-native' import { createStyleSheet, useStyles } from 'react-native-unistyles' export default function HomeRootScreen(): JSX.Element { const [isPageOpen, setIsPageOpen] = useState(false) - const { styles } = useStyles(stylesheet) - const safeArea = useSafeAreaInsets() - const topInset = safeArea.top - const hasDynamicIsland = Platform.OS === 'ios' && topInset > 50 - const paddingTop = hasDynamicIsland ? topInset : 0 useEffect(() => { setIsPageOpen(true) }, []) @@ -37,22 +31,15 @@ export default function HomeRootScreen(): JSX.Element { - - <>} - largeTitle={true} - transparent={!hasDynamicIsland} - headerRightElement={IndexHeaderRight} - androidFallback - /> - + <>} + largeTitle={true} + transparent={true} + headerRightElement={IndexHeaderRight} + androidFallback + /> ) } @@ -158,11 +145,6 @@ const stylesheet = createStyleSheet((theme) => ({ paddingTop: 6, }, errorContainer: { flex: 1, paddingTop: 110 }, - - header: { - backgroundColor: theme.colors.card, - flex: 1, - }, item: { gap: 0, marginHorizontal: theme.margins.page, diff --git a/src/app/(tabs)/(timetable)/_layout.tsx b/src/app/(tabs)/(timetable)/_layout.tsx index d2d8c8b8..c242e1be 100644 --- a/src/app/(tabs)/(timetable)/_layout.tsx +++ b/src/app/(tabs)/(timetable)/_layout.tsx @@ -1,30 +1,22 @@ import { Stack } from 'expo-router' import React from 'react' import { useTranslation } from 'react-i18next' -import { Platform, View } from 'react-native' -import { useSafeAreaInsets } from 'react-native-safe-area-context' import { createStyleSheet, useStyles } from 'react-native-unistyles' export default function TimetableStack(): JSX.Element { const { t } = useTranslation('navigation') - const safeArea = useSafeAreaInsets() - const topInset = safeArea.top - const hasDynamicIsland = Platform.OS === 'ios' && topInset > 50 - const paddingTop = hasDynamicIsland ? topInset : 0 const { styles, theme } = useStyles(stylesheet) return ( - - - + ) } @@ -32,8 +24,4 @@ const stylesheet = createStyleSheet((theme) => ({ background: { backgroundColor: theme.colors.background }, headerBackground: { backgroundColor: theme.colors.card }, headerTextStyle: { color: theme.colors.text }, - page: { - backgroundColor: theme.colors.card, - flex: 1, - }, })) diff --git a/src/app/_layout.tsx b/src/app/_layout.tsx index e0b7e442..1e24dc23 100644 --- a/src/app/_layout.tsx +++ b/src/app/_layout.tsx @@ -84,7 +84,7 @@ function RootLayout(): JSX.Element { subscription.remove() } }, []) - const { styles, theme } = useStyles(stylesheet) + const { styles } = useStyles(stylesheet) return ( <> @@ -108,14 +108,7 @@ function RootLayout(): JSX.Element { } /> )} - + { export default ProviderComponent const stylesheet = createStyleSheet((theme) => ({ - background: { backgroundColor: theme.colors.background }, - headerBackground: { backgroundColor: theme.colors.card }, headerTextStyle: { color: theme.colors.text }, })) diff --git a/src/components/Layout/DefaultTabs.tsx b/src/components/Layout/DefaultTabs.tsx index 82f62801..11dc72af 100644 --- a/src/components/Layout/DefaultTabs.tsx +++ b/src/components/Layout/DefaultTabs.tsx @@ -1,25 +1,13 @@ import PlatformIcon from '@/components/Universal/Icon' -import { BlurView } from 'expo-blur' import { Tabs } from 'expo-router' import React from 'react' import { useTranslation } from 'react-i18next' import { Platform } from 'react-native' -import { - UnistylesRuntime, - createStyleSheet, - useStyles, -} from 'react-native-unistyles' +import { createStyleSheet, useStyles } from 'react-native-unistyles' const DefaultTabs = (): JSX.Element => { const { styles, theme: styleTheme } = useStyles(stylesheet) const { t } = useTranslation('navigation') - const BlurTab = (): JSX.Element => ( - - ) return ( <> @@ -54,9 +42,7 @@ const DefaultTabs = (): JSX.Element => { /> ), - tabBarStyle: styles.tabbarStyle(true), - tabBarBackground: () => - Platform.OS === 'ios' ? : null, + tabBarStyle: styles.tabbarStyle(false), }} /> @@ -81,9 +67,7 @@ const DefaultTabs = (): JSX.Element => { }} /> ), - tabBarStyle: styles.tabbarStyle(true), - tabBarBackground: () => - Platform.OS === 'ios' ? : null, + tabBarStyle: styles.tabbarStyle(false), }} /> @@ -133,9 +117,7 @@ const DefaultTabs = (): JSX.Element => { /> ), - tabBarStyle: styles.tabbarStyle(true), - tabBarBackground: () => - Platform.OS === 'ios' ? : null, + tabBarStyle: styles.tabbarStyle(false), }} /> @@ -144,13 +126,6 @@ const DefaultTabs = (): JSX.Element => { } const stylesheet = createStyleSheet((theme) => ({ - blurTab: { - bottom: 0, - left: 0, - position: 'absolute', - right: 0, - top: 0, - }, tabbarStyle: (blur: boolean) => ({ borderTopColor: theme.colors.border, backgroundColor: blur diff --git a/src/components/Universal/WorkaroundStack.tsx b/src/components/Universal/WorkaroundStack.tsx index be921937..ad08d752 100644 --- a/src/components/Universal/WorkaroundStack.tsx +++ b/src/components/Universal/WorkaroundStack.tsx @@ -3,7 +3,11 @@ import { createStackNavigator } from '@react-navigation/stack' import React, { type ReactNode } from 'react' import { useTranslation } from 'react-i18next' import { Platform } from 'react-native' -import { createStyleSheet, useStyles } from 'react-native-unistyles' +import { + UnistylesRuntime, + createStyleSheet, + useStyles, +} from 'react-native-unistyles' export interface WorkaroundStackProps { name: string @@ -33,6 +37,7 @@ function WorkaroundStack({ name, titleKey, component, + transparent = false, largeTitle = false, headerRightElement = undefined, headerSearchBarOptions = undefined, @@ -82,13 +87,16 @@ function WorkaroundStack({ headerLargeTitle: Platform.OS === 'ios' && largeTitle, headerRight: headerRightElement, headerLargeStyle: styles.headerBackground, - headerStyle: styles.headerBackground, + headerStyle: undefined, headerSearchBarOptions, headerTintColor: theme.colors.primary, contentStyle: styles.background, headerTitleStyle: { color: theme.colors.text, }, + headerShadowVisible: transparent, + headerTransparent: true, + headerBlurEffect: UnistylesRuntime.themeName, }} component={component} initialParams={params}