refactor(layout): simplify layout components by removing unnecessary …

…padding and views
neuland-ingolstadt · Dec 6, 2024 · 7131482 · 7131482
1 parent 456a9db
commit 7131482
Show file tree

Hide file tree

Showing 6 changed files with 45 additions and 118 deletions.
diff --git a/src/app/(tabs)/(food)/_layout.tsx b/src/app/(tabs)/(food)/_layout.tsx
@@ -1,44 +1,27 @@
 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 (
-        <View
-            style={{
-                ...styles.page,
-                paddingTop,
+        <Stack
+            screenOptions={{
+                headerShown: true,
+                headerStyle: styles.headerBackground,
+                headerTitleStyle: styles.headerTextStyle,
+                headerTintColor: theme.colors.primary,
+                contentStyle: styles.background,
+                title: t('navigation.food'),
             }}
-        >
-            <Stack
-                screenOptions={{
-                    headerShown: true,
-                    headerStyle: styles.headerBackground,
-                    headerTitleStyle: styles.headerTextStyle,
-                    headerTintColor: theme.colors.primary,
-                    contentStyle: styles.background,
-                    title: t('navigation.food'),
-                }}
-            ></Stack>
-        </View>
+        ></Stack>
     )
 }
 
 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
@@ -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 {
                 <meta property="expo:spotlight" content="true" />
             </Head>
 
-            <View
-                style={{
-                    ...styles.header,
-                    paddingTop,
-                }}
-            >
-                <WorkaroundStack
-                    name={'dashboard'}
-                    titleKey={'navigation.dashboard'}
-                    component={isPageOpen ? HomeScreen : () => <></>}
-                    largeTitle={true}
-                    transparent={!hasDynamicIsland}
-                    headerRightElement={IndexHeaderRight}
-                    androidFallback
-                />
-            </View>
+            <WorkaroundStack
+                name={'dashboard'}
+                titleKey={'navigation.dashboard'}
+                component={isPageOpen ? HomeScreen : () => <></>}
+                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
@@ -1,39 +1,27 @@
 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 (
-        <View style={{ ...styles.page, paddingTop }}>
-            <Stack
-                screenOptions={{
-                    headerShown: true,
-                    title: t('navigation.timetable'),
-                    headerStyle: styles.headerBackground,
-                    headerTitleStyle: styles.headerTextStyle,
-                    headerTintColor: theme.colors.primary,
-                    contentStyle: styles.background,
-                }}
-            ></Stack>
-        </View>
+        <Stack
+            screenOptions={{
+                headerShown: true,
+                title: t('navigation.timetable'),
+                headerStyle: styles.headerBackground,
+                headerTitleStyle: styles.headerTextStyle,
+                headerTintColor: theme.colors.primary,
+                contentStyle: styles.background,
+            }}
+        ></Stack>
     )
 }
 
 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
@@ -84,7 +84,7 @@ function RootLayout(): JSX.Element {
             subscription.remove()
         }
     }, [])
-    const { styles, theme } = useStyles(stylesheet)
+    const { styles } = useStyles(stylesheet)
     return (
         <>
             <Head>
@@ -108,14 +108,7 @@ function RootLayout(): JSX.Element {
                     }
                 />
             )}
-            <Stack
-                screenOptions={{
-                    contentStyle: styles.background,
-                    headerStyle: styles.headerBackground,
-                    headerTintColor: theme.colors.primary,
-                    headerTitleStyle: styles.headerTextStyle,
-                }}
-            >
+            <Stack>
                 <Stack.Screen
                     name="(tabs)"
                     options={{
@@ -454,7 +447,5 @@ const ProviderComponent = (): 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
@@ -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 => (
-        <BlurView
-            tint={UnistylesRuntime.themeName === 'dark' ? 'dark' : 'light'}
-            intensity={75}
-            style={styles.blurTab}
-        />
-    )
 
     return (
         <>
@@ -54,9 +42,7 @@ const DefaultTabs = (): JSX.Element => {
                             />
                         ),
 
-                        tabBarStyle: styles.tabbarStyle(true),
-                        tabBarBackground: () =>
-                            Platform.OS === 'ios' ? <BlurTab /> : null,
+                        tabBarStyle: styles.tabbarStyle(false),
                     }}
                 />
 
@@ -81,9 +67,7 @@ const DefaultTabs = (): JSX.Element => {
                                 }}
                             />
                         ),
-                        tabBarStyle: styles.tabbarStyle(true),
-                        tabBarBackground: () =>
-                            Platform.OS === 'ios' ? <BlurTab /> : null,
+                        tabBarStyle: styles.tabbarStyle(false),
                     }}
                 />
 
@@ -133,9 +117,7 @@ const DefaultTabs = (): JSX.Element => {
                             />
                         ),
 
-                        tabBarStyle: styles.tabbarStyle(true),
-                        tabBarBackground: () =>
-                            Platform.OS === 'ios' ? <BlurTab /> : null,
+                        tabBarStyle: styles.tabbarStyle(false),
                     }}
                 />
             </Tabs>
@@ -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
@@ -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}