feat(iOS, Stack, Tabs, **experimental**): add prop to override user interface style

[kligarski]

Description

Adds experimental_userInterfaceStyle prop to RNSScreenStackHeaderConfig and RNSBottomTabsScreenComponentView. This allows enforcing light theme for navigation bars when device is in dark mode, preventing navigation bar flashes on iOS 26.

Important

Changes to react-navigation are required for this PR to work. To test the chagnes, apply the following patch:

Patch

diff --git a/packages/native-stack/src/types.tsx b/packages/native-stack/src/types.tsx
index c2c00d32d..fbdec1817 100644
--- a/packages/native-stack/src/types.tsx
+++ b/packages/native-stack/src/types.tsx
@@ -675,6 +675,15 @@ export type NativeStackNavigationOptions = {
    * @platform android
    */
   unstable_sheetFooter?: () => React.ReactNode;
+  /**
+   * Allows to override system appearance for the navigation bar.
+   *
+   * Does not support dynamic changes to the prop value for the currently visible screen.
+   *
+   * @default unspecified
+   * @platform ios
+   */
+  experimental_userInterfaceStyle?: ScreenStackHeaderConfigProps['experimental_userInterfaceStyle'];
 };
 
 export type NativeStackNavigatorProps = DefaultNavigatorOptions<
diff --git a/packages/native-stack/src/views/useHeaderConfigProps.tsx b/packages/native-stack/src/views/useHeaderConfigProps.tsx
index 74ff388d4..5df1ce1e7 100644
--- a/packages/native-stack/src/views/useHeaderConfigProps.tsx
+++ b/packages/native-stack/src/views/useHeaderConfigProps.tsx
@@ -49,6 +49,7 @@ export function useHeaderConfigProps({
   headerBack,
   route,
   title,
+  experimental_userInterfaceStyle,
 }: Props) {
   const { direction } = useLocale();
   const { colors, fonts } = useTheme();
@@ -302,6 +303,7 @@ export function useHeaderConfigProps({
     titleFontWeight: String(titleFontWeight),
     topInsetEnabled: headerTopInsetEnabled,
     translucent: translucent === true,
+    experimental_userInterfaceStyle,
     children,
   } as const;
 }

before	after
theme_before.mov	theme_after.mov

Fixes #3162.

Changes

• add experimental_userInterfaceStyle to RNSScreenStackHeaderConfig
• add experimental_userInterfaceStyle to RNSBottomTabsScreenComponentView
• use new props when navigating between screens

Test code and steps to reproduce

Run Test3342. Please note IMPORTANT section above.

Checklist

• Included code example that can be used to test this change
• Updated TS types
• Updated documentation:
  • https://github.com/software-mansion/react-native-screens/blob/main/guides/GUIDE_FOR_LIBRARY_AUTHORS.md
  • https://github.com/software-mansion/react-native-screens/blob/main/native-stack/README.md
  • https://github.com/software-mansion/react-native-screens/blob/main/src/types.tsx
  • https://github.com/software-mansion/react-native-screens/blob/main/src/native-stack/types.tsx
• Ensured that CI passes

[kkafar]

just naming remarks. Overall it looks good

[kkafar]

Hey, this looks good. I'd only ask if we can deduplicate the UserInterfaceStyle props.

Also naming a prop overrideUserInterfaceStyle suggests that this is a boolean. Maybe let's name it userInterfaceStyleOverride or just userInterfaceStyle? I know it's named like this in UIKit but imo id does not make sense. What do you think?

[kkafar]

Looks good. Thank you