diff --git a/packages/drawer/src/views/Header.tsx b/packages/drawer/src/views/Header.tsx
index 3d4b33f175..08f7c8f7b7 100644
--- a/packages/drawer/src/views/Header.tsx
+++ b/packages/drawer/src/views/Header.tsx
@@ -111,22 +111,19 @@ export default function HeaderSegment({
>
- {leftButton ? (
-
- {leftButton}
-
- ) : null}
+
+ {leftButton}
+
)}
- {rightButton ? (
-
- {rightButton}
-
- ) : null}
+
+ {rightButton}
+
);
@@ -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
index 6806125196..eb4ae710e9 100644
--- 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) {
>
- {leftButton ? (
-
- {leftButton}
-
- ) : null}
+
+ {leftButton}
+
- {rightButton ? (
-
- {rightButton}
-
- ) : null}
+
+ {rightButton}
+
@@ -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',
},