fix(navigation): paint scene background to remove white modal flicker (#912)

The NavigationContainer was rendered without a theme, so React Navigation
fell back to its light DefaultTheme (background rgb(242,242,242)). Native
Stack uses the theme's colors.background as each screen's default
contentStyle background, so the light native scene container showed through
during transitions — most visibly as a white flicker at the iOS modal's
rounded corners while a screen slides in horizontally (e.g. the Send flow's
slide_from_right push).

Set a dark NAVIGATION_THEME (extends DarkTheme, overrides background/card
with the app's #161616 surface token) on the NavigationContainer so the
native scene background is dark everywhere. This is a central fix covering
every navigator and screen rather than patching a single flow.

NAVIGATION_THEME lives in its own config/navigationTheme module rather than
config/theme so the design-token file stays free of the React Navigation
dependency — config/theme is imported by nearly every component, and several
component tests replace @react-navigation/native with an inline mock that
omits DarkTheme.

Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Author: CassioMG

__tests__/config/navigationTheme.test.ts

@@ -0,0 +1,24 @@
+import { DefaultTheme } from "@react-navigation/native";
+import { NAVIGATION_THEME } from "config/navigationTheme";
+import { THEME } from "config/theme";
+
+describe("NAVIGATION_THEME", () => {
+  it("uses the app's dark surface as the scene background", () => {
+    // React Navigation's Native Stack paints each screen's contentStyle with
+    // the theme's `colors.background` by default. If we don't override it, the
+    // light DefaultTheme background flashes through during transitions (most
+    // visibly as a white flicker at the iOS modal's rounded corners). The
+    // navigation theme must therefore match the app's dark surface.
+    expect(NAVIGATION_THEME.colors.background).toBe(
+      THEME.colors.background.default,
+    );
+    expect(NAVIGATION_THEME.colors.card).toBe(THEME.colors.background.default);
+  });
+
+  it("does not fall back to the light DefaultTheme background", () => {
+    expect(NAVIGATION_THEME.colors.background).not.toBe(
+      DefaultTheme.colors.background,
+    );
+    expect(NAVIGATION_THEME.dark).toBe(true);
+  });
+});

src/components/App.tsx

@@ -6,6 +6,7 @@ import {
 import * as Sentry from "@sentry/react-native";
 import { AuthErrorToastListener } from "components/AuthErrorToastListener";
 import { initializeSentryLogger } from "config/logger";
+import { NAVIGATION_THEME } from "config/navigationTheme";
 import { RootStackParamList } from "config/routes";
 import { initializeSentry } from "config/sentryConfig";
 import { THEME } from "config/theme";
@@ -70,6 +71,7 @@ export const App = (): React.JSX.Element => {
                 <AuthErrorToastListener />
                 <NavigationContainer
                   ref={navigationRef}
+                  theme={NAVIGATION_THEME}
                   onStateChange={onStateChange}
                 >
                   <AuthCheckProvider>

src/config/navigationTheme.ts

@@ -0,0 +1,30 @@
+import { DarkTheme, Theme } from "@react-navigation/native";
+import { THEME } from "config/theme";
+
+/**
+ * React Navigation theme for the app's top-level `<NavigationContainer>`.
+ *
+ * Without an explicit theme, React Navigation falls back to its light
+ * `DefaultTheme` (background `rgb(242, 242, 242)`). Native Stack uses the
+ * theme's `colors.background` as each screen's default `contentStyle`
+ * background, so that light native container shows through during transitions
+ * — most visibly as a white flicker at the iOS modal's rounded corners while a
+ * screen slides in horizontally. Painting the native scene background with the
+ * app's dark surface removes that flash for every navigator and every screen.
+ *
+ * The app forces dark mode (see `App.tsx`), so this extends `DarkTheme` and
+ * overrides the surface colors with the app's own background token.
+ *
+ * Kept in its own module (rather than `config/theme.ts`) so the design-token
+ * file stays free of the React Navigation dependency — `config/theme` is
+ * imported by nearly every component, and several component tests replace
+ * `@react-navigation/native` with an inline mock that omits `DarkTheme`.
+ */
+export const NAVIGATION_THEME: Theme = {
+  ...DarkTheme,
+  colors: {
+    ...DarkTheme.colors,
+    background: THEME.colors.background.default,
+    card: THEME.colors.background.default,
+  },
+};