Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(TVOS): navbar appearance customization #2237

Merged
merged 1 commit into from
Jul 15, 2024
Merged

Conversation

alduzy
Copy link
Member

@alduzy alduzy commented Jul 8, 2024

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, 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. I found using the legacy customizations 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 Screenshot 2024-07-08 at 10 45 18
Screenshot 2024-07-08 at 10 46 42 Screenshot 2024-07-08 at 10 45 33

Test code and steps to reproduce

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

Checklist

  • Ensured that CI passes

Sorry, something went wrong.

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
@alduzy alduzy changed the title fix(TVOS): navbar appearance colors fix(TVOS): navbar appearance customization Jul 8, 2024
Copy link
Member

@kkafar kkafar left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Okay, the diff you propose impacts only TVOS & if it improves the situation there I'm for it.

@alduzy alduzy merged commit 2cd05a8 into main Jul 15, 2024
5 checks passed
@alduzy alduzy deleted the @alduzy/tvos-navbar-theme branch July 15, 2024 08:16
ja1ns pushed a commit to WiseOwlTech/react-native-screens that referenced this pull request Oct 9, 2024
## 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 software-mansion#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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

TVOS does not support dark appearance
2 participants