Add color scheme toggle to mobile app

Author: dgca

package-lock.json

@@ -1,14 +1,22 @@
-import { Button } from "@ironfish/ui";
-import { View } from "react-native";
+import { Button } from "@ironfish/tackle-box";
+import { Appearance, useColorScheme, View } from "react-native";
 
 export default function UiKit() {
+  const scheme = useColorScheme();
   return (
     <View
       style={{
         gap: 10,
         padding: 10,
+        backgroundColor: scheme === "dark" ? "#333" : "#fff",
       }}
     >
+      <Button
+        label="Toggle color scheme"
+        onPress={() => {
+          Appearance.setColorScheme(scheme === "dark" ? "light" : "dark");
+        }}
+      />
       {/* Solid */}
       <Button label="Click me" />
 

packages/mobile-app/app/(tabs)/ui.tsx

@@ -10,6 +10,7 @@ import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { useColorScheme } from "react-native";
 import { FacadeProvider, useFacade } from "../data/facades";
 import { useEffect, useState } from "react";
+import { ColorScheme } from "@ironfish/tackle-box";
 
 const queryClient = new QueryClient();
 
@@ -45,20 +46,22 @@ export default function Layout() {
   const scheme = useColorScheme();
   return (
     <ThemeProvider value={scheme === "dark" ? DarkTheme : DefaultTheme}>
-      <QueryClientProvider client={queryClient}>
-        <FacadeProvider>
-          <DatabaseLoader loading={<Text>Loading databases...</Text>}>
-            <Stack>
-              <Stack.Screen
-                name="(tabs)"
-                options={{
-                  headerShown: false,
-                }}
-              />
-            </Stack>
-          </DatabaseLoader>
-        </FacadeProvider>
-      </QueryClientProvider>
+      <ColorScheme scheme={scheme === "dark" ? "_dark" : "_light"}>
+        <QueryClientProvider client={queryClient}>
+          <FacadeProvider>
+            <DatabaseLoader loading={<Text>Loading databases...</Text>}>
+              <Stack>
+                <Stack.Screen
+                  name="(tabs)"
+                  options={{
+                    headerShown: false,
+                  }}
+                />
+              </Stack>
+            </DatabaseLoader>
+          </FacadeProvider>
+        </QueryClientProvider>
+      </ColorScheme>
     </ThemeProvider>
   );
 }

packages/mobile-app/app/_layout.tsx

@@ -12,7 +12,7 @@
   },
   "dependencies": {
     "@ironfish/sdk": "2.2.0",
-    "@ironfish/ui": "*",
+    "@ironfish/tackle-box": "*",
     "data-facade": "*",
     "expo": "51.0.18",
     "expo-constants": "~16.0.2",

packages/mobile-app/package.json

@@ -0,0 +1,26 @@
+import React from "react";
+import type { Preview } from "@storybook/react";
+import { ColorScheme } from "../src/components/ColorScheme/ColorScheme";
+
+const preview: Preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+  decorators: [
+    (Story, { context }) => {
+      const isDarkMode = context.globals?.backgrounds?.value === "#333333";
+      return (
+        <ColorScheme scheme={isDarkMode ? "_dark" : "_light"}>
+          <Story />
+        </ColorScheme>
+      );
+    },
+  ],
+};
+
+export default preview;