react-native-screens icon indicating copy to clipboard operation
react-native-screens copied to clipboard

feat(TVOS): Add search bar for TVOS

Open tboba opened this issue 2 years ago • 0 comments

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:

  • https://developer.apple.com/documentation/uikit/uisearchcontroller
  • https://developer.apple.com/documentation/uikit/uisearchcontainerviewcontroller

Changes

Test code and steps to reproduce

Checklist

  • [ ] Included code example that can be used to test this change
  • [ ] Updated TS types
  • [ ] Updated documentation:
    • [ ] https://github.com/software-mansion/react-native-screens/blob/main/guides/GUIDE_FOR_LIBRARY_AUTHORS.md
    • [ ] https://github.com/software-mansion/react-native-screens/blob/main/native-stack/README.md
    • [ ] https://github.com/software-mansion/react-native-screens/blob/main/src/types.tsx
    • [ ] https://github.com/software-mansion/react-native-screens/blob/main/src/native-stack/types.tsx
  • [ ] Ensured that CI passes

tboba avatar Mar 01 '24 14:03 tboba