Document new headerSearchBarOptions

Author: satya164

versioned_docs/version-7.x/elements.md

@@ -73,8 +73,12 @@ function HomeScreen() {
 // codeblock-focus-start
 const MyStack = createNativeStackNavigator({
   screenOptions: {
-    header: ({ options, route }) => (
-      <Header {...options} title={getHeaderTitle(options, route.name)} />
+    header: ({ options, route, back }) => (
+      <Header
+        {...options}
+        back={back}
+        title={getHeaderTitle(options, route.name)}
+      />
     ),
   },
   screens: {
@@ -107,8 +111,12 @@ function MyStack() {
   return (
     <Stack.Navigator
       screenOptions={{
-        header: ({ options, route }) => (
-          <Header {...options} title={getHeaderTitle(options, route.name)} />
+        header: ({ options, route, back }) => (
+          <Header
+            {...options}
+            back={back}
+            title={getHeaderTitle(options, route.name)}
+          />
         ),
       }}
     >
@@ -326,6 +334,35 @@ const RootStack = createNativeStackNavigator({
 </TabItem>
 </Tabs>
 
+#### `headerSearchBarOptions`
+
+Options for the search bar in the header. When this is specified, the header will contain a button to show a search input.
+
+It can contain the following properties:
+
+- `autoCapitalize`: The auto-capitalization behavior. Possible values: `none`, `words`, `sentences`, `characters`.
+- `autoFocus`: Automatically focus search input on mount.
+- `cancelButtonText`: Text to be used instead of default `Cancel` button text (iOS only).
+- `inputType`: Type of the input. Possible values: `text`, `phone`, `number`, `email`.
+- `onBlur`: Callback that gets called when search input has lost focus.
+- `onChangeText`: Callback that gets called when the text changes.
+- `onClose`: Callback that gets called when search input is closed.
+- `onFocus`: Callback that gets called when search input has received focus.
+- `placeholder`: Text displayed when search input is empty.
+
+```js
+React.useLayoutEffect(() => {
+  navigation.setOptions({
+    headerSearchBarOptions: {
+      placeholder: 'Search',
+      onChangeText: (text) => {
+        // Do something
+      },
+    },
+  });
+}, [navigation]);
+```
+
 #### `headerShadowVisible`
 
 Whether to hide the elevation shadow (Android) or the bottom border (iOS) on the header.

versioned_docs/version-7.x/native-stack-navigator.md

@@ -479,9 +479,9 @@ Example:
 
 #### `headerSearchBarOptions`
 
-Options to render a native search bar on iOS. Search bars are rarely static so normally it is controlled by passing an object to `headerSearchBarOptions` navigation option in the component's body. You also need to specify `contentInsetAdjustmentBehavior="automatic"` in your `ScrollView`, `FlatList` etc. If you don't have a `ScrollView`, specify `headerTransparent: false`.
+Options to render a native search bar on iOS. Search bars are rarely static so normally it is controlled by passing an object to `headerSearchBarOptions` navigation option in the component's body.
 
-Only supported on iOS and Android.
+You also need to specify `contentInsetAdjustmentBehavior="automatic"` in your `ScrollView`, `FlatList` etc. If you don't have a `ScrollView`, specify `headerTransparent: false`.
 
 Example:
 

versioned_docs/version-7.x/upgrading-from-6.x.md

@@ -796,6 +796,25 @@ return (
 );
 ```
 
+#### All navigators with headers now support `headerSearchBarOptions`
+
+The `Header` component from `@react-navigation/elements` now supports a `headerSearchBarOptions` prop. This means all navigators that use the `Header` component now support a search bar in the header as well on all platforms. Previously, this was only available in the Native Stack Navigator on iOS and Android.
+
+```js
+React.useLayoutEffect(() => {
+  navigation.setOptions({
+    headerSearchBarOptions: {
+      placeholder: 'Search',
+      onChangeText: (text) => {
+        // Do something
+      },
+    },
+  });
+}, [navigation]);
+```
+
+See [`headerSearchBarOptions`](elements.md#headersearchbaroptions) for usage.
+
 ### New components in elements library
 
 The `@react-navigation/elements` package now includes new components that can be used in your app: