refactor: don't use absolute position for header

BREAKING CHANGE: We now use flexbox for header elements which could break some existing style code which relied on absolute positioning.
react-navigation · Jan 15, 2021 · 79a85a4 · 79a85a4
1 parent 22a8afa
commit 79a85a4
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 64 deletions.
diff --git a/packages/drawer/src/views/Header.tsx b/packages/drawer/src/views/Header.tsx
@@ -111,22 +111,19 @@ export default function HeaderSegment({
     >
       <View pointerEvents="none" style={{ height: headerStatusBarHeight }} />
       <View pointerEvents="box-none" style={styles.content}>
-        {leftButton ? (
-          <View
-            pointerEvents="box-none"
-            style={[styles.left, { left: insets.left }]}
-          >
-            {leftButton}
-          </View>
-        ) : null}
+        <View
+          pointerEvents="box-none"
+          style={[styles.left, { marginLeft: insets.left }]}
+        >
+          {leftButton}
+        </View>
         <View
           pointerEvents="box-none"
           style={[
             headerTitleAlign === 'left'
               ? {
-                  position: 'absolute',
-                  left: (leftButton ? 72 : 16) + insets.left,
-                  right: (rightButton ? 72 : 16) + insets.right,
+                  marginLeft: (leftButton ? 72 : 16) + insets.left,
+                  marginRight: (rightButton ? 72 : 16) + insets.right,
                 }
               : {
                   marginHorizontal:
@@ -159,14 +156,12 @@ export default function HeaderSegment({
             </Text>
           )}
         </View>
-        {rightButton ? (
-          <View
-            pointerEvents="box-none"
-            style={[styles.right, { right: insets.right }]}
-          >
-            {rightButton}
-          </View>
-        ) : null}
+        <View
+          pointerEvents="box-none"
+          style={[styles.right, { marginRight: insets.right }]}
+        >
+          {rightButton}
+        </View>
       </View>
     </View>
   );
@@ -223,18 +218,14 @@ const styles = StyleSheet.create({
     marginHorizontal: 11,
   },
   left: {
-    position: 'absolute',
-    left: 0,
-    top: 0,
-    bottom: 0,
+    flexGrow: 1,
+    flexBasis: 0,
     justifyContent: 'center',
     alignItems: 'flex-start',
   },
   right: {
-    position: 'absolute',
-    right: 0,
-    top: 0,
-    bottom: 0,
+    flexGrow: 1,
+    flexBasis: 0,
     justifyContent: 'center',
     alignItems: 'flex-end',
   },

diff --git a/packages/stack/src/views/Header/HeaderSegment.tsx b/packages/stack/src/views/Header/HeaderSegment.tsx
@@ -328,27 +328,24 @@ export default function HeaderSegment(props: Props) {
       >
         <View pointerEvents="none" style={{ height: headerStatusBarHeight }} />
         <View pointerEvents="box-none" style={styles.content}>
-          {leftButton ? (
-            <Animated.View
-              pointerEvents="box-none"
-              style={[
-                styles.left,
-                { left: insets.left },
-                leftButtonStyle,
-                leftContainerStyle,
-              ]}
-            >
-              {leftButton}
-            </Animated.View>
-          ) : null}
+          <Animated.View
+            pointerEvents="box-none"
+            style={[
+              styles.left,
+              { marginLeft: insets.left },
+              leftButtonStyle,
+              leftContainerStyle,
+            ]}
+          >
+            {leftButton}
+          </Animated.View>
           <Animated.View
             pointerEvents="box-none"
             style={[
               headerTitleAlign === 'left'
                 ? {
-                    position: 'absolute',
-                    left: (leftButton ? 72 : 16) + insets.left,
-                    right: (rightButton ? 72 : 16) + insets.right,
+                    marginLeft: (leftButton ? 72 : 16) + insets.left,
+                    marginRight: (rightButton ? 72 : 16) + insets.right,
                   }
                 : {
                     marginHorizontal:
@@ -370,19 +367,17 @@ export default function HeaderSegment(props: Props) {
               style: customTitleStyle,
             })}
           </Animated.View>
-          {rightButton ? (
-            <Animated.View
-              pointerEvents="box-none"
-              style={[
-                styles.right,
-                { right: insets.right },
-                rightButtonStyle,
-                rightContainerStyle,
-              ]}
-            >
-              {rightButton}
-            </Animated.View>
-          ) : null}
+          <Animated.View
+            pointerEvents="box-none"
+            style={[
+              styles.right,
+              { marginRight: insets.right },
+              rightButtonStyle,
+              rightContainerStyle,
+            ]}
+          >
+            {rightButton}
+          </Animated.View>
         </View>
       </Animated.View>
     </React.Fragment>
@@ -397,18 +392,14 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
   },
   left: {
-    position: 'absolute',
-    left: 0,
-    top: 0,
-    bottom: 0,
+    flexGrow: 1,
+    flexBasis: 0,
     justifyContent: 'center',
     alignItems: 'flex-start',
   },
   right: {
-    position: 'absolute',
-    right: 0,
-    top: 0,
-    bottom: 0,
+    flexGrow: 1,
+    flexBasis: 0,
     justifyContent: 'center',
     alignItems: 'flex-end',
   },