Mohamed Boudra
92d7066601
Nested native stacks fell back to the navigation library's light background during cross-stack swaps. Share the active app surface color across every stack without subscribing route layouts to all theme runtime changes.
27 lines
881 B
TypeScript
27 lines
881 B
TypeScript
import type { NativeStackNavigationOptions } from "@react-navigation/native-stack";
|
|
import { Stack } from "expo-router";
|
|
import { type ReactNode, useMemo } from "react";
|
|
import { withUnistyles } from "react-native-unistyles";
|
|
|
|
interface ThemedStackBaseProps {
|
|
backgroundColor: string;
|
|
children?: ReactNode;
|
|
screenOptions?: NativeStackNavigationOptions;
|
|
}
|
|
|
|
function ThemedStackBase({ backgroundColor, children, screenOptions }: ThemedStackBaseProps) {
|
|
const themedScreenOptions = useMemo<NativeStackNavigationOptions>(
|
|
() => ({
|
|
...screenOptions,
|
|
contentStyle: [{ backgroundColor }, screenOptions?.contentStyle],
|
|
}),
|
|
[backgroundColor, screenOptions],
|
|
);
|
|
|
|
return <Stack screenOptions={themedScreenOptions}>{children}</Stack>;
|
|
}
|
|
|
|
export const ThemedStack = withUnistyles(ThemedStackBase, (theme) => ({
|
|
backgroundColor: theme.colors.surface0,
|
|
}));
|