[expo] fix screen header style

**Summary** apply colors from rneui theme. **Test** - expo **Issue** - N/A
yssk22 · Oct 20, 2023 · 5b8471e · 5b8471e
1 parent 6eb2291
commit 5b8471e
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 9 deletions.
diff --git a/expo/features/root/protected/stack/index.tsx b/expo/features/root/protected/stack/index.tsx
@@ -77,6 +77,8 @@ function createStackNavigator<P extends ScreenParams>(
       | React.Ref<NavigationContainerRef<ReactNavigation.RootParamList>>
       | undefined
   ): JSX.Element {
+    const [primary, contrastPrimary] = useColor("primary");
+    const [secondary, _] = useColor("secondary");
     const { screens, onStateChange, initialRouteName, ...navigatorProps } =
       props;
     const screenMap = screens.reduce((map, s) => {
@@ -117,13 +119,16 @@ function createStackNavigator<P extends ScreenParams>(
             options={{
               headerBackTitle: "",
               headerBackTitleVisible: false,
-
+              headerTintColor: contrastPrimary,
+              headerStyle: {
+                backgroundColor: primary,
+              },
               ...options,
             }}
           />
         );
       });
-    }, [screens]);
+    }, [screens, primary, contrastPrimary]);
     return (
       <NavigationContainer
         ref={ref}
@@ -132,8 +137,12 @@ function createStackNavigator<P extends ScreenParams>(
         theme={{
           ...DefaultTheme,
           colors: {
-            ...DefaultTheme.colors,
-            background: "#ffffff",
+            primary: primary,
+            background: contrastPrimary,
+            card: contrastPrimary,
+            text: primary,
+            border: contrastPrimary,
+            notification: secondary,
           },
         }}
       >
@@ -197,10 +206,14 @@ const useNavigation = () => {
 
 type Navigation = ReturnType<typeof useNavigation>;
 
-function defineScreen<P>(path: string, component: React.ElementType<P>) {
+function defineScreen<P extends ScreenParams>(
+  path: string,
+  component: React.ElementType<P>
+): Screen<P> {
   return {
     path,
     component,
+    options: {},
   };
 }
 

diff --git a/expo/features/settings/theme/ThemeColorSelectorScreen.tsx b/expo/features/settings/theme/ThemeColorSelectorScreen.tsx
@@ -1,6 +1,9 @@
 import { StyleSheet, ScrollView } from "react-native";
 import { Icon, ListItem } from "@rneui/themed";
-import { defineScreen } from "@hpapp/features/root/protected/stack";
+import {
+  defineScreen,
+  useScreenTitle,
+} from "@hpapp/features/root/protected/stack";
 import {
   AvailableColors,
   ColorScheme,
@@ -22,13 +25,11 @@ export default defineScreen(
     title: string;
     scheme: ColorScheme;
   }) {
+    useScreenTitle(title);
     const navigation = useNavigation();
     const [config, updateConfig] = useLocalUserConfig();
     const [_, updateTheme] = useAppTheme();
     const [current] = useColor(scheme);
-    useEffect(() => {
-      navigation.setOptions({ title: title });
-    }, [title]);
     return (
       <ScrollView>
         {AvailableColors.map((a) => {