Merge pull request #20 from janicduplessis/no-neg-margin

Use padding instead of negative margin in StackViewLayout

src/navigators/__tests__/__snapshots__/NestedNavigator-test.js.snap

@@ -50,8 +50,8 @@ exports[`Nested navigators renders succesfully as direct child 1`] = `
             "backgroundColor": "#E9E9EF",
             "bottom": 0,
             "left": 0,
-            "marginTop": 0,
             "opacity": 1,
+            "paddingTop": 64,
             "position": "absolute",
             "right": 0,
             "shadowColor": "black",
@@ -122,8 +122,8 @@ exports[`Nested navigators renders succesfully as direct child 1`] = `
                     "backgroundColor": "#E9E9EF",
                     "bottom": 0,
                     "left": 0,
-                    "marginTop": 0,
                     "opacity": 1,
+                    "paddingTop": 64,
                     "position": "absolute",
                     "right": 0,
                     "shadowColor": "black",
@@ -149,6 +149,14 @@ exports[`Nested navigators renders succesfully as direct child 1`] = `
             <View
               onLayout={[Function]}
               pointerEvents="box-none"
+              style={
+                Object {
+                  "left": 0,
+                  "position": "absolute",
+                  "right": 0,
+                  "top": 0,
+                }
+              }
             >
               <View
                 collapsable={undefined}
@@ -248,6 +256,14 @@ exports[`Nested navigators renders succesfully as direct child 1`] = `
     <View
       onLayout={[Function]}
       pointerEvents="box-none"
+      style={
+        Object {
+          "left": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        }
+      }
     >
       <View
         collapsable={undefined}

src/navigators/__tests__/__snapshots__/StackNavigator-test.js.snap

@@ -50,8 +50,8 @@ exports[`StackNavigator applies correct values when headerRight is present 1`] =
             "backgroundColor": "#E9E9EF",
             "bottom": 0,
             "left": 0,
-            "marginTop": 0,
             "opacity": 1,
+            "paddingTop": 64,
             "position": "absolute",
             "right": 0,
             "shadowColor": "black",
@@ -77,6 +77,14 @@ exports[`StackNavigator applies correct values when headerRight is present 1`] =
     <View
       onLayout={[Function]}
       pointerEvents="box-none"
+      style={
+        Object {
+          "left": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        }
+      }
     >
       <View
         collapsable={undefined}
@@ -244,8 +252,8 @@ exports[`StackNavigator renders successfully 1`] = `
             "backgroundColor": "#E9E9EF",
             "bottom": 0,
             "left": 0,
-            "marginTop": 0,
             "opacity": 1,
+            "paddingTop": 64,
             "position": "absolute",
             "right": 0,
             "shadowColor": "black",
@@ -271,6 +279,14 @@ exports[`StackNavigator renders successfully 1`] = `
     <View
       onLayout={[Function]}
       pointerEvents="box-none"
+      style={
+        Object {
+          "left": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        }
+      }
     >
       <View
         collapsable={undefined}

src/views/StackView/StackViewLayout.js

@@ -440,7 +440,11 @@ class StackViewLayout extends React.Component {
     if (headerMode === 'float') {
       const { scene } = this.props.transitionProps;
       floatingHeader = (
-        <View pointerEvents="box-none" onLayout={this._onFloatingHeaderLayout}>
+        <View
+          style={styles.floatingHeader}
+          pointerEvents="box-none"
+          onLayout={this._onFloatingHeaderLayout}
+        >
           {this._renderHeader(scene, headerMode)}
         </View>
       );
@@ -595,22 +599,21 @@ class StackViewLayout extends React.Component {
       screenInterpolator &&
       screenInterpolator({ ...this.props.transitionProps, scene });
 
-    // If this screen has "header" set to `null` in it's navigation options, but
+    // When using a floating header, we need to add some top
-    // it exists in a stack with headerMode float, add a negative margin to
+    // padding on the scene.
-    // compensate for the hidden header
     const { options } = scene.descriptor;
     const hasHeader = options.header !== null;
     const headerMode = this._getHeaderMode();
-    let marginTop = 0;
+    let paddingTop = 0;
-    if (!hasHeader && headerMode === 'float') {
+    if (hasHeader && headerMode === 'float' && !options.headerTransparent) {
-      marginTop = -this.state.floatingHeaderHeight;
+      paddingTop = this.state.floatingHeaderHeight;
     }
 
     return (
       <Card
         {...this.props.transitionProps}
         key={`card_${scene.key}`}
-        style={[style, { marginTop }, this.props.cardStyle]}
+        style={[style, { paddingTop }, this.props.cardStyle]}
         scene={scene}
       >
         {this._renderInnerScene(scene)}
@@ -631,6 +634,12 @@ const styles = StyleSheet.create({
   scenes: {
     flex: 1,
   },
+  floatingHeader: {
+    position: 'absolute',
+    left: 0,
+    top: 0,
+    right: 0,
+  },
 });
 
 export default withOrientation(StackViewLayout);