[iOS][Stack] Swipe to go back flash of content opposite to light/dark mode

[kieran-osgood]

Description

Swipe navigation back to previous screen on a Stack causes a flash of content that doesn't match the current theme if appearance has changed.

Locally I have patched it this way to get it more akin to what I expect

diff --git a/ios/RNSScreenStack.mm b/ios/RNSScreenStack.mm
index e37e40ab0aa83d46709a75b0fc0f7234da63cdd3..512032fbebc412827d7d425b20900de165c8be34 100644
--- a/ios/RNSScreenStack.mm
+++ b/ios/RNSScreenStack.mm
@@ -258,6 +258,9 @@
   _presentedModals = [NSMutableArray new];
   _controller = [RNSNavigationController new];
   _controller.delegate = self;
+  // Fix: prevent white flash on iOS swipe-back gesture in dark mode.
+  // The nav controller's view has no backgroundColor by default, exposing white during interactive transitions.
+  _controller.view.backgroundColor = [UIColor systemBackgroundColor];
   _sinkEventsPanGestureRecognizer = [[UIPanGestureRecognizer alloc] init];
 #if !TARGET_OS_TV && !TARGET_OS_VISION
   [self setupGestureHandlers];

Steps to reproduce

1. Launch iOS app
2. Change color scheme from light to dark, or dark to light, it occurs both ways with a flash of the opposite color (on ios cmd + shift + A)
3. Swipe back with high momentum
   there will be a flash of the original themes bg color
   reproducible when starting with light, changing to dark and seeing a white bg flash
   and starting from dark, changing to light, and seeing a a black bg flash

Simulator.Screen.Recording.-.iPhone.Air.-.2026-03-12.at.13.23.39.mov

Snack or a link to a repository

https://github.com/kieran-osgood/reproduction-react-native-screens-back-flash

Screens version

4.23.0

React Native version

0.83.2

Platforms

iOS

JavaScript runtime

Hermes

Workflow

Expo managed workflow

Architecture

Fabric (New Architecture)

Build type

Release mode

Device

Real device

Device model

iPhone Air

Acknowledgements

Yes

[Jianlong-Nie]

Same issue

[kkafar]

Hey, thanks for the report.

@kligarski, haven't we solved very similar issue with Tabs already? Maybe we should expose a way to configure the background colour of a navigation controller container view? Wdyt?

[kieran-osgood]

For what it's worth, I wrote this with an ios focus, I'm currently looking to patch the android side as that has similar issues (I will check after work if the repro repo above shows the android case too and add a video)

[kkafar]

IIRC we had very similar problems with Tabs implementation & the patch you suggest is not enough. It'll work only in case you don't have customised background colour (e.g. some contrasting red or something).

I'll wait with any proceedings for context from @kligarski, as I believe he fixed the original issue in Tabs.

[kieran-osgood]

Totally fair, didn't expect my patch to be enough for every permutation, it just happens to be enough for what my app supports!

[kligarski]

@kligarski, haven't we solved very similar issue with Tabs already? Maybe we should expose a way to configure the background colour of a navigation controller container view? Wdyt?

Yes, we did it in this PR: #3492. Exposing background color of the navigation controller seems like a good idea.

By the way, it's interesting that UITabBarController.view has UIColor.systemBackgroundColor by default but UINavigationController.view has nil. Either way, we should expose it as a prop for navigation controller as well.

[kkafar]

Can I ask you to create ticket for this & add it to current iteration?

[kligarski]

Here it is: https://github.com/software-mansion/react-native-screens-labs/issues/1054.

[ahmedu007]

This also affects Liquid Glass Bottom tabs. The tabs flash white or black until the screen is moved, when they are forced to repaint.

Screen.Recording.2026-03-27.at.15.40.30.mov

[kligarski]

This also affects Liquid Glass Bottom tabs. The tabs flash white or black until the screen is moved, when they are forced to repaint.
Screen.Recording.2026-03-27.at.15.40.30.mov

Hi, @ahmedu007. This behavior is reproducible in bare UIKit app (without react-native) on iOS 26.4:

UIKit_tabs_automatic.mov

Native reproduction

import UIKit

class SceneDelegate: UIResponder, UIWindowSceneDelegate {

  var window: UIWindow?


  func scene(_ scene: UIScene, willConnectTo session: UISceneSession, options connectionOptions: UIScene.ConnectionOptions) {
    // Use this method to optionally configure and attach the UIWindow `window` to the provided UIWindowScene `scene`.
    // If using a storyboard, the `window` property will automatically be initialized and attached to the scene.
    // This delegate does not imply the connecting scene or session are new (see `application:configurationForConnectingSceneSession` instead).
    guard let windowScene = (scene as? UIWindowScene) else { return }
    window = UIWindow(windowScene: windowScene)

    let tab1 = ViewController()
    tab1.title = "Home"
    tab1.tabBarItem = UITabBarItem(title: "Home", image: UIImage(systemName: "house.fill"), tag: 0)

    let tab2 = ViewController()
    tab2.title = "Browse"
    tab2.tabBarItem = UITabBarItem(title: "Browse", image: UIImage(systemName: "square.grid.2x2.fill"), tag: 1)

    let tab3 = ViewController()
    tab3.title = "Settings"
    tab3.tabBarItem = UITabBarItem(title: "Settings", image: UIImage(systemName: "gearshape.fill"), tag: 2)

    let tabBarController = UITabBarController()
    tabBarController.viewControllers = [tab1, tab2, tab3]
    
    // tabBarController.overrideUserInterfaceStyle = .dark

    window?.rootViewController = tabBarController
    window?.makeKeyAndVisible()
  }

  func sceneDidDisconnect(_ scene: UIScene) {
    // Called as the scene is being released by the system.
    // This occurs shortly after the scene enters the background, or when its session is discarded.
    // Release any resources associated with this scene that can be re-created the next time the scene connects.
    // The scene may re-connect later, as its session was not necessarily discarded (see `application:didDiscardSceneSessions` instead).
  }

  func sceneDidBecomeActive(_ scene: UIScene) {
    // Called when the scene has moved from an inactive state to an active state.
    // Use this method to restart any tasks that were paused (or not yet started) when the scene was inactive.
  }

  func sceneWillResignActive(_ scene: UIScene) {
    // Called when the scene will move from an active state to an inactive state.
    // This may occur due to temporary interruptions (ex. an incoming phone call).
  }

  func sceneWillEnterForeground(_ scene: UIScene) {
    // Called as the scene transitions from the background to the foreground.
    // Use this method to undo the changes made on entering the background.
  }

  func sceneDidEnterBackground(_ scene: UIScene) {
    // Called as the scene transitions from the foreground to the background.
    // Use this method to save data, release shared resources, and store enough scene-specific state information
    // to restore the scene back to its current state.
  }


}


import UIKit

class ViewController: UIViewController {

  private let scrollView = UIScrollView()
  private let contentStack = UIStackView()

  override func viewDidLoad() {
    super.viewDidLoad()
    view.backgroundColor = UIColor(white: 0.1, alpha: 1)

    scrollView.translatesAutoresizingMaskIntoConstraints = false
    view.addSubview(scrollView)

    contentStack.axis = .vertical
    contentStack.spacing = 16
    contentStack.translatesAutoresizingMaskIntoConstraints = false
    scrollView.addSubview(contentStack)

    NSLayoutConstraint.activate([
      scrollView.topAnchor.constraint(equalTo: view.topAnchor),
      scrollView.leadingAnchor.constraint(equalTo: view.leadingAnchor),
      scrollView.trailingAnchor.constraint(equalTo: view.trailingAnchor),
      scrollView.bottomAnchor.constraint(equalTo: view.bottomAnchor),

      contentStack.topAnchor.constraint(equalTo: scrollView.contentLayoutGuide.topAnchor, constant: 16),
      contentStack.leadingAnchor.constraint(equalTo: scrollView.frameLayoutGuide.leadingAnchor, constant: 16),
      contentStack.trailingAnchor.constraint(equalTo: scrollView.frameLayoutGuide.trailingAnchor, constant: -16),
      contentStack.bottomAnchor.constraint(equalTo: scrollView.contentLayoutGuide.bottomAnchor, constant: -16),
    ])

    let colors: [UIColor] = [
      UIColor(red: 0.15, green: 0.15, blue: 0.25, alpha: 1),
      UIColor(red: 0.2, green: 0.12, blue: 0.12, alpha: 1),
      UIColor(red: 0.12, green: 0.2, blue: 0.15, alpha: 1),
      UIColor(red: 0.18, green: 0.18, blue: 0.1, alpha: 1),
      UIColor(red: 0.1, green: 0.15, blue: 0.2, alpha: 1),
    ]

    for i in 0..<20 {
      let rect = UIView()
      rect.backgroundColor = colors[i % colors.count]
      rect.layer.cornerRadius = 12
      rect.translatesAutoresizingMaskIntoConstraints = false
      rect.heightAnchor.constraint(equalToConstant: 120).isActive = true
      contentStack.addArrangedSubview(rect)
    }
  }
}

If your tab screens are in dark mode, you can set tabs colorScheme to dark - we added this functionality recently in #3716 (not sure if it's available in react-navigation/expo-router yet). This ensures dark appearance also during transitions:

UIKit_tabs_dark.mov