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

[JoniVR]

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

Steps To Reproduce

1. Navigate to a modal screen from a screen with a header.
2. Toggle appearance.
3. 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 shift + cmd + A

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)

[WoLewicki]

Reproduction would for sure be good since we cannot just remove the condition, it was added there for a reason and such change would destroy other behaviors. We probably could change it though so it works correctly in your case.

[JoniVR]

Hi @WoLewicki!

I agree you can't just remove the condition, it was just to demonstrate where the solution might possibly be :)

I added a fresh expo project. It was initially created as a snack but apparently snacks don't support appearance changes (because no app.json support). But as you can (hopefully) see, the issue is reproducible.

Let me know if there's anything else I can do to help!

[WoLewicki]

Can you add the reproduction as a repo on github and a link to it? It would be then easier to elaborate on and it is safer then extracting a ZIP file. You can also just put all the necessary code into one file and provide a snippet with it and then I can just paste it into TestExample.

[JoniVR]

You're right, zip wasn't the best idea, I've setup a repo for it:

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

[WoLewicki]

Can you check if applying changes from #1228 resolves the issue?

[WoLewicki]

Can you check if applying changes from #1228 resolves the issue?

[JoniVR]

Hi @WoLewicki!

Thanks for looking into this. From my initial testing, the issue was not resolved (neither during action sheet or regular).

Perhaps I did something wrong? I'm not too familiar with how expo works under the hood.

I set your fix branch as the dependency of my demo project & added an ActionSheet to test that issue as well. Perhaps I should just eject it and use the Xcode debugger for that line to check if the condition is being met?

[hirbod]

@JoniVR when using expo, you need to build a dev client or eject in order to test patches.

[JoniVR]

@hirbod Thanks for letting me know! The issue does indeed seem to be resolved after testing when ejected, nice!

[hirbod]

@JoniVR and expo also released expo-system-ui with SDK 44 now, where you can change the root color in runtime now!