mobile: Add dark mode support

2 files changed, 52 insertions, 0 deletions

diff --git a/apps/mobile/components/navigation/stack.tsx b/apps/mobile/components/navigation/stack.tsx
new file mode 100644
index 00000000..f53b3652
--- /dev/null
+++ b/apps/mobile/components/navigation/stack.tsx
@@ -0,0 +1,27 @@
+import { TextStyle, ViewStyle } from "react-native";
+import { Stack } from "expo-router/stack";
+import { cssInterop } from "nativewind";
+
+interface StackProps extends React.ComponentProps<typeof Stack> {
+  contentStyle?: ViewStyle;
+  headerStyle?: TextStyle;
+}
+
+function StackImpl({ contentStyle, headerStyle, ...props }: StackProps) {
+  props.screenOptions = {
+    ...props.screenOptions,
+    contentStyle,
+    headerStyle: {
+      backgroundColor: headerStyle?.backgroundColor?.toString(),
+    },
+    navigationBarColor: contentStyle?.backgroundColor?.toString(),
+    headerTintColor: headerStyle?.color?.toString(),
+  };
+  return <Stack {...props} />;
+}
+
+// Changing this requires reloading the app
+export const StyledStack = cssInterop(StackImpl, {
+  contentClassName: "contentStyle",
+  headerClassName: "headerStyle",
+});
diff --git a/apps/mobile/components/navigation/tabs.tsx b/apps/mobile/components/navigation/tabs.tsx
new file mode 100644
index 00000000..976731bc
--- /dev/null
+++ b/apps/mobile/components/navigation/tabs.tsx
@@ -0,0 +1,25 @@
+import { ViewStyle } from "react-native";
+import { Tabs } from "expo-router";
+import { cssInterop } from "nativewind";
+
+function StyledTabsImpl({
+  tabBarStyle,
+  headerStyle,
+  ...props
+}: React.ComponentProps<typeof Tabs> & {
+  tabBarStyle?: ViewStyle;
+  headerStyle?: ViewStyle;
+}) {
+  props.screenOptions = {
+    ...props.screenOptions,
+    tabBarStyle,
+    headerStyle,
+  };
+  return <Tabs {...props} />;
+}
+
+export const StyledTabs = cssInterop(StyledTabsImpl, {
+  tabBarClassName: "tabBarStyle",
+  headerClassName: "headerStyle",
+  sceneContainerClassName: "sceneContainerStyle",
+});