[expo] fix screen header style

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

Hide file tree

Showing 4 changed files with 35 additions and 16 deletions.
diff --git a/expo/features/root/TestRoot.tsx b/expo/features/root/TestRoot.tsx
@@ -1,9 +1,10 @@
 import { AnalyticsProvider } from "@hpapp/contexts/analytics";
 import { RelayProvider } from "@hpapp/contexts/relay";
 import { SettingsProvider } from "@hpapp/contexts/settings";
+import { LocalUserConfigurationSettings } from "@hpapp/contexts/settings/useLocalUserConfig";
 import { CurrentUserSettings } from "@hpapp/features/auth";
 
-const settings = [CurrentUserSettings];
+const settings = [CurrentUserSettings, LocalUserConfigurationSettings];
 
 export default function TestRoot({
   children,

diff --git a/expo/features/root/protected/stack/index.test.tsx b/expo/features/root/protected/stack/index.test.tsx
@@ -1,6 +1,8 @@
 import { View, Text, Button } from "react-native";
 import { createStackNavigator, useNavigation, defineScreen } from "./index";
 import { screen, render, fireEvent } from "@testing-library/react-native";
+import { AppThemeProvider } from "@hpapp/contexts/settings/theme";
+import TestRoot from "@hpapp/features/root/TestRoot";
 
 test("stack", async () => {
   function Root({ children }: { children: React.ReactElement }) {
@@ -57,12 +59,14 @@ test("stack", async () => {
 
   function StackContainer() {
     return (
-      <>
-        <Stack
-          screens={[HomeScreen, ScreenWithParams, ScreenWithoutParams]}
-          initialRouteName="/"
-        />
-      </>
+      <TestRoot>
+        <AppThemeProvider>
+          <Stack
+            screens={[HomeScreen, ScreenWithParams, ScreenWithoutParams]}
+            initialRouteName="/"
+          />
+        </AppThemeProvider>
+      </TestRoot>
     );
   }
 

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) => {