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
```
+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: , // Custom component on the left
+ headerTitle: , // Custom title component
+ headerRight: , // Custom component on the right
+ });
+ }, [navigation, props]); // Adding 'props' as a dependency if required
+
+ return (
+ // Your screen content
+
+ My Screen Content
+
+ );
+};
+```