Summary

On Android, the ConnectAccountOnboarding navigation bar is always white with black text, and the area behind the status bar is white too. When the app uses a dark appearance, a white bar sits above a dark embedded component.

This change makes the bar follow the appearance, using only existing props:

• ConnectAccountOnboarding passes the colorBackground appearance variable as the backgroundColor of the bar's style, and as the background of the safe area behind the status bar (the component body already used it).
• The native bar now follows style.backgroundColor. Its toolbar draws its own background, which used to cover the one React Native applies, so the view manager forwards the color to the toolbar.
• The title and close icon switch between black and white, whichever is more readable on that background.
• Without a background color (the default), the bar is still white with black content.

There are no API changes: no new props, and the API report, the native spec and the NavigationBar wrapper are untouched.

This matches iOS, where the native bar's background is also the colorBackground appearance variable and the title and close button are not coloured from colorText either; they use the system colors, which are black in light mode and white in dark mode. Before this change nothing let an app set the Android title color, so choosing black or white by contrast removes no option.

NotificationBanner renders the same bar and could pass the same style. I did not change it because I could not exercise it.

Motivation

In dark mode the Android onboarding screen shows a white header and white status-bar area above a dark component, which looks broken compared with iOS. NavigationBarView.kt hardcodes Color.WHITE for the toolbar and Color.BLACK for the title and close icon, so apps cannot fix this through the appearance API.

Testing

• I tested this manually
• I added automated tests

Manually, on an Android API 37 emulator (Pixel 9a profile), with the change applied to stripe-react-native 0.79.0 in an app that sets the Connect appearance from its own light and dark themes:

• Dark: the bar and the status-bar area are dark, the title and close icon are white, and the status-bar icons are readable.
• Light: the bar is white with dark content.

Not tested: a real device, other Android versions, NotificationBanner, a background that is a mid-tone color, and a live theme change while the screen is open (the status-bar icons keep the style they had when the screen opened).

Automated: two Components tests check that, on Android, the bar's style gets the appearance background and falls back to white when the appearance sets none. Six Robolectric tests cover the black or white content choice. A deliberate break of each is caught. yarn test, yarn lint and tsc pass, and so do the Kotlin format and lint hooks. I ran the Robolectric tests through an app's Gradle project, not through yarn test:unit:android, which needs the example app's dependencies.

Documentation

Select one:

• I have added relevant documentation for my changes.
• This PR does not result in any developer-facing changes.

Added a CHANGELOG entry.