use header options on stack and native-stack

Author: Freddy03h

src/Elements.res

@@ -55,25 +55,29 @@ module Header = {
     placeholder?: string,
   }
 
-  type headerOptions = {
+  type headerCommonOptions = {
     headerTitle?: headerTitle,
     headerTitleAlign?: headerTitleAlign,
-    headerTitleAllowFontScaling?: bool,
+    headerLeft?: headerLeftProps => React.element,
+    headerRight?: headerRightProps => React.element,
+    headerTintColor?: Color.t,
+    headerBackground?: headerBackgroundOptions => React.element,
+    headerTransparent?: bool,
+    headerShadowVisible?: bool,
+  }
+
+  type headerOptions = {
+    ...headerCommonOptions,
     headerTitleStyle?: Style.t,
+    headerTitleAllowFontScaling?: bool,
     headerTitleContainerStyle?: Style.t,
-    headerLeft?: headerLeftProps => React.element,
     headerLeftContainerStyle?: Style.t,
-    headerRight?: headerRightProps => React.element,
     headerRightContainerStyle?: Style.t,
     headerSearchBarOptions?: headerSearchBarOptions,
     headerPressColor?: Color.t,
     headerPressOpacity?: float,
-    headerTintColor?: Color.t,
-    headerBackground?: headerBackgroundOptions => React.element,
     headerBackgroundContainerStyle?: Style.t,
-    headerTransparent?: bool,
     headerStyle?: Style.t,
-    headerShadowVisible?: bool,
     headerStatusBarHeight?: Style.size,
   }
 

src/NativeStack.res

@@ -125,28 +125,21 @@ type backOptions = {title?: string}
 type gestureDirection = [#vertical | #horizontal]
 
 type rec options = {
+  ...Header.headerCommonOptions,
   title?: string,
   headerBackButtonMenuEnabled?: bool,
   headerBackVisible?: bool,
   headerBackTitle?: string,
   headerBackButtonDisplayMode?: Stack.headerBackButtonDisplayMode,
   headerBackTitleStyle?: headerBackTitleStyle,
-  headerBackImageSource?: string, // TODO
+  headerBackImageSource?: Image.Source.t,
   headerLargeStyle?: headerLargeStyle,
   headerLargeTitle?: bool,
   headerLargeTitleShadowVisible?: bool,
   headerLargeTitleStyle?: headerLargeTitleStyle,
   headerShown?: bool,
   headerStyle?: headerStyle,
-  headerShadowVisible?: bool,
-  headerTransparent?: bool,
   headerBlurEffect?: blurEffect,
-  headerBackground?: Header.headerBackgroundOptions => React.element,
-  headerTintColor?: Color.t,
-  headerLeft?: Header.headerLeftProps => React.element,
-  headerRight?: Header.headerRightProps => React.element,
-  headerTitle?: Header.headerTitle,
-  headerTitleAlign?: headerTitleAlign,
   headerTitleStyle?: headerTitleStyle,
   headerSearchBarOptions?: headerSearchBarOptions,
   header?: headerParams => React.element,

src/Stack.res

@@ -115,6 +115,7 @@ type progress = {
 }
 
 type rec options = {
+  ...Header.headerOptions,
   title?: string,
   cardShadowEnabled?: bool,
   cardOverlayEnabled?: bool,
@@ -143,26 +144,6 @@ type rec options = {
   headerBackButtonDisplayMode?: headerBackButtonDisplayMode,
   headerBackTruncatedTitle?: string,
   headerBackTitleStyle?: Style.t,
-  // Header props from https://reactnavigation.org/docs/elements#header
-  headerTitle?: Header.headerTitle,
-  headerTitleAlign?: Header.headerTitleAlign,
-  headerTitleAllowFontScaling?: bool,
-  headerTitleStyle?: Style.t,
-  headerTitleContainerStyle?: Style.t,
-  headerLeft?: Header.headerLeftProps => React.element,
-  headerLeftLabelVisible?: bool,
-  headerLeftContainerStyle?: Style.t,
-  headerRight?: Header.headerRightProps => React.element,
-  headerRightContainerStyle?: Style.t,
-  headerPressColor?: Color.t,
-  headerPressOpacity?: float,
-  headerTintColor?: Color.t,
-  headerBackground?: Header.headerBackgroundOptions => React.element,
-  headerBackgroundContainerStyle?: Style.t,
-  headerTransparent?: bool,
-  headerStyle?: Style.t,
-  headerShadowVisible?: bool,
-  headerStatusBarHeight?: Style.size,
 }
 and headerParams = {
   navigation: navigation,