diff --git a/versioned_docs/version-7.x/screen-options.md b/versioned_docs/version-7.x/screen-options.md
index 1f95d0f348..ad47eb6419 100644
--- a/versioned_docs/version-7.x/screen-options.md
+++ b/versioned_docs/version-7.x/screen-options.md
@@ -502,3 +502,16 @@ 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"
+  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
+```