Closes #3153: Bring headerLayoutPreset and headerBackTitleEnabled fro…

…m RN (#3256)
aksonov · Sep 13, 2018 · 8d86709 · 8d86709
1 parent 2c84fd9
commit 8d86709
Show file tree

Hide file tree

Showing 8 changed files with 48 additions and 56 deletions.
diff --git a/Example/Example.js b/Example/Example.js
@@ -65,7 +65,7 @@ const Example = () => (
             <Scene key="echo" back clone component={EchoView} getTitle={({ navigation }) => navigation.state.key} />
             <Scene key="launch" component={Launch} title="Launch" initial type={ActionConst.RESET} />
 
-            <Stack key="customNavBar" hideTabBar titleStyle={{ alignSelf: 'center' }}>
+            <Stack key="customNavBar" hideTabBar headerLayoutPreset='center'>
               <Scene key="customNavBar1" title="CustomNavBar 1" navBar={CustomNavBar} component={CustomNavBarView} back />
               <Scene key="customNavBar2" title="CustomNavBar 2" navBar={CustomNavBar} component={CustomNavBarView} back />
               <Scene key="customNavBar3" title="Another CustomNavBar" navBar={CustomNavBar2} component={CustomNavBarView} back />
@@ -130,7 +130,7 @@ const Example = () => (
           <Scene key="demo_lightbox" component={DemoLightbox} />
         </Lightbox>
         <Scene key="error" component={ErrorModal} />
-        <Stack key="login" path="login/:data" titleStyle={{ alignSelf: 'center' }}>
+        <Stack key="login" headerLayoutPreset='center' path="login/:data" titleStyle={{ alignSelf: 'center' }}>
           <Scene key="loginModal" component={Login} title="Login" onExit={() => console.log('Login: onExit')} leftTitle="Cancel" onLeft={Actions.pop} />
           <Scene key="loginModal2" component={Login2} title="Login2" onEnter={() => console.log('Login2: onEnter') } backTitle="Back" panHandlers={null} duration={1} />
           <Scene key="loginModal3" hideNavBar component={Login3} title="Login3" onEnter={() => console.log('Login3: onEnter') } onExit={() => console.log('Login3: onExit')} panHandlers={null} duration={1} />

diff --git a/Example/package.json b/Example/package.json
@@ -21,7 +21,7 @@
     "react-native-button": "^2.3.0",
     "react-native-message-bar": "^2.0.10",
     "react-native-router-flux": "file:..",
-    "react-navigation": "2.12.x"
+    "react-navigation": "2.13.x"
   },
   "devDependencies": {
     "@babel/code-frame": "7.0.0-beta.47",

diff --git a/Example/yarn.lock b/Example/yarn.lock
@@ -1772,9 +1772,9 @@ create-react-class@^15.6.3:
     loose-envify "^1.3.1"
     object-assign "^4.1.1"
 
-create-react-context@^0.2.1:
-  version "0.2.3"
-  resolved "https://registry.yarnpkg.com/create-react-context/-/create-react-context-0.2.3.tgz#9ec140a6914a22ef04b8b09b7771de89567cb6f3"
+[email protected].2:
+  version "0.2.2"
+  resolved "https://registry.yarnpkg.com/create-react-context/-/create-react-context-0.2.2.tgz#9836542f9aaa22868cd7d4a6f82667df38019dca"
   dependencies:
     fbjs "^0.8.0"
     gud "^1.0.0"
@@ -4456,13 +4456,7 @@ react-native-message-bar@^2.0.10:
     opencollective "^1.0.3"
     path-to-regexp "^2.4.0"
     prop-types "^15.6.2"
-    react-navigation "2.12.x"
-
-react-native-safe-area-view@^0.7.0:
-  version "0.7.0"
-  resolved "https://registry.yarnpkg.com/react-native-safe-area-view/-/react-native-safe-area-view-0.7.0.tgz#38f5ab9368d6ef9e5d18ab64212938af3ec39421"
-  dependencies:
-    hoist-non-react-statics "^2.3.1"
+    react-navigation "2.13.x"
 
 react-native-safe-area-view@^0.9.0:
   version "0.9.0"
@@ -4550,35 +4544,34 @@ [email protected]:
   dependencies:
     react-native-drawer-layout-polyfill "^1.3.2"
 
-react-navigation-stack@0.2.3:
-  version "0.2.3"
-  resolved "https://registry.yarnpkg.com/react-navigation-stack/-/react-navigation-stack-0.2.3.tgz#9d1e2524aa1d178302c938948b8ece49d713f12b"
+react-navigation-stack@0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/react-navigation-stack/-/react-navigation-stack-0.3.0.tgz#cdd056771e5fd12114811824653b1ec7e9ae5de1"
 
-react-navigation-tabs@0.6.0:
-  version "0.6.0"
-  resolved "https://registry.yarnpkg.com/react-navigation-tabs/-/react-navigation-tabs-0.6.0.tgz#2f526194f4360e56c2702e736887449acc2080dc"
+react-navigation-tabs@0.7.0:
+  version "0.7.0"
+  resolved "https://registry.yarnpkg.com/react-navigation-tabs/-/react-navigation-tabs-0.7.0.tgz#c89d41e501043f7fdb38550de85814452c3e6104"
   dependencies:
     hoist-non-react-statics "^2.5.0"
     prop-types "^15.6.1"
     react-lifecycles-compat "^3.0.4"
-    react-native-safe-area-view "^0.7.0"
     react-native-tab-view "^1.0.0"
 
-react-navigation@2.12.x:
-  version "2.12.1"
-  resolved "https://registry.yarnpkg.com/react-navigation/-/react-navigation-2.12.1.tgz#17122a4162cd5a65d79814385cd61c2c0cb7ebb5"
+react-navigation@2.13.x:
+  version "2.13.0"
+  resolved "https://registry.yarnpkg.com/react-navigation/-/react-navigation-2.13.0.tgz#7102ff7cbc492c8daf2ad90fc80463c3469f8b78"
   dependencies:
     clamp "^1.0.1"
-    create-react-context "^0.2.1"
+    create-react-context "0.2.2"
     hoist-non-react-statics "^2.2.0"
     path-to-regexp "^1.7.0"
     query-string "^6.1.0"
     react-lifecycles-compat "^3"
     react-native-safe-area-view "^0.9.0"
     react-navigation-deprecated-tab-navigator "1.3.0"
     react-navigation-drawer "0.5.0"
-    react-navigation-stack "0.2.3"
-    react-navigation-tabs "0.6.0"
+    react-navigation-stack "0.3.0"
+    react-navigation-tabs "0.7.0"
 
 react-proxy@^1.1.7:
   version "1.1.8"

diff --git a/ReduxExample/package.json b/ReduxExample/package.json
@@ -18,7 +18,7 @@
     "react": "16.4.1",
     "react-native": "0.56.0",
     "react-native-router-flux": "file:..",
-    "react-navigation": "2.12.x",
+    "react-navigation": "2.13.x",
     "react-navigation-redux-helpers": "^2.0.5",
     "react-redux": "^5.0.5",
     "redux": "4.0.x"

diff --git a/docs/API.md b/docs/API.md
@@ -39,12 +39,14 @@ All properties of type `React.Component` will receive the same properties availa
 | `backButtonTextStyle` | `Style` |  | Style applied to back button text |
 | `backButtonTintColor`     | `string` | | Custom back button tint color |
 | `backTitle` | `string` |  | Specifies the back button title for scene |
+| `backTitleEnabled` | `boolean` |  | allows you to force back button titles to either be rendered or not (if you disagree with defaults for your platform and layout preset) |
 | `clone`     | `boolean` | `false` | Scenes marked with `clone` will be treated as templates and cloned into the current scene's parent when pushed. See example. |
 | `contentComponent`     | `React.Component` |  | Component used to render the content of the drawer (e.g. navigation items). |
 | `drawer`     | `boolean` | `false` | load child scenes inside [DrawerNavigator](https://reactnavigation.org/docs/navigators/drawer) |
 | `drawerLockMode` | enum('unlocked', 'locked-closed', 'locked-open')  |  | If a child of a drawer, specifies the [lock mode of the drawer](https://facebook.github.io/react-native/docs/drawerlayoutandroid.html#drawerlockmode) |
 | `failure` | `Function` | | If `on` returns a "falsey" value then `failure` is called. |
 | `headerMode` | `string` | `float` | Specifies how the header should be rendered: `float` (render a single header that stays at the top and animates as screens are changed. This is a common pattern on iOS.), `screen` (each screen has a header attached to it and the header fades in and out together with the screen. This is a common pattern on Android) or `none` (No header will be rendered) |
+| `headerLayoutPreset` | `string` | `center | left` | Change layout preset from header to be able to center text in some cases where it would be misaligned. |
 | `hideBackImage`     | `boolean` | `false` | hide back image |
 | `hideNavBar`     | `boolean` | `false` | hide the nav bar |
 | `init`     | `boolean` | `false` | If it is `true` back button will not be displayed |

diff --git a/package.json b/package.json
@@ -30,7 +30,7 @@
     "opencollective": "^1.0.3",
     "path-to-regexp": "^2.4.0",
     "prop-types": "^15.6.2",
-    "react-navigation": "2.12.x"
+    "react-navigation": "2.13.x"
   },
   "devDependencies": {
     "@babel/cli": "7.0.0-beta.47",

diff --git a/src/navigationStore.js b/src/navigationStore.js
@@ -140,12 +140,14 @@ function createNavigationOptions(params) {
     backButtonImage,
     backButtonTextStyle,
     backTitle,
+    backTitleEnabled,
     backToInitial,
     component,
     drawerIcon,
     drawerImage,
     drawerPosition,
     getTitle,
+    headerLayoutPreset,
     headerStyle,
     headerTitleStyle,
     hideDrawerButton,
@@ -195,15 +197,17 @@ function createNavigationOptions(params) {
     };
     const res = {
       ...props,
-      headerTintColor: navBarButtonColor || props.tintColor || navigationParams.tintColor || navigationParams.headerTintColor,
-      headerTitleStyle: headerTitleStyle || titleStyle,
-      title: getValue(navigationParams.title || title || getTitle, state),
+      headerBackImage: navigationParams.backButtonImage || backButtonImage,
       headerBackTitle: getValue(navigationParams.backTitle || backTitle, state),
-      headerRight: getValue(navigationParams.right || right || rightButton || params.renderRightButton, state),
+      headerBackTitleEnabled: navigationParams.backTitleEnabled || backTitleEnabled,
+      headerLayoutPreset: navigationParams.headerLayoutPreset || headerLayoutPreset,
       headerLeft: getValue(navigationParams.left || left || leftButton || params.renderLeftButton, state),
-      headerTitle: getValue(navigationParams.renderTitle || renderTitle || params.renderTitle, state),
+      headerRight: getValue(navigationParams.right || right || rightButton || params.renderRightButton, state),
       headerStyle: getValue(navigationParams.headerStyle || headerStyle || navigationBarStyle, state),
-      headerBackImage: navigationParams.backButtonImage || backButtonImage,
+      headerTintColor: navBarButtonColor || props.tintColor || navigationParams.tintColor || navigationParams.headerTintColor,
+      headerTitle: getValue(navigationParams.renderTitle || renderTitle || params.renderTitle, state),
+      headerTitleStyle: headerTitleStyle || titleStyle,
+      title: getValue(navigationParams.title || title || getTitle, state),
     };
 
     const NavBarFromParams = navigationParams.renderNavigationBar || navigationParams.navBar;

diff --git a/yarn.lock b/yarn.lock
@@ -1914,9 +1914,9 @@ create-react-class@^15.6.3:
     loose-envify "^1.3.1"
     object-assign "^4.1.1"
 
-create-react-context@^0.2.1:
-  version "0.2.3"
-  resolved "https://registry.yarnpkg.com/create-react-context/-/create-react-context-0.2.3.tgz#9ec140a6914a22ef04b8b09b7771de89567cb6f3"
+[email protected].2:
+  version "0.2.2"
+  resolved "https://registry.yarnpkg.com/create-react-context/-/create-react-context-0.2.2.tgz#9836542f9aaa22868cd7d4a6f82667df38019dca"
   dependencies:
     fbjs "^0.8.0"
     gud "^1.0.0"
@@ -5165,12 +5165,6 @@ react-native-jest-mocks@^1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/react-native-jest-mocks/-/react-native-jest-mocks-1.4.0.tgz#8380992bd4c1a533193d96f42dbf2e89bcfea617"
 
-react-native-safe-area-view@^0.7.0:
-  version "0.7.0"
-  resolved "https://registry.yarnpkg.com/react-native-safe-area-view/-/react-native-safe-area-view-0.7.0.tgz#38f5ab9368d6ef9e5d18ab64212938af3ec39421"
-  dependencies:
-    hoist-non-react-statics "^2.3.1"
-
 react-native-safe-area-view@^0.9.0:
   version "0.9.0"
   resolved "https://registry.yarnpkg.com/react-native-safe-area-view/-/react-native-safe-area-view-0.9.0.tgz#10ece2ecac70e7005a5b0b3f06c8833060e6d21f"
@@ -5257,35 +5251,34 @@ [email protected]:
   dependencies:
     react-native-drawer-layout-polyfill "^1.3.2"
 
-react-navigation-stack@0.2.3:
-  version "0.2.3"
-  resolved "https://registry.yarnpkg.com/react-navigation-stack/-/react-navigation-stack-0.2.3.tgz#9d1e2524aa1d178302c938948b8ece49d713f12b"
+react-navigation-stack@0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/react-navigation-stack/-/react-navigation-stack-0.3.0.tgz#cdd056771e5fd12114811824653b1ec7e9ae5de1"
 
-react-navigation-tabs@0.6.0:
-  version "0.6.0"
-  resolved "https://registry.yarnpkg.com/react-navigation-tabs/-/react-navigation-tabs-0.6.0.tgz#2f526194f4360e56c2702e736887449acc2080dc"
+react-navigation-tabs@0.7.0:
+  version "0.7.0"
+  resolved "https://registry.yarnpkg.com/react-navigation-tabs/-/react-navigation-tabs-0.7.0.tgz#c89d41e501043f7fdb38550de85814452c3e6104"
   dependencies:
     hoist-non-react-statics "^2.5.0"
     prop-types "^15.6.1"
     react-lifecycles-compat "^3.0.4"
-    react-native-safe-area-view "^0.7.0"
     react-native-tab-view "^1.0.0"
 
-react-navigation@2.12.x:
-  version "2.12.1"
-  resolved "https://registry.yarnpkg.com/react-navigation/-/react-navigation-2.12.1.tgz#17122a4162cd5a65d79814385cd61c2c0cb7ebb5"
+react-navigation@2.13.x:
+  version "2.13.0"
+  resolved "https://registry.yarnpkg.com/react-navigation/-/react-navigation-2.13.0.tgz#7102ff7cbc492c8daf2ad90fc80463c3469f8b78"
   dependencies:
     clamp "^1.0.1"
-    create-react-context "^0.2.1"
+    create-react-context "0.2.2"
     hoist-non-react-statics "^2.2.0"
     path-to-regexp "^1.7.0"
     query-string "^6.1.0"
     react-lifecycles-compat "^3"
     react-native-safe-area-view "^0.9.0"
     react-navigation-deprecated-tab-navigator "1.3.0"
     react-navigation-drawer "0.5.0"
-    react-navigation-stack "0.2.3"
-    react-navigation-tabs "0.6.0"
+    react-navigation-stack "0.3.0"
+    react-navigation-tabs "0.7.0"
 
 react-proxy@^1.1.7:
   version "1.1.8"