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 + + ); +}; +```