fix(iOS, Stack v4): fix missing search bar on root screen on iOS 26 #3098
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Contributor
Author
|
Created a ticket for the future to look into whether this fix is necessary: https://github.com/software-mansion/react-native-screens-labs/issues/338. |
Contributor
Author
|
Still necessary on iOS 26 beta 5. |
kkafar
approved these changes
Aug 6, 2025
Member
kkafar
left a comment
kkafar
left a comment
There was a problem hiding this comment.
I would just add the comment & if this workaround works -> let's go with it.
Co-authored-by: Kacper Kafara <[email protected]>
Merged
8 tasks
kkafar
pushed a commit
that referenced
this pull request
Sep 2, 2025
…ation with toolbar (#3168) ## Description This PR addresses changes to search bar on iOS 26. Closes software-mansion/react-native-screens-labs#339. After merging, docs in `react-navigation` should also be updated, issue for this: software-mansion/react-native-screens-labs#384. ## Changes - add support for new search bar placements (`integrated`, `integratedButton`, `integratedCentered`), - add prop for controlling new search bar toolbar integration on iPhone (`allowToolbarIntegration`), - deprecate one of the placements (`inline` has been renamed to `integrated` starting from iOS 26) and `cancelButtonText` (search cancel button does not have any text on iOS 26), - reduce scope of workaround introduced in #3098 (only to `stacked` placement) - disable recycling for `SearchBar` (workaround above does not solve all bugs with search bar on iOS 26). ## Screenshots / GIFs https://github.com/user-attachments/assets/bcbb86e1-298d-4942-a290-3acdaef4214d > [!NOTE] > If you use `integrated`, `integratedButton` or `integratedCentered`, the integration into toolbar is delayed and causes a flash (you can see it on the video). This bug happens also in bare UIKit app. The best workarounds I could find are: > - use `automatic` with transparent header, > - use `automatic` with `hideWhenScrolling: true` > > Details: software-mansion/react-native-screens-labs#331 (comment) > > There is also another bug (also reproducible but due to how tabs+freeze work in screens, it's a little bit worse in our case). I think it's more of an edge case though (if you use tab with search systemItem but disable toolbar integration, the search bar is empty). Details: software-mansion/react-native-screens-labs#331 (comment) ## Test code and steps to reproduce Run `Test3168`. You can also see other Search Bar related test screens like `SearchBar.tsx`, `Test758`, `Test1097`. ## Checklist - [x] Included code example that can be used to test this change - [x] Updated TS types - [ ] Updated documentation: <!-- For adding new props to native-stack --> - [x] 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 - [x] 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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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
Fixes missing search bar on root screen on iOS 26. (Part of https://github.com/software-mansion/react-native-screens-labs/issues/331).
The search bar is missing on root screen on iOS 26 beta 4 (only on iPhones). I wasn't able to reproduce this issue in bare UIKit app.
I found that on iOS 26, there are new properties for search bar, including searchBarPlacementAllowsToolbarIntegration. Setting this prop to
falsefixes the issue. I am not 100% sure what is the intended use case for this prop. If I understand correctly (but I might be wrong here), if this is set totrueandpreferredSearchBarPlacementis set tointegratedorintegratedButton, then you can use search bar button from searchBarPlacementBarButtonItem to place it insidetoolbarItemsin a position you want, but in our case, bothpreferredSearchBarPlacementandsearchBarPlacementare set toUINavigationItemSearchBarPlacementStackedso this does not add up.This might be a bug because even in the most recent release notes for iOS 26 beta 4, some workarounds connected to this prop are mentioned:
Changes
searchBarPlacementAllowsToolbarIntegrationtoNOScreenshots / GIFs
before_searchbar.mov
after_searchbar.mov
Test code and steps to reproduce
Run
Test758. You should be able to use search bar on the root screen.Checklist