Search bar on Android incorrectly adjusts other header elements when open

[nrwinner]

Description

On Android, the search bar does not properly adjust header elements.

• Elements placed via headerRight are "pushed" out of the way and to the left of the search bar
• If there are any elements placed via headerLeft, both the screen title and said elements are not adjusted at all and appear under the search bar

Screenshots

Steps To Reproduce

1. Add a search bar to the header by specifying headerSearchBarOptions
2. Add any element(s) via the headerLeft navigation option
3. (Optional) Add any elements to the headerRight navigation option
4. Open the search bar on android

Expected behavior

• The header buttons on both the left side and the right side should no longer be visible.
• The search bar should appear as the only element in the header.
• The input should be unobstructed.

Actual behavior

• Any elements placed via headerRight seem to get "pushed" out of the way to the left of the search bar
• The screen title as well as any elements placed by headerLeft are not adjusted and appear under the search bar

Reproduction

https://snack.expo.dev/@nrwinner/android-search-bug---react-native-screens-repro

Platform

• iOS
• Android
• Web
• Windows
• tvOS

Workflow

• Managed workflow
• Bare workflow

Package versions

package	version
react-native	0.68.1
@react-navigation/native	6.0.2
@react-navigation/native-stack	6.1.0
react-native-screens	3.13.1
react-native-safe-area-context	4.2.4
expo	45.0.0

[hirbod]

I can confirm this issue. Forced me to remove searchHeader completely

[wem2017]

I face the same issue, thanks for your feedback

[EliasBarrera]

could you find a solution ?

[nrwinner]

@EliasBarrera I used the onOpen and onClose callbacks from the search bar to hide the header buttons while the search bar is open. Less than ideal and kinda laggy but it's the best I could do until this gets fixed.

[EliasBarrera]

Thank you! :D

[mazurGit]

You can try to place component on headerRight instead of headerLeft and add marginRight to it :
const {width} = Dimensions.get('screen');
...
headerRight:() => <FiltersHeader contentContainerStyle={{marginRight: width - 110}} />

2022-10-08.at.02-42-44.mp4

[garrettg123]

Talk about a second-class citizen called Android. This still exists... Here's how I've implemented @nrwinner's idea:

  useLayoutEffect(() => {
    navigation.setOptions({
      headerSearchBarOptions: {
        onOpen: () => {
          setIsSearchBarOpen(true)
        },
        onClose: () => {
          setIsSearchBarOpen(false)
        },
      },
      headerLeft: isSearchBarOpen ? () => null : undefined,
      headerBackVisible: isSearchBarOpen ? false : true,
      headerTitle: isSearchBarOpen ? '' : undefined,
    })
  }, [navigation, isSearchBarOpen])

[tboba]

Hi @nrwinner, thanks for reporting that! Sorry for the really late response 🙏
I've managed to reproduce this problem and successfully fixed that! I'll create a PR shortly 🥳

[tboba]

Hi @nrwinner @garrettg123 @EliasBarrera @wem2017 @hirbod, there's a new version of react-native-screens: 3.26.0 which has this change included. Check it out! If you find something wrong related to the newest version (this change is still buggy or doesn't work for you) let us know 🎉

[hirbod]

Great, we actually have a use case for this so I am keen to try it