;
-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: {