feat: add headerTitleAlign option to center and left align title

react-navigation · Oct 11, 2019 · b86e2e6 · b86e2e6
1 parent 2d5f6c3
commit b86e2e6
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 20 deletions.
diff --git a/src/navigators/__tests__/__snapshots__/NestedNavigator.test.tsx.snap b/src/navigators/__tests__/__snapshots__/NestedNavigator.test.tsx.snap
@@ -444,8 +444,7 @@ Array [
                               pointerEvents="box-none"
                               style={
                                 Array [
-                                  null,
-                                  Object {},
+                                  false,
                                   Object {
                                     "opacity": undefined,
                                   },
@@ -585,8 +584,7 @@ Array [
             pointerEvents="box-none"
             style={
               Array [
-                null,
-                Object {},
+                false,
                 Object {
                   "opacity": undefined,
                 },

diff --git a/src/navigators/__tests__/__snapshots__/StackNavigator.test.tsx.snap b/src/navigators/__tests__/__snapshots__/StackNavigator.test.tsx.snap
@@ -279,8 +279,7 @@ Array [
             pointerEvents="box-none"
             style={
               Array [
-                null,
-                Object {},
+                false,
                 Object {
                   "opacity": undefined,
                 },
@@ -321,6 +320,9 @@ Array [
                   "right": 0,
                   "top": 0,
                 },
+                Object {
+                  "right": 0,
+                },
                 Object {
                   "opacity": undefined,
                 },
@@ -616,8 +618,7 @@ Array [
             pointerEvents="box-none"
             style={
               Array [
-                null,
-                Object {},
+                false,
                 Object {
                   "opacity": undefined,
                 },

diff --git a/src/types.tsx b/src/types.tsx
@@ -71,6 +71,7 @@ export type HeaderOptions = {
   headerTitle?:
     | React.ReactNode
     | ((props: HeaderTitleProps) => React.ReactNode);
+  headerTitleAlign?: 'left' | 'center';
   headerTitleStyle?: StyleProp<TextStyle>;
   headerTitleContainerStyle?: StyleProp<ViewStyle>;
   headerTintColor?: string;

diff --git a/src/views/Header/HeaderSegment.tsx b/src/views/Header/HeaderSegment.tsx
@@ -38,6 +38,13 @@ type State = {
   leftLabelLayout?: Layout;
 };
 
+const DEFAULT_INSETS = {
+  top: 0,
+  left: 0,
+  right: 0,
+  bottom: 0,
+};
+
 const warnIfHeaderStylesDefined = (styles: { [key: string]: any }) => {
   Object.keys(styles).forEach(styleProp => {
     const value = styles[styleProp];
@@ -143,6 +150,10 @@ export default class HeaderSegment extends React.Component<Props, State> {
       leftLabel: previousTitle,
       onGoBack,
       headerTitle,
+      headerTitleAlign = Platform.select({
+        ios: 'center',
+        default: 'left',
+      }),
       headerLeft: left = onGoBack
         ? (props: HeaderBackButtonProps) => <HeaderBackButton {...props} />
         : undefined,
@@ -185,7 +196,9 @@ export default class HeaderSegment extends React.Component<Props, State> {
       previousTitle ? leftLabelLayout : undefined
     );
 
-    const statusBarHeight = this.context ? this.context.top : 0;
+    const insets = this.context || DEFAULT_INSETS;
+
+    const statusBarHeight = insets.top;
 
     const {
       height = getDefaultHeaderHeight(layout, this.context),
@@ -324,19 +337,23 @@ export default class HeaderSegment extends React.Component<Props, State> {
             {leftButton ? (
               <Animated.View
                 pointerEvents="box-none"
-                style={[styles.left, leftButtonStyle, leftContainerStyle]}
+                style={[
+                  styles.left,
+                  { left: insets.left },
+                  leftButtonStyle,
+                  leftContainerStyle,
+                ]}
               >
                 {leftButton}
               </Animated.View>
             ) : null}
             <Animated.View
               pointerEvents="box-none"
               style={[
-                Platform.select({
-                  ios: null,
-                  default: { left: leftButton ? 72 : 16 },
-                }),
-                styles.title,
+                headerTitleAlign === 'left' && {
+                  position: 'absolute',
+                  left: leftButton ? 72 : 16,
+                },
                 titleStyle,
                 titleContainerStyle,
               ]}
@@ -353,7 +370,12 @@ export default class HeaderSegment extends React.Component<Props, State> {
             {right !== undefined ? (
               <Animated.View
                 pointerEvents="box-none"
-                style={[styles.right, rightButtonStyle, rightContainerStyle]}
+                style={[
+                  styles.right,
+                  { right: insets.right },
+                  rightButtonStyle,
+                  rightContainerStyle,
+                ]}
               >
                 {typeof right === 'function'
                   ? right({
@@ -393,8 +415,4 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     alignItems: 'flex-end',
   },
-  title: Platform.select({
-    ios: {},
-    default: { position: 'absolute' },
-  }),
 });