fix: buggy behaviour of search bar / large title on Fabric with native stack v6

[kkafar]

Motivation

UIKit requires ScrollView to be at index 0 in given view's subview array to enable it's interaction with navigation bar. On Fabric DebugContainer view got flattened, however it was not removed from hierarchy -- instead the view was attached as first child of the RNSScreenView disabling system interaction between navigation bar and a scroll view.

See

• fix(iOS): buggy search bar / large title behaviour on Fabric software-mansion/react-native-screens#1825

for broader context and explanation.

Test plan

Before

Simulator.Screen.Recording.-.iPhone.14.-.2023-07-18.at.23.31.05.mp4

After

Simulator.Screen.Recording.-.iPhone.14.-.2023-07-18.at.23.28.42.mp4

[github-actions]

Hey @autofix-ci[bot]! Thanks for opening your first pull request in this repo. If you haven't already, make sure to read our contribution guidelines.

[codecov-commenter]

Codecov Report

Patch coverage: 37.50% and project coverage change: -0.02% ⚠️

Comparison is base (cf836cb) 74.04% compared to head (8d4cb30) 74.02%.
Report is 2 commits behind head on 6.x.

❗ Your organization is not using the GitHub App Integration. As a result you may experience degraded service beginning May 15th. Please install the Github App Integration for your organization. Read more.

Additional details and impacted files

@@            Coverage Diff             @@
##              6.x   #11502      +/-   ##
==========================================
- Coverage   74.04%   74.02%   -0.02%     
==========================================
  Files         177      177              
  Lines        5628     5628              
  Branches     2214     2213       -1     
==========================================
- Hits         4167     4166       -1     
- Misses       1412     1413       +1     
  Partials       49       49              

Files Changed	Coverage Δ
packages/drawer/src/views/DrawerView.tsx	72.04% <0.00%> (ø)
.../native-stack/src/views/NativeStackView.native.tsx	78.94% <42.85%> (ø)
...s/native-stack/src/views/DebugContainer.native.tsx	87.50% <75.00%> (-12.50%)	⬇️

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[kkafar]

Asking for a review @kacperkapusciak

[kkafar]

Just a remark for future reviewer

[satya164]

Thanks for the PR

[Gregoirevda]

@satya164 @kkafar This PR which is the only code diff in @react-navigation/native-stack 6.9.14 totally breaks the android search when not used with Fabric. 6.9.13 works fine. The search icon doesn't appear in the header. iOS seems to be working fine.

[github-actions]

Hey! This issue is closed and isn't watched by the core team. You are welcome to discuss the issue with others in this thread, but if you think this issue is still valid and needs to be tracked, please open a new issue with a repro.

[kkafar]

@Gregoirevda, would you mind posting a snack / repo so that I might reproduce? I've got working Android searchbar in my example app.

Ideally create a new issue.

[kkafar]

@Gregoirevda is is also likely that the issue has been already fixed with software-mansion/react-native-screens#1883

New screens version will be released with this fix in couple of days.

[Gregoirevda]

@kkafar Great work, will give an update when available

[SamPoate]

FYI, this PR broke header Left/Right components that used absolute placed buttons on iOS. I've traced it back to the latest working package being "@react-navigation/native-stack": "6.9.13".