feat(TVOS): Add search bar for TVOS #2055
Draft
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Description
Currently, on TVOS there's no implementation for search bar on TVOS. Instead of showing the screen with the search bar, React Native Screens renders only the content of the screen, without any search bar (or search container, in case of TVOS).
This draft is a prototype for adding the search bar on TVOS. Happily, the search bar has been implemented there, it is visible in
ReactTubeExample
project (added in this PR) while traversing to theSearch
screen and is being shown.However, these changes should be replaced with other alternative, because of the wrong way how we're manually unmounting and mounting the screen as
searchResultsController
inside the UISearchController in this PR.In current idea, we're calling the
addSearchContainerToController
function (taken from RNSSearchBar class), where we are:UISearchController
(with that screen as searchResultsController) andUISearchContainerViewController
(with created search controller) - this process automatically tries to present the UISearchController in the hierarchy (which means that UISearchController is presented modally and is most likely a transparent modal - previous screen is not being unmounted),This may lead to some unintended side-effects, like non-layoutable screens, bugs with navigating between screens, or other native errors, made by iOS. Unfortunately, because of how the SearchContainer is made, as it is transparent modal - it also reveals what is behind the UISearchContainerViewController, since it has transparent color at the beginning. Changing the color also doesn't help, since the title of the previous screen is still visible, while search container is being shown (UINavigationBar is always on top in such case). Using
navigation.replace()
might resolve that problem, but we could still require from users to use .replace, instead of using .navigate or .push.Also, because of the moment when we're trying to add UISearchContainerViewController (it is being added in ScreenStackHeaderConfig, while adding the subviews), the content jumps while screen appears and is being moved lower when the screen fully appears, since the search container arrives at that time.
The idea how we can change such behavior begins on the JS side, where we can:
SearchScreen
that will contain InnerScreen as the subviewThis way, we could resolve the problems mentioned above and manage the options of the SearchScreen itself.
You can use
ReactTubeExample
to test current behavior, attached in this PR. I've also attached a new component there - SearchBarBackground, but I feel it may be unnecessary, because of the alternative solution.Notes used for making alternative solution
Helpful links:
Changes
Test code and steps to reproduce
Checklist