Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

iOS: Navbar BG color below modal does not change when appearance changes

See original GitHub issue

Sorry about the template, I created this issue as a reference (#677), which removed it. I added it below.

I found a solution to this problem, which can probably be fixed quite easily (still needs actual proper logic, but shows where to fix it).

In the file RNSSCreenStackHeaderConfig.m, if we modify the updateController condition, the background update happens correctly.

diff --git a/node_modules/react-native-screens/ios/RNSScreenStackHeaderConfig.m b/node_modules/react-native-screens/ios/RNSScreenStackHeaderConfig.m
index 584a884..33e07da 100644
--- a/node_modules/react-native-screens/ios/RNSScreenStackHeaderConfig.m
+++ b/node_modules/react-native-screens/ios/RNSScreenStackHeaderConfig.m
@@ -152,9 +152,8 @@ - (void)updateViewControllerIfNeeded
     nextVC = nav.topViewController;
   }
 
-  BOOL isInFullScreenModal = nav == nil && _screenView.stackPresentation == RNSScreenStackPresentationFullScreenModal;
   // if nav is nil, it means we can be in a fullScreen modal, so there is no nextVC, but we still want to update
-  if (vc != nil && (nextVC == vc || isInFullScreenModal)) {
+  if (vc != nil) {
     [RNSScreenStackHeaderConfig updateViewController:self.screenView.controller withConfig:self animated:YES];
   }
 }

Specific line

before	after

Description

Screenshots

example

Steps To Reproduce

Navigate to a modal screen from a screen with a header.
Toggle appearance.
Notice how bottom header doesn’t update.

Expected behavior

Bottom header should also follow the appearance change. When dismissing the modal, the header still remains at the incorrect color.

Actual behavior

The modal header doesn’t update its style at all (the view itself does however update its appearance).

Another side note, the same thing happens to the modal when another overlay component is open while triggering appearance changes:

This issue is also resolved when removing the condition. So from what I understand, the code currently allows only the topmost VC to update its views, while in some cases there can be multiple layers below that need to be updated (perhaps also worth testing if having 3 stacked modals also affects this).

Reproduction

Not a “snack” because they don’t support light/dark mode afaik. You can just unzip, yarn install && yarn start and then try on an iOS sim. Toggle appearance easily using <kbd>shift</kbd> + <kbd>cmd</kbd> + <kbd>A</kbd>

https://github.com/JoniVR/RN-Screens-modal-bug-demo

Platform

iOS
Android
Web
Windows
tvOS

Workflow

Managed workflow
Bare workflow

Original issue discovered in Bare workflow, but also present in Managed workflow (see provided repro)

Package versions

package	version
react-native	0.66.3
@react-navigation/native	6.0.6
@react-navigation/native-stack	6.2.5
react-native-screens	3.9.0
react-native-safe-area-context	3.3.2
react-native-gesture-handler	1.10.3
react-native-reanimated	npm:react-native-reanimated-savv@2.2.6 (workaround for crashes)