TVOS Crash when using native stack header search bar

[Duell10111]

Description

When I add a header search bar to a screen on tvOS the app crashes as passing nil to UISearchController is not supported on tvOS.

Documentation of Apple.
https://developer.apple.com/documentation/uikit/uisearchcontroller/1618647-init

Exception:
Exception NSException * "Passing nil to -[UISearchController initWithSearchResultsController:] is not supported on this platform." 0x0000600000d54330

Steps to reproduce

1. Add headerSearchBar to screen on tvOS
2. Navigate to Screen with headerSearchBar

Basically adding this to a screen and opening screen on tvOS.

Snack or a link to a repository

https://github.com/Duell10111/ReactTube/tree/react-native-screen-search-bar-issue-tvos

Screens version

4.29.0

React Native version

0.72

Platforms

tvOS

JavaScript runtime

Hermes

Workflow

React Native (without Expo)

Architecture

Paper (Old Architecture)

Build type

None

Device

iOS simulator

Device model

Apple TV 4K

Acknowledgements

Yes

[tboba]

Hi, thanks for submitting this issue! I can confirm this issue is reproducible for me.

[tboba]

Hi @Duell10111, could you check if the change from this PR works properly for you?
Change in your package.json version of react-native-screens to:

"react-native-screens": "software-mansion/react-native-screens#@tboba/fix-tvos-search-bar"

Cheers!

[Duell10111]

Hi @tboba,
thanks for the quick fix, the crash is not happening anymore with your PR. :)

One question from my side is that on an iPhone the Native Search Bar is visible at the top in the header, where as on tvOS nothing is shown.
This could be some enduser issue from my side or how should the native search bar look like on tvOS. 😅

iPhone:

tvOS:

(Nothing shown except the header title)

[tboba]

@Duell10111 in my case when I'm opening your repro in Apple TV Simulator (iOS 17.2) I have a search bar that looks like this:

Hence I'm concerned on which device are you testing your app - is it a simulator or a physical TVOS device? Also, do you have some reference how the header with a search should look like (from a native iOS app or from some already existing apps)?

[Duell10111]

Hey I am currently still testing in a simulator.
The searchbar you see in the repostiory is a normal textfield as fallback as the native SearchBar is not working atm.

Normally the searchbar on tvOS should look like this.

[tboba]

@Duell10111 sorry for long response, I want to come back to this topic!
Hm, that's interesting. I tried to re-download the example project and add the patch I've mentioned above. In my case, everything is alright (I don't have any label that is a fallback for the search bar or something like that). Could you check if you don't have some platform-specific conditions set?

8mb.video-uyx-WmV5MHyY.mp4

If it still doesn't work in your case, do you maybe have some code references of the native implementation of the search bar on TVOS?
I know that it's possible to add custom searchResultsController but I don't really want to style it for now (maybe we should in the future, as an option of the screen's search bar?).

[Duell10111]

Hi @tboba,

I updated the example to remove the old search bar to prevent any irritations.
I added in a sample app the searchbar via a UISearchContainerViewController to a UIView to get the corresponding view as seen in my previous version as it seemed that this is nessessary for tvOS 😅.

A further question from me is if the search controller is even added to the header on tvOS as it is done on iOS.
The header seems a bit odd for a tvOS variant IMHO. :)

[tboba]

@Duell10111 thanks! Interesting, do you still have that repro with a search bar via UISearchContainerViewController? Right now I'm trying to experiment with the passed searchResultsController, but for now I can't see any search bar on TVOS 🤔

[Duell10111]

Hi @tboba,
yes I tested it with an example library i created for testing.
Here I defined the SearchContainerViewController:
https://github.com/Duell10111/rn-search-bar/blob/6267576621c1b36e5dab9ac8ebeec1e76326a13f/ios/RnSearchBarViewManager.swift#L43

You can test it with the exampleTVOS added in this repository:
https://github.com/Duell10111/rn-search-bar/tree/beta/exampletvOS

[tboba]

Hey @Duell10111, just wanted to note here that I still haven't managed to resolve the problem with missing search bar yet.
I just resolved this issue, since it was addressing the crash in TVOS, so here I recommend to still use the alternative with the imitation of the search bar, but I've opened a draft with my tryings there - #2055

I'll try to fully resolve this PR in free time, but for now it seems to be larger than I expected 😅 Of course if you're feeling strong enough, you can try to implement the idea I've mentioned there!