react-native-screens
react-native-screens copied to clipboard
Search bar on Android incorrectly adjusts other header elements when open
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
- Add a search bar to the header by specifying
headerSearchBarOptions
- Add any element(s) via the
headerLeft
navigation option - (Optional) Add any elements to the
headerRight
navigation option - 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
- [x] Android
- [ ] Web
- [ ] Windows
- [ ] tvOS
Workflow
- [x] 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 |
I can confirm this issue. Forced me to remove searchHeader completely
I face the same issue, thanks for your feedback
could you find a solution ?
@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.
Thank you! :D
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}} />
https://user-images.githubusercontent.com/69375560/194675879-283f5e0a-478b-439e-bda7-ea160f3fb689.mp4