@tastic/shell 0.3.0 → 0.3.1

package/README.md

@@ -18,7 +18,9 @@ package ecosystem, on [`@tastic/hud`](https://github.com/jayrdeaton/react-native
 
 - **`RootLayout`**: the root of the app (gesture root, safe area, fonts, Redux and its persist gate,
   the theme, profiles, every game's own provider, the splash gates, the shared orientation reading,
-  toasts, How to Play, the OTA update dialog) around expo-router's stack.
+  toasts, How to Play, the OTA update dialog) around expo-router's stack. The stack follows the app's
+  own theme, not the phone's light or dark appearance: the status bar's text, the root window and the
+  navigation theme's background (what shows in a sliding screen's corners during a push or pop).
 - **Screens** for the routes: `HomeScreen` (the pack's hero, seat 1's button, a row per game, or a
   grid of preview tiles on a wide screen), `LoadoutRoute` and `PlayRoute` (`loadout/[game]`,
   `play/[game]`), `ProfilesRoute` and `StatsScreen`.
@@ -112,7 +114,7 @@ PuckTastic and DuelTastic draw what they always did:
 | `Backdrop?` | A table drawn once behind the whole stack (Solitaire's felt). The stack's two layers go transparent (the screens' `contentStyle` and the navigation theme's `colors.background`, which React Navigation paints around every screen), the root window stays dark so light mode doesn't flash white on a push, Android's push and pop crossfade (its default holds the outgoing screen opaque), and Home, each loadout, the stats screen and Profiles draw transparent, with their buttons and tabs on the theme's surface. |
 | `foreground?` | The color of what those screens draw straight on the background (the hero, the corner buttons, headers), and at half strength a loadout's muted options. Unset is black or white with the theme. |
 | `Provider?` | Mounted once around How to Play and the stack, inside the store, the theme, profiles and every game's `Provider` (one stats context across the pack's games). |
-| `useScreenOptions?` | A hook returning stack screen options (`StackScreenOptions`), merged after the shell's own (a light status bar, Reduce Motion's crossfade). |
+| `useScreenOptions?` | A hook returning stack screen options (`StackScreenOptions`), merged after the shell's own (a status bar style of the pack's own, Reduce Motion's crossfade). The shell's already follow the app's theme, and stay dark over a `Backdrop`. |
 | `useFeedbackSounds?` | A hook returning the two sounds every button plays (`FeedbackSounds`: `selection`, `notification`), in place of the shell's two wavs. |
 | `Toaster?` | The pack's own toaster, drawn in a frame turned with the phone (with the safe-area insets turned onto its edges) in place of the shell's. The toast provider is given no Paper, so nothing portals it out of the frame. |
 | `portraitWhileKeyboard?` | Every screen reads upright while the software keyboard is up (`@tastic/core`'s `OrientationProvider`), for naming a profile sideways. |

package/dist/index.js

@@ -484,8 +484,9 @@ function AppStack() {
   const pack = usePack();
   const { Backdrop } = pack;
   const { dark } = (0, import_auto_paper2.useAutoPaperTheme)();
-  const rootBackground = (0, import_core6.useThemedRootBackground)(Backdrop ? true : dark, false);
-  const statusBar = (0, import_core6.useRotationAwareStatusBar)();
+  const darkRoot = Backdrop ? true : dark;
+  const rootBackground = (0, import_core6.useThemedRootBackground)(darkRoot, false);
+  const statusBar = (0, import_core6.useRotationAwareStatusBar)({ style: darkRoot ? "light" : "dark" });
   const packOptions = (pack.useScreenOptions ?? noScreenOptions)();
   const backdropOptions = Backdrop ? { contentStyle: TRANSPARENT_CONTENT, animation: import_react_native2.Platform.select({ android: "fade" }) } : void 0;
   const playOptions = (0, import_react9.useCallback)(
@@ -495,15 +496,19 @@ function AppStack() {
     },
     [pack.games]
   );
-  const navigationTheme = (0, import_react9.useMemo)(() => Backdrop ? { ...import_expo_router.DarkTheme, colors: { ...import_expo_router.DarkTheme.colors, background: "transparent" } } : null, [Backdrop]);
-  const stack = /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_expo_router.Stack, { screenOptions: { ...rootBackground, ...statusBar, ...backdropOptions, ...packOptions }, children: [
+  const navigationBackground = Backdrop ? TRANSPARENT_CONTENT.backgroundColor : rootBackground.contentStyle.backgroundColor;
+  const navigationTheme = (0, import_react9.useMemo)(() => {
+    const base = darkRoot ? import_expo_router.DarkTheme : import_expo_router.DefaultTheme;
+    return { ...base, colors: { ...base.colors, background: navigationBackground } };
+  }, [darkRoot, navigationBackground]);
+  const stack = /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_expo_router.ThemeProvider, { value: navigationTheme, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_expo_router.Stack, { screenOptions: { ...rootBackground, ...statusBar, ...backdropOptions, ...packOptions }, children: [
     /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_expo_router.Stack.Screen, { name: "index" }),
     /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_expo_router.Stack.Screen, { name: "play/[game]", options: playOptions })
-  ] });
-  if (!Backdrop || !navigationTheme) return stack;
+  ] }) });
+  if (!Backdrop) return stack;
   return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_react_native2.View, { style: styles.root, children: [
     /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Backdrop, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_expo_router.ThemeProvider, { value: navigationTheme, children: stack })
+    stack
   ] });
 }
 function OrientationBridge({ children }) {

package/dist/index.mjs

@@ -29,7 +29,7 @@ import { OrientationProvider, useRotationAwareStatusBar, useThemedRootBackground
 import { RotatedFrame } from "@tastic/hud/chrome";
 import { ProfileColorProvider } from "@tastic/profile";
 import * as Haptics from "expo-haptics";
-import { DarkTheme, Stack, ThemeProvider as NavigationThemeProvider } from "expo-router";
+import { DarkTheme, DefaultTheme, Stack, ThemeProvider as NavigationThemeProvider } from "expo-router";
 import { DeviceMotion } from "expo-sensors";
 import { useCallback as useCallback6, useMemo as useMemo3 } from "react";
 import { Platform as Platform2, StyleSheet, View } from "react-native";
@@ -410,8 +410,9 @@ function AppStack() {
   const pack = usePack();
   const { Backdrop } = pack;
   const { dark } = useAutoPaperTheme();
-  const rootBackground = useThemedRootBackground(Backdrop ? true : dark, false);
-  const statusBar = useRotationAwareStatusBar();
+  const darkRoot = Backdrop ? true : dark;
+  const rootBackground = useThemedRootBackground(darkRoot, false);
+  const statusBar = useRotationAwareStatusBar({ style: darkRoot ? "light" : "dark" });
   const packOptions = (pack.useScreenOptions ?? noScreenOptions)();
   const backdropOptions = Backdrop ? { contentStyle: TRANSPARENT_CONTENT, animation: Platform2.select({ android: "fade" }) } : void 0;
   const playOptions = useCallback6(
@@ -421,15 +422,19 @@ function AppStack() {
     },
     [pack.games]
   );
-  const navigationTheme = useMemo3(() => Backdrop ? { ...DarkTheme, colors: { ...DarkTheme.colors, background: "transparent" } } : null, [Backdrop]);
-  const stack = /* @__PURE__ */ jsxs2(Stack, { screenOptions: { ...rootBackground, ...statusBar, ...backdropOptions, ...packOptions }, children: [
+  const navigationBackground = Backdrop ? TRANSPARENT_CONTENT.backgroundColor : rootBackground.contentStyle.backgroundColor;
+  const navigationTheme = useMemo3(() => {
+    const base = darkRoot ? DarkTheme : DefaultTheme;
+    return { ...base, colors: { ...base.colors, background: navigationBackground } };
+  }, [darkRoot, navigationBackground]);
+  const stack = /* @__PURE__ */ jsx9(NavigationThemeProvider, { value: navigationTheme, children: /* @__PURE__ */ jsxs2(Stack, { screenOptions: { ...rootBackground, ...statusBar, ...backdropOptions, ...packOptions }, children: [
     /* @__PURE__ */ jsx9(Stack.Screen, { name: "index" }),
     /* @__PURE__ */ jsx9(Stack.Screen, { name: "play/[game]", options: playOptions })
-  ] });
-  if (!Backdrop || !navigationTheme) return stack;
+  ] }) });
+  if (!Backdrop) return stack;
   return /* @__PURE__ */ jsxs2(View, { style: styles.root, children: [
     /* @__PURE__ */ jsx9(Backdrop, {}),
-    /* @__PURE__ */ jsx9(NavigationThemeProvider, { value: navigationTheme, children: stack })
+    stack
   ] });
 }
 function OrientationBridge({ children }) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tastic/shell",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "description": "The app around a pack of React Native games, two-seat or for one player: Home, the loadout, the stats screen, Profiles and Settings, the pack's Redux store and its root providers, driven by one PackDefinition",
   "keywords": [
     "react-native",

package/src/RootLayout.tsx

@@ -5,7 +5,7 @@ import { OrientationProvider, useRotationAwareStatusBar, useThemedRootBackground
 import { RotatedFrame } from '@tastic/hud/chrome'
 import { ProfileColorProvider } from '@tastic/profile'
 import * as Haptics from 'expo-haptics'
-import { DarkTheme, Stack, ThemeProvider as NavigationThemeProvider } from 'expo-router'
+import { DarkTheme, DefaultTheme, Stack, ThemeProvider as NavigationThemeProvider } from 'expo-router'
 import { DeviceMotion } from 'expo-sensors'
 import { ReactNode, useCallback, useMemo } from 'react'
 import { Platform, StyleSheet, View } from 'react-native'
@@ -50,13 +50,16 @@ import type { PackDefinition, PackGameDefinition } from './types'
 const PLAY_OPTIONS = { statusBarHidden: true }
 const KEEP_STATUS_BAR_OPTIONS = {}
 
-// A pack's Backdrop (PackDefinition.Backdrop) is drawn once behind the whole stack and has to show
-// through two layers: each screen's contentStyle, and the layers React Navigation paints its theme's
-// `colors.background` on around every screen (the ScreenStack's container on native, each screen's
-// wrapper on the web). contentStyle alone left an opaque light grey slab over Solitaire's felt on the
-// web. Nothing else reads the navigation theme (headers are hidden; Paper has its own). Built only for
-// a pack with a backdrop, as it renders: never at import, where a pack's tests may stand in for
-// expo-router without a DarkTheme.
+// The navigation theme is the root background too. React Navigation paints its theme's
+// `colors.background` on the layers around every screen (the ScreenStack's container on native, each
+// screen's wrapper on the web), and expo-router hands its container no theme, so that was always
+// DefaultTheme's light grey: on iOS it showed in a sliding screen's rounded corners during every push and
+// pop, whatever the app's theme. So the stack always gets a theme whose background is the root
+// background's own color, and a pack's Backdrop (PackDefinition.Backdrop), drawn once behind the whole
+// stack, gets a transparent one so it shows through both layers (contentStyle alone left an opaque light
+// grey slab over Solitaire's felt on the web). Nothing else reads the navigation theme (headers are
+// hidden; Paper has its own). Built as the stack renders, never at import, where a pack's tests may stand
+// in for expo-router without its themes.
 const TRANSPARENT_CONTENT = { backgroundColor: 'transparent' }
 
 // The pack's own screen options (PackDefinition.useScreenOptions), as a hook every pack calls: an
@@ -67,10 +70,13 @@ function AppStack() {
   const pack = usePack()
   const { Backdrop } = pack
   const { dark } = useAutoPaperTheme()
-  // Over a backdrop the root window stays dark whatever the mode: a backdrop is a dark table (the
-  // felt), and a light root window would flash white around it during a push or pop.
-  const rootBackground = useThemedRootBackground(Backdrop ? true : dark, false)
-  const statusBar = useRotationAwareStatusBar()
+  // Over a backdrop the root stays dark whatever the mode: a backdrop is a dark table (the felt), and a
+  // light root window would flash white around it during a push or pop.
+  const darkRoot = Backdrop ? true : dark
+  const rootBackground = useThemedRootBackground(darkRoot, false)
+  // The status bar's text follows the app's theme, not the phone's appearance (react-native-screens'
+  // default `auto`), which drew dark text on a dark theme's black Home with the phone set to light.
+  const statusBar = useRotationAwareStatusBar({ style: darkRoot ? 'light' : 'dark' })
   const packOptions = (pack.useScreenOptions ?? noScreenOptions)()
   // Over a backdrop every screen is transparent, and Android crossfades: its default push and pop hold
   // the outgoing screen opaque for ~450ms while the new one slides over it, which would show Home
@@ -83,18 +89,24 @@ function AppStack() {
     },
     [pack.games]
   )
-  const navigationTheme = useMemo(() => (Backdrop ? { ...DarkTheme, colors: { ...DarkTheme.colors, background: 'transparent' } } : null), [Backdrop])
+  const navigationBackground = Backdrop ? TRANSPARENT_CONTENT.backgroundColor : rootBackground.contentStyle.backgroundColor
+  const navigationTheme = useMemo(() => {
+    const base = darkRoot ? DarkTheme : DefaultTheme
+    return { ...base, colors: { ...base.colors, background: navigationBackground } }
+  }, [darkRoot, navigationBackground])
   const stack = (
-    <Stack screenOptions={{ ...rootBackground, ...statusBar, ...backdropOptions, ...packOptions }}>
-      <Stack.Screen name='index' />
-      <Stack.Screen name='play/[game]' options={playOptions} />
-    </Stack>
+    <NavigationThemeProvider value={navigationTheme}>
+      <Stack screenOptions={{ ...rootBackground, ...statusBar, ...backdropOptions, ...packOptions }}>
+        <Stack.Screen name='index' />
+        <Stack.Screen name='play/[game]' options={playOptions} />
+      </Stack>
+    </NavigationThemeProvider>
   )
-  if (!Backdrop || !navigationTheme) return stack
+  if (!Backdrop) return stack
   return (
     <View style={styles.root}>
       <Backdrop />
-      <NavigationThemeProvider value={navigationTheme}>{stack}</NavigationThemeProvider>
+      {stack}
     </View>
   )
 }