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

feat(TVOS): Add search bar for TVOS #2055

Draft
wants to merge 3 commits into
base: main
Choose a base branch
from
Draft

Conversation

tboba
Copy link
Member

@tboba tboba commented Mar 1, 2024

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 the Search 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:

  • unmounting the current screen that holds the content of current view,
  • creating new controllers: UISearchController (with that screen as searchResultsController) and UISearchContainerViewController (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),
  • adding the UISearchContainerViewController to the parent of the unmounted screen (and mounted again, but as searchResultsController above).

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:

  • In RouteView, instead of attaching the InnerScreen - attach some other component like SearchScreen that will contain InnerScreen as the subview
  • On the native side, get InnerScreen as the subview and attach it as searchResultsController

This 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

20240301_143542

Helpful links:

Changes

Test code and steps to reproduce

Checklist

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.

None yet

1 participant