Added documentation in useHeader explaining the header background convention:

- Headers are 'surfaceless' by default (for content screens like conversation list and chat)
- Settings-like screens (Profile, AppSettings) explicitly set surface background

Author: lourou

features/profiles/profile.screen.tsx

@@ -130,7 +130,7 @@ export function ProfileScreen() {
   // Header configuration
   useHeader(
     {
-      backgroundColor: theme.colors.background.surface,
+      backgroundColor: theme.colors.background.surface, // Use the same background color as the screen
       safeAreaEdges: ["top"],
       titleComponent: (
         <Text preset="body">

navigation/use-header.tsx

@@ -4,6 +4,11 @@ import { useLayoutEffect } from "react";
 
 /**
  * A hook that can be used to easily set the Header of a react-navigation screen from within the screen's component.
+ *
+ * Header Background Convention:
+ * - By default, headers use a 'surfaceless' background to match content screens like conversation list and chat
+ * - For settings-like screens (Profile, AppSettings, etc.) that use a 'surface' background,
+ *   explicitly set backgroundColor: theme.colors.background.surface in the header config
  * @see [Documentation and Examples]{@link https://docs.infinite.red/ignite-cli/boilerplate/utility/useHeader/}
  * @param {HeaderProps} headerProps - The props for the `Header` component.
  * @param {any[]} deps - The dependencies to watch for changes to update the header.