[native-stack] Focused search bar causes new screens to have incorrect header

[nandorojo]

Description

I'm using the iOS search bar to search artists. Works as expected.

When you click on an artist, it opens the Artist screen.

The Artist screen has headerShown: false, since I have a custom header on that screen.

// this is the screen that search navigates to
<Screen
  name="Artist"
  component={ArtistScreen}
  options={{
    headerShown: false,
  }}
  getId={({ params }) => {
    return params?.slug
  }}
/>

However, if I open the artist screen while the search bar is focused, it adds a header to the Artist screen, and creates a glitchy experience when I go back.

Screenshots

Works

When the search bar is not focused, and I click an artist, it works normally. It navigates to the Artist screen, and there's no header.

Video: https://www.loom.com/share/174403203eb941f9a5731ba62253ab11

Doesn't work

However, when the search bar is focused, it incorrectly adds a header to the Artist screen. Then, going back causes a weird jump.

Video: https://www.loom.com/share/8f8037145df649f880b891f52b099520

Steps To Reproduce

1. Create a native stack screen with a search bar
2. Navigate to a screen that has headerShown: false while the search bar is focused.
3. Try going back, too

Expected behavior

Having a searchBar should not add a header when opening a screen that has headerShown: false.

Actual behavior

A focused searchBar causes screens opened to have a header. It also causes a layout glitch when you go back. I have contentInsetAdjustmentBehavior="automatic" on my ScrollView like I saw in the TestExample file.

Snack or minimal code example

Expo Snack doesn't support 3.4.0. Let me know if you need me to make a full reproduction.

Package versions

• React: 16.8.3
• React Native: 0.63.4
• React Native Screens: 3.4.0

[nandorojo]

Setting searchBar.hideNavigationBar: false makes the header bug go away. However, going back still causes the layout shift if the search bar was focused before opening the artist screen.

Also, I'd prefer to have hideNavigationBar: true. But I'll leave it false for now as a workaround.

[viet97]

123925662-55fec500-d9b5-11eb-9cf9-f3a1f4670c64.mp4

i'm having same problem. Is it caused by createNativeStackNavigator() ?

[Ubax]

@nandorojo Thanks for finding it. Unfortunately this is a native iOS issue stack overflow.

There is no easy fix on our side and we don't want to introduce very complex native logic to create workaround.

After inspecting this issue I came up with a JS workaround that should work for you.
https://gist.github.com/Ubax/086c18d07044ede728aa0ea8aa56b7d5

If it works for you, please let us know.

[Ubax]

What you can also do is wrap content in <ScrollView contentInsetAdjustmentBehavior="automatic">. Then set headerTranslucent: true and optionally searchBar.hideWhenScrolling: false. This should fix the layout shift.

[nandorojo]

I’ll try this, thanks!

[Ubax]

If it works for you, please let us know.

Additionally #1153 is fixing the header bug, so you can test it too

[nandorojo]

@Ubax the solution in #1153 is better for me - I prefer it working without the custom work around. Thank you for that PR! Will keep testing

[Ubax]

@nandorojo I merged #1153 and therefore I am closing the issue.
If there are still some problems please let us know.