diff --git a/expo/features/home/HomeScreen.tsx b/expo/features/home/HomeScreen.tsx index 48d577a9..37e4e9f8 100644 --- a/expo/features/home/HomeScreen.tsx +++ b/expo/features/home/HomeScreen.tsx @@ -1,6 +1,9 @@ import { StyleSheet } from "react-native"; import { createBottomTabNavigator } from "@react-navigation/bottom-tabs"; -import { defineScreen } from "@hpapp/features/root/protected/stack"; +import { + defineScreen, + useNavigationOption, +} from "@hpapp/features/root/protected/stack"; import HomeTab from "@hpapp/features/home/HomeTab"; import EventsTab from "@hpapp/features/home/Events"; import SettingsTab from "@hpapp/features/settings/SettingsTab"; @@ -70,44 +73,39 @@ function getTabBarIconFn(iconName: string) { }; } -export default defineScreen( - "/", - function () { - const [primary, contrast] = useColor("primary"); - return ( - { - return { - headerStyle: { - backgroundColor: primary, - }, - headerTintColor: contrast, - headerTitleStyle: { - fontWeight: "bold", - fontFamily: Fonts.Main, - }, - }; - }} - > - {Tabs.map((tab) => { - return ( - - ); - })} - - ); - }, - { - headerShown: false, - } -); +export default defineScreen("/", function () { + useNavigationOption({ headerShown: false }); + const [primary, contrast] = useColor("primary"); + return ( + { + return { + headerStyle: { + backgroundColor: primary, + }, + headerTintColor: contrast, + headerTitleStyle: { + fontWeight: "bold", + fontFamily: Fonts.Main, + }, + }; + }} + > + {Tabs.map((tab) => { + return ( + + ); + })} + + ); +}); const styles = StyleSheet.create({ container: { diff --git a/expo/features/root/protected/stack/index.tsx b/expo/features/root/protected/stack/index.tsx index 7963f1ee..ddf7aa89 100644 --- a/expo/features/root/protected/stack/index.tsx +++ b/expo/features/root/protected/stack/index.tsx @@ -1,4 +1,4 @@ -import React, { forwardRef, useCallback, useMemo } from "react"; +import React, { forwardRef, useCallback, useEffect, useMemo } from "react"; import { createNativeStackNavigator as createNavigator, NativeStackNavigationOptions, @@ -197,16 +197,35 @@ const useNavigation = () => { type Navigation = ReturnType; -function defineScreen

( - path: string, - component: React.ElementType

, - options?: NativeStackNavigationOptions -) { +function defineScreen

(path: string, component: React.ElementType

) { return { path, component, - options, }; } -export { createStackNavigator, useNavigation, Navigation, defineScreen }; +// shortcut for useNavigationOption({title: title}) +function useScreenTitle(title: string) { + const navigation = useNavigation(); + useEffect(() => { + navigation.setOptions({ + title, + }); + }, [title]); +} + +function useNavigationOption(options: Partial) { + const navigation = useNavigation(); + useEffect(() => { + navigation.setOptions(options); + }, [options]); +} + +export { + createStackNavigator, + useNavigation, + Navigation, + defineScreen, + useScreenTitle, + useNavigationOption, +}; diff --git a/expo/features/settings/theme/ThemeSettingsScreen.tsx b/expo/features/settings/theme/ThemeSettingsScreen.tsx index 18b5ea26..ef3f6442 100644 --- a/expo/features/settings/theme/ThemeSettingsScreen.tsx +++ b/expo/features/settings/theme/ThemeSettingsScreen.tsx @@ -1,7 +1,10 @@ import { useLogout } from "@hpapp/features/auth"; import { View, StyleSheet } from "react-native"; import { ListItem } from "@rneui/themed"; -import { defineScreen } from "@hpapp/features/root/protected/stack"; +import { + defineScreen, + useScreenTitle, +} from "@hpapp/features/root/protected/stack"; import NavigationListItem from "@hpapp/features/common/components/list/NavigationListItem"; import ThemeColorSelectorScreen from "@hpapp/features/settings/theme/ThemeColorSelectorScreen"; import { t } from "@hpapp/system/i18n"; @@ -9,69 +12,64 @@ import { ColorScheme, useColor } from "@hpapp/contexts/settings/theme"; import { Spacing } from "@hpapp/features/common/constants"; import Text from "@hpapp/features/common/components/Text"; -export default defineScreen( - "/settings/theme/", - function ThemeSettngsScreen() { - const [primary, primaryContrast] = useColor("primary"); - const [secondary, secondaryContrast] = useColor("secondary"); - const [background, backgroundContrast] = useColor("background"); - return ( - - + + - - {t("Primary Color")} - - - + + + - - {t("Secondary Color")} - - - + + + - - {t("Background Color")} - - - - ); - }, - { - title: t("Theme Settings"), - } -); + {t("Background Color")} + + + + ); +}); const styles = StyleSheet.create({ container: {