Skip to content

Commit

Permalink
fix(TVOS): navbar appearance customization (#2237)
Browse files Browse the repository at this point in the history
## Description

This PR intents to fix navigation bar appearance customization on tvOS.

Now it's impossible to customize the navigation bar on tvOS. The
options, such as `headerTintColor` are not applied at all and the
defaults are making it hard to read when the appearance is set to `dark`
on the device:
- title text color defaults to white
- backgroundColor of modal screens header defaults to dark gray

In current implementation the appearance is set on the navigationItem,
like this: `navigationItem.standardAppearance = appearance`. Out of
curiosity I tried setting the appearance on navigationBar as found in
[this
article](https://developer.apple.com/documentation/uikit/uinavigationcontroller/customizing_your_app_s_navigation_bar?language=objc),
like this: `navigationBar.standardAppearance = appearance` and I got
following error: `New Bar Appearance API is not supported on this
version of tvOS. Use legacy customization`.

Looks like the `UINavigationBarAppearance` does not work for us although
it should be fine on tvOS 13+ according to the
[docs](https://developer.apple.com/documentation/uikit/uinavigationbarappearance?language=objc).
I found using the [legacy
customizations](https://developer.apple.com/documentation/uikit/uinavigationbar/legacy_customizations?language=objc)
to be the only working solution.

Fixes #2222

## Changes

- updating appearance manually for tvOS

## Screenshots / GIFs

| `before` | `after` |
|--------|--------|
| ![Screenshot 2024-07-08 at 10 46
27](https://github.com/software-mansion/react-native-screens/assets/91994767/99b7dcfb-9a0d-4f5d-924b-a96d3c71669b)
| ![Screenshot 2024-07-08 at 10 45
18](https://github.com/software-mansion/react-native-screens/assets/91994767/927a2026-5972-428f-9dd1-f422e1f194db)
|
| ![Screenshot 2024-07-08 at 10 46
42](https://github.com/software-mansion/react-native-screens/assets/91994767/d9ab8a59-3789-4cf7-b11a-10a39bcae0f1)
| ![Screenshot 2024-07-08 at 10 45
33](https://github.com/software-mansion/react-native-screens/assets/91994767/45e00286-5f5c-47d2-8e08-4f0bcc8ecd04)
|

## Test code and steps to reproduce

- Use the `TVOSExample`
- Toggle light/dark appearance on the device
- Customize header options, such as `headerTintColor`

## Checklist

- [x] Ensured that CI passes
  • Loading branch information
alduzy authored Jul 15, 2024
1 parent 6219db1 commit 2cd05a8
Showing 1 changed file with 6 additions and 0 deletions.
6 changes: 6 additions & 0 deletions ios/RNSScreenStackHeaderConfig.mm
Original file line number Diff line number Diff line change
Expand Up @@ -589,6 +589,12 @@ + (void)updateViewController:(UIViewController *)vc
navitem.standardAppearance = appearance;
navitem.compactAppearance = appearance;

// appearance does not apply to the tvOS so we need to use lagacy customization
#if TARGET_OS_TV
navctr.navigationBar.titleTextAttributes = appearance.titleTextAttributes;
navctr.navigationBar.backgroundColor = appearance.backgroundColor;
#endif

UINavigationBarAppearance *scrollEdgeAppearance =
[[UINavigationBarAppearance alloc] initWithBarAppearance:appearance];
if (config.largeTitleBackgroundColor != nil) {
Expand Down

0 comments on commit 2cd05a8

Please sign in to comment.