Add props to headerLeft and headerRight (#500)

This PR will allow users to custom headerRight and headerLeft components using user's theme color.
For example, if I want a custom settings icon in headerRight to navigate to my settings page, I will be able to retrieve color from my custom theme. It's already available in ReactNavigation.

colors.primary is used by the back button so it makes sense to use it for headerRight, headerLeft and headerCenter.

native-stack/types.tsx

@@ -117,15 +117,15 @@ export type NativeStackNavigationOptions = {
   /**
    * Function which returns a React Element to display on the right side of the header.
    */
-  headerRight?: () => React.ReactNode;
+  headerRight?: (props: { tintColor?: string }) => React.ReactNode;
   /**
    * Function which returns a React Element to display on the left side of the header.
    */
-  headerLeft?: () => React.ReactNode;
+  headerLeft?: (props: { tintColor?: string }) => React.ReactNode;
   /**
    * Function which returns a React Element to display in the center of the header.
    */
-  headerCenter?: () => React.ReactNode;
+  headerCenter?: (props: { tintColor?: string }) => React.ReactNode;
   /**
    * Tint color for the header. Changes the color of back button and title.
    */

native-stack/views/HeaderConfig.tsx

@@ -79,17 +79,21 @@ export default function HeaderConfig(props: Props) {
       }
       largeTitleBackgroundColor={headerLargeStyle.backgroundColor}>
       {headerRight !== undefined ? (
-        <ScreenStackHeaderRightView>{headerRight()}</ScreenStackHeaderRightView>
+        <ScreenStackHeaderRightView>
+          {headerRight({ tintColor: headerTintColor ?? colors.primary })}
+        </ScreenStackHeaderRightView>
       ) : null}
       {backButtonImage !== undefined ? (
         <ScreenStackHeaderBackButtonImage key="backImage" source={backButtonImage} />
       ) : null}
       {headerLeft !== undefined ? (
-        <ScreenStackHeaderLeftView>{headerLeft()}</ScreenStackHeaderLeftView>
+        <ScreenStackHeaderLeftView>
+          {headerLeft({ tintColor: headerTintColor ?? colors.primary })}
+        </ScreenStackHeaderLeftView>
       ) : null}
       {headerCenter !== undefined ? (
         <ScreenStackHeaderCenterView>
-          {headerCenter()}
+          {headerCenter({ tintColor: headerTintColor ?? colors.primary })}
         </ScreenStackHeaderCenterView>
       ) : null}
     </ScreenStackHeaderConfig>