feat(native-stack): add support for large title attributes (#135)

Co-Authored-By: Satyajit Sahoo <satyajit.happy@gmail.com>
react-navigation · Oct 21, 2019 · 6cf1a04 · 6cf1a04
1 parent 0d8cdc8
commit 6cf1a04
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 2 deletions.
diff --git a/packages/native-stack/package.json b/packages/native-stack/package.json
@@ -34,14 +34,14 @@
   "devDependencies": {
     "@react-native-community/bob": "^0.7.0",
     "del-cli": "^2.0.0",
-    "react-native-screens": "^2.0.0-alpha.3",
+    "react-native-screens": "^2.0.0-alpha.5",
     "typescript": "^3.5.3"
   },
   "peerDependencies": {
     "@react-navigation/core": "^5.0.0-alpha.0",
     "react": "*",
     "react-native": "*",
-    "react-native-screens": "^2.0.0-alpha.3"
+    "react-native-screens": "^2.0.0-alpha.5"
   },
   "@react-native-community/bob": {
     "source": "src",

diff --git a/packages/native-stack/src/types.tsx b/packages/native-stack/src/types.tsx
@@ -123,6 +123,19 @@ export type NativeStackNavigationOptions = {
     fontSize?: number;
     color?: string;
   };
+  /**
+   * Style object for header large title. Supported properties:
+   * - fontFamily
+   * - fontSize
+   *
+   * Only supported on iOS.
+   *
+   * @platform ios
+   */
+  headerLargeTitleStyle?: {
+    fontFamily?: string;
+    fontSize?: number;
+  };
   /**
    * Style object for header back title. Supported properties:
    * - fontFamily

diff --git a/packages/native-stack/src/views/HeaderConfig.tsx b/packages/native-stack/src/views/HeaderConfig.tsx
@@ -27,6 +27,7 @@ export default function HeaderConfig(props: Props) {
     headerTranslucent,
     headerStyle = {},
     headerTitleStyle = {},
+    headerLargeTitleStyle = {},
     headerBackTitleStyle = {},
     headerShown,
     gestureEnabled,
@@ -58,6 +59,8 @@ export default function HeaderConfig(props: Props) {
       color={headerTintColor}
       gestureEnabled={gestureEnabled === undefined ? true : gestureEnabled}
       largeTitle={headerLargeTitle}
+      largeTitleFontFamily={headerLargeTitleStyle.fontFamily}
+      largeTitleFontSize={headerLargeTitleStyle.fontSize}
       backgroundColor={headerStyle.backgroundColor}
     >
       {headerRight !== undefined ? (

diff --git a/yarn.lock b/yarn.lock
@@ -13140,6 +13140,13 @@ react-native-screens@2.0.0-alpha.4:
   dependencies:
     debounce "^1.2.0"
 
+react-native-screens@2.0.0-alpha.5:
+  version "2.0.0-alpha.5"
+  resolved "https://registry.yarnpkg.com/react-native-screens/-/react-native-screens-2.0.0-alpha.5.tgz#5b6a72df959d31ffaf7045cd5eb753477e80689b"
+  integrity sha512-uKVc+JYEC59Dz2RPBI4tnaIB8W6T0dHGY6PjUtvkvaBmZBjfxhpezd3m2t8o913Xarx6EvT2maSH8816+MNJnw==
+  dependencies:
+    debounce "^1.2.0"
+
 react-native-screens@^2.0.0-alpha.3:
   version "2.0.0-alpha.3"
   resolved "https://registry.yarnpkg.com/react-native-screens/-/react-native-screens-2.0.0-alpha.3.tgz#af86f265b2fb4293b626cf4396db7743de5a54af"