fix(iOS): allow to hide the search bar (#2926)

## Description

Search bar on iOS would not disappear after setting
`headerSearchBarOptions` to `undefined`. It seems like this issue was
present [for some time
now](#758 (comment))
but somehow it wasn't reported in a seperate issue.

## Changes

- set `navItem.searchController` to `nil` if there is no
`RNSScreenStackHeaderSubviewTypeSearchBar` anymore
- add `Test2926` test screen and e2e test

## Test code and steps to reproduce

Open `Test2926` in Example app, try to hide the search bar.

## Checklist

- [x] Included code example that can be used to test this change
- [x] Ensured that CI passes

Author: kligarski

FabricExample/e2e/issuesTests/Test2926.e2e.ts

@@ -0,0 +1,40 @@
+import { device, expect, element, by } from 'detox';
+import { describeIfiOS } from '../e2e-utils';
+
+// PR related to iOS search bar
+describeIfiOS('Test2926', () => {
+  beforeAll(async () => {
+    await device.reloadReactNative();
+  });
+
+  it('Test2926 should exist', async () => {
+    await waitFor(element(by.id('root-screen-tests-Test2926')))
+      .toBeVisible()
+      .whileElement(by.id('root-screen-examples-scrollview'))
+      .scroll(600, 'down', NaN, 0.85);
+
+    await expect(element(by.id('root-screen-tests-Test2926'))).toBeVisible();
+    await element(by.id('root-screen-tests-Test2926')).tap();
+  });
+
+  it('searchBar should be initially visible', async () => {
+    await expect(element(by.type('UISearchBarTextField'))).toBeVisible();
+  });
+
+  it('searchBar should hide after setting headerSearchBarOptions to undefined', async () => {
+    await element(by.id('home-switch-search-enabled')).tap();
+    await expect(element(by.type('UISearchBarTextField'))).not.toBeVisible();
+  });
+
+  it('searchBar value should stay in text field after coming back from another screen', async () => {
+    await element(by.id('home-switch-search-enabled')).tap();
+
+    await element(by.type('UISearchBarTextField')).replaceText('Item 2');
+    await element(by.id('home-button-open-second')).tap();
+
+    await element(by.id('BackButton')).tap();
+
+    await expect(element(by.type('UISearchBarTextField'))).toBeVisible();
+    await expect(element(by.type('UISearchBarTextField'))).toHaveText('Item 2');
+  });
+});

apps/src/tests/Test2926.tsx

@@ -0,0 +1,93 @@
+import React from 'react';
+import { NavigationContainer, ParamListBase } from '@react-navigation/native';
+import {
+  NativeStackNavigationProp,
+  createNativeStackNavigator,
+} from '@react-navigation/native-stack';
+import { Button, Text, View, ScrollView } from 'react-native';
+import {
+  ListItem,
+  SettingsSwitch,
+} from '../shared';
+
+type StackRouteParamList = {
+  Home: undefined;
+  Second: undefined;
+};
+
+type NavigationProp<ParamList extends ParamListBase> = {
+  navigation: NativeStackNavigationProp<ParamList>;
+};
+
+type StackNavigationProp = NavigationProp<StackRouteParamList>;
+
+const Stack = createNativeStackNavigator<StackRouteParamList>();
+
+const items = Array.from({ length: 40 }, (_, i) => `Item ${i + 1}`);
+
+function Second({}: StackNavigationProp) {
+  return (
+    <View>
+      <Text>Second screen</Text>
+    </View>
+  );
+}
+
+function Home({ navigation }: StackNavigationProp) {
+  const [searchEnabled, setSearchEnabled] = React.useState(true);
+  const [searchQuery, setSearchQuery] = React.useState('');
+
+  React.useLayoutEffect(() => {
+    if (searchEnabled) {
+      navigation.setOptions({
+        headerSearchBarOptions: {
+          onChangeText: event => setSearchQuery(event.nativeEvent.text),
+        },
+      });
+    } else {
+      setSearchQuery('');
+      navigation.setOptions({
+        headerSearchBarOptions: undefined,
+      });
+    }
+  }, [navigation, searchEnabled]);
+
+  return (
+    <View style={[{ flex: 1, gap: 15 }]}>
+      <ScrollView contentInsetAdjustmentBehavior="automatic" contentContainerStyle={{ marginTop: 15}}>
+        <Button
+          title="Open Second"
+          onPress={() => navigation.navigate('Second')}
+          testID="home-button-open-second"
+        />
+        <SettingsSwitch
+          style={{ marginTop: 15, marginBottom: 15 }}
+          label="Search enabled"
+          value={searchEnabled}
+          onValueChange={() => setSearchEnabled(!searchEnabled)}
+          testID="home-switch-search-enabled"
+        />
+        {items
+          .filter(
+            name =>
+              searchQuery === '' ||
+              name.toLowerCase().includes(searchQuery.toLowerCase()),
+          )
+          .map(name => (
+            <ListItem key={name} title={name} onPress={() => {}} />
+          ))}
+      </ScrollView>
+    </View>
+  );
+}
+
+export default function App() {
+  return (
+    <NavigationContainer>
+      <Stack.Navigator>
+        <Stack.Screen name="Home" component={Home} />
+        <Stack.Screen name="Second" component={Second} />
+      </Stack.Navigator>
+    </NavigationContainer>
+  );
+}

apps/src/tests/index.ts

@@ -136,6 +136,7 @@ export { default as Test2855 } from './Test2855';
 export { default as Test2877 } from './Test2877'; // [E2E created](iOS): issue is related to formSheet on iOS
 export { default as Test2895 } from './Test2895';
 export { default as Test2899 } from './Test2899';
+export { default as Test2926 } from './Test2926'; // [E2E created](iOS): PR related to iOS search bar
 export { default as TestScreenAnimation } from './TestScreenAnimation';
 export { default as TestScreenAnimationV5 } from './TestScreenAnimationV5';
 export { default as TestHeader } from './TestHeader';

ios/RNSScreenStackHeaderConfig.mm

@@ -615,6 +615,12 @@ + (void)updateViewController:(UIViewController *)vc
   navitem.rightBarButtonItem = nil;
   navitem.titleView = nil;
 
+#if !TARGET_OS_TV
+  // We want to set navitem.searchController to nil only if we are sure
+  // that we are removing the search bar from the header.
+  bool searchBarPresent = false;
+#endif /* !TARGET_OS_TV */
+
   for (RNSScreenStackHeaderSubview *subview in config.reactSubviews) {
     // This code should be kept in sync on Fabric with analogous switch statement in
     // `- [RNSScreenStackHeaderConfig replaceNavigationBarViewsWithSnapshotOfSubview:]` method.
@@ -647,17 +653,16 @@ + (void)updateViewController:(UIViewController *)vc
 
         if ([subview.subviews[0] isKindOfClass:[RNSSearchBar class]]) {
 #if !TARGET_OS_TV
-          if (@available(iOS 11.0, *)) {
-            RNSSearchBar *searchBar = subview.subviews[0];
-            navitem.searchController = searchBar.controller;
-            navitem.hidesSearchBarWhenScrolling = searchBar.hideWhenScrolling;
+          RNSSearchBar *searchBar = subview.subviews[0];
+          searchBarPresent = true;
+          navitem.searchController = searchBar.controller;
+          navitem.hidesSearchBarWhenScrolling = searchBar.hideWhenScrolling;
 #if defined(__IPHONE_OS_VERSION_MAX_ALLOWED) && defined(__IPHONE_16_0) && \
     __IPHONE_OS_VERSION_MAX_ALLOWED >= __IPHONE_16_0
-            if (@available(iOS 16.0, *)) {
-              navitem.preferredSearchBarPlacement = [searchBar placementAsUINavigationItemSearchBarPlacement];
-            }
-#endif /* Check for iOS 16.0 */
+          if (@available(iOS 16.0, *)) {
+            navitem.preferredSearchBarPlacement = [searchBar placementAsUINavigationItemSearchBarPlacement];
           }
+#endif /* Check for iOS 16.0 */
 #endif /* !TARGET_OS_TV */
         }
         break;
@@ -668,6 +673,12 @@ + (void)updateViewController:(UIViewController *)vc
     }
   }
 
+#if !TARGET_OS_TV
+  if (!searchBarPresent) {
+    navitem.searchController = nil;
+  }
+#endif /* !TARGET_OS_TV */
+
   // This assignment should be done after `navitem.titleView = ...` assignment (iOS 16.0 bug).
   // See: https://github.com/software-mansion/react-native-screens/issues/1570 (comments)
   navitem.title = config.title;