From e2813c69892cb551622ff49a428b16b74dbcbb63 Mon Sep 17 00:00:00 2001
From: Gajanan Bodhankar <124874678+GajananBodhankar@users.noreply.github.com>
Date: Fri, 21 Feb 2025 22:29:01 +0530
Subject: [PATCH] Update screen-options.md with more detailing about
 navigation.setOptions()

---
 versioned_docs/version-7.x/screen-options.md | 23 ++++++++++++++++++++
 1 file changed, 23 insertions(+)

diff --git a/versioned_docs/version-7.x/screen-options.md b/versioned_docs/version-7.x/screen-options.md
index 1f95d0f348..a57b8142d7 100644
--- a/versioned_docs/version-7.x/screen-options.md
+++ b/versioned_docs/version-7.x/screen-options.md
@@ -502,3 +502,26 @@ The `navigation` object has a `setOptions` method that lets you update the optio
   Update options
 </Button>
 ```
+Futhermore, `navigation.setOptions()` can be used to set Custom header components for `headerLeft`, `headerTitle` and `headerRight`
+
+```js name="setOptions for navigation" snack dependencies=@expo/vector-icons
+import React, { useEffect } from 'react';
+
+const MyScreen = ({ navigation, route, ...props }) => {
+  useEffect(() => {
+    // Setting custom header components
+    navigation.setOptions({
+      headerLeft: <CustomHeaderLeftComponent {...props} />,  // Custom component on the left
+      headerTitle: <CustomHeaderTitleComponent {...props} />, // Custom title component
+      headerRight: <CustomHeaderRightComponent {...props} />, // Custom component on the right
+    });
+  }, [navigation, props]); // Adding 'props' as a dependency if required
+
+  return (
+    // Your screen content
+    <View>
+      <Text>My Screen Content</Text>
+    </View>
+  );
+};
+```