From 4b2e6a95caec1a0d0cb0d6afb770ea3d54b3fa54 Mon Sep 17 00:00:00 2001
From: "satyajit.happy" <satyajit.happy@gmail.com>
Date: Fri, 21 Jun 2019 12:54:19 +0200
Subject: [PATCH] feat: add headerTransparent option

---
 packages/stack/example/src/WipeStack.js       |   3 +
 .../NestedNavigator.test.tsx.snap             | 206 ++++++-------
 .../StackNavigator.test.tsx.snap              | 274 +++++++++---------
 packages/stack/src/types.tsx                  |   1 +
 .../src/views/Header/HeaderContainer.tsx      |  22 +-
 .../stack/src/views/Header/HeaderSegment.tsx  | 117 ++++----
 packages/stack/src/views/Stack/Stack.tsx      |   2 +
 packages/stack/src/views/Stack/StackItem.tsx  |   4 +-
 8 files changed, 338 insertions(+), 291 deletions(-)

diff --git a/packages/stack/example/src/WipeStack.js b/packages/stack/example/src/WipeStack.js
index 39a9d655..7187d7a9 100644
--- a/packages/stack/example/src/WipeStack.js
+++ b/packages/stack/example/src/WipeStack.js
@@ -152,6 +152,9 @@ export default createStackNavigator(
   {
     initialRouteName: 'List',
     headerMode: 'screen',
+    defaultNavigationOptions: {
+      cardOverlayEnabled: true,
+    },
     ...TransitionPresets.WipeFromBottomAndroid,
   }
 );
diff --git a/packages/stack/src/navigators/__tests__/__snapshots__/NestedNavigator.test.tsx.snap b/packages/stack/src/navigators/__tests__/__snapshots__/NestedNavigator.test.tsx.snap
index c34de9fb..d7faec30 100644
--- a/packages/stack/src/navigators/__tests__/__snapshots__/NestedNavigator.test.tsx.snap
+++ b/packages/stack/src/navigators/__tests__/__snapshots__/NestedNavigator.test.tsx.snap
@@ -342,19 +342,12 @@ Array [
                     onLayout={[Function]}
                     pointerEvents="box-none"
                     style={
-                      Array [
-                        Object {
-                          "bottom": 0,
-                          "left": 0,
-                          "position": "absolute",
-                          "right": 0,
-                          "top": 0,
-                        },
-                        Object {
-                          "height": 64,
-                        },
-                        undefined,
-                      ]
+                      Object {
+                        "left": 0,
+                        "position": "absolute",
+                        "right": 0,
+                        "top": 0,
+                      }
                     }
                   >
                     <View
@@ -388,58 +381,70 @@ Array [
                         }
                       />
                     </View>
-                    <View
-                      pointerEvents="none"
-                      style={
-                        Object {
-                          "height": 20,
-                        }
-                      }
-                    />
                     <View
                       pointerEvents="box-none"
                       style={
-                        Object {
-                          "alignItems": "center",
-                          "flex": 1,
-                          "flexDirection": "row",
-                          "justifyContent": "center",
-                          "paddingHorizontal": 4,
-                        }
+                        Array [
+                          Object {
+                            "height": 64,
+                          },
+                          undefined,
+                        ]
                       }
                     >
                       <View
+                        pointerEvents="none"
                         style={
-                          Array [
-                            null,
-                            Object {},
-                            Object {
-                              "opacity": undefined,
-                            },
-                            undefined,
-                          ]
+                          Object {
+                            "height": 20,
+                          }
+                        }
+                      />
+                      <View
+                        pointerEvents="box-none"
+                        style={
+                          Object {
+                            "alignItems": "center",
+                            "flex": 1,
+                            "flexDirection": "row",
+                            "justifyContent": "center",
+                            "paddingHorizontal": 4,
+                          }
                         }
                       >
-                        <Text
-                          onLayout={[Function]}
+                        <View
                           style={
                             Array [
+                              null,
+                              Object {},
                               Object {
-                                "color": "rgba(0, 0, 0, .9)",
-                                "fontSize": 17,
-                                "fontWeight": "600",
+                                "opacity": undefined,
                               },
-                              Array [
-                                Object {
-                                  "color": undefined,
-                                },
-                                undefined,
-                              ],
+                              undefined,
                             ]
                           }
                         >
-                          Home
-                        </Text>
+                          <Text
+                            onLayout={[Function]}
+                            style={
+                              Array [
+                                Object {
+                                  "color": "rgba(0, 0, 0, .9)",
+                                  "fontSize": 17,
+                                  "fontWeight": "600",
+                                },
+                                Array [
+                                  Object {
+                                    "color": undefined,
+                                  },
+                                  undefined,
+                                ],
+                              ]
+                            }
+                          >
+                            Home
+                          </Text>
+                        </View>
                       </View>
                     </View>
                   </View>
@@ -473,19 +478,12 @@ Array [
       onLayout={[Function]}
       pointerEvents="box-none"
       style={
-        Array [
-          Object {
-            "bottom": 0,
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-            "top": 0,
-          },
-          Object {
-            "height": 64,
-          },
-          undefined,
-        ]
+        Object {
+          "left": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        }
       }
     >
       <View
@@ -519,58 +517,70 @@ Array [
           }
         />
       </View>
-      <View
-        pointerEvents="none"
-        style={
-          Object {
-            "height": 20,
-          }
-        }
-      />
       <View
         pointerEvents="box-none"
         style={
-          Object {
-            "alignItems": "center",
-            "flex": 1,
-            "flexDirection": "row",
-            "justifyContent": "center",
-            "paddingHorizontal": 4,
-          }
+          Array [
+            Object {
+              "height": 64,
+            },
+            undefined,
+          ]
         }
       >
         <View
+          pointerEvents="none"
           style={
-            Array [
-              null,
-              Object {},
-              Object {
-                "opacity": undefined,
-              },
-              undefined,
-            ]
+            Object {
+              "height": 20,
+            }
+          }
+        />
+        <View
+          pointerEvents="box-none"
+          style={
+            Object {
+              "alignItems": "center",
+              "flex": 1,
+              "flexDirection": "row",
+              "justifyContent": "center",
+              "paddingHorizontal": 4,
+            }
           }
         >
-          <Text
-            onLayout={[Function]}
+          <View
             style={
               Array [
+                null,
+                Object {},
                 Object {
-                  "color": "rgba(0, 0, 0, .9)",
-                  "fontSize": 17,
-                  "fontWeight": "600",
+                  "opacity": undefined,
                 },
-                Array [
-                  Object {
-                    "color": undefined,
-                  },
-                  undefined,
-                ],
+                undefined,
               ]
             }
           >
-            Sub
-          </Text>
+            <Text
+              onLayout={[Function]}
+              style={
+                Array [
+                  Object {
+                    "color": "rgba(0, 0, 0, .9)",
+                    "fontSize": 17,
+                    "fontWeight": "600",
+                  },
+                  Array [
+                    Object {
+                      "color": undefined,
+                    },
+                    undefined,
+                  ],
+                ]
+              }
+            >
+              Sub
+            </Text>
+          </View>
         </View>
       </View>
     </View>
diff --git a/packages/stack/src/navigators/__tests__/__snapshots__/StackNavigator.test.tsx.snap b/packages/stack/src/navigators/__tests__/__snapshots__/StackNavigator.test.tsx.snap
index f99228e3..435918be 100644
--- a/packages/stack/src/navigators/__tests__/__snapshots__/StackNavigator.test.tsx.snap
+++ b/packages/stack/src/navigators/__tests__/__snapshots__/StackNavigator.test.tsx.snap
@@ -186,26 +186,12 @@ Array [
       onLayout={[Function]}
       pointerEvents="box-none"
       style={
-        Array [
-          Object {
-            "bottom": 0,
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-            "top": 0,
-          },
-          Object {
-            "height": 64,
-          },
-          Array [
-            Object {
-              "backgroundColor": "red",
-            },
-            Object {
-              "opacity": 0.5,
-            },
-          ],
-        ]
+        Object {
+          "left": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        }
       }
     >
       <View
@@ -239,78 +225,97 @@ Array [
           }
         />
       </View>
-      <View
-        pointerEvents="none"
-        style={
-          Object {
-            "height": 20,
-          }
-        }
-      />
       <View
         pointerEvents="box-none"
         style={
-          Object {
-            "alignItems": "center",
-            "flex": 1,
-            "flexDirection": "row",
-            "justifyContent": "center",
-            "paddingHorizontal": 4,
-          }
+          Array [
+            Object {
+              "height": 64,
+            },
+            Array [
+              Object {
+                "backgroundColor": "red",
+              },
+              Object {
+                "opacity": 0.5,
+              },
+            ],
+          ]
         }
       >
         <View
+          pointerEvents="none"
           style={
-            Array [
-              null,
-              Object {},
-              Object {
-                "opacity": undefined,
-              },
-              undefined,
-            ]
+            Object {
+              "height": 20,
+            }
+          }
+        />
+        <View
+          pointerEvents="box-none"
+          style={
+            Object {
+              "alignItems": "center",
+              "flex": 1,
+              "flexDirection": "row",
+              "justifyContent": "center",
+              "paddingHorizontal": 4,
+            }
           }
         >
-          <Text
-            onLayout={[Function]}
+          <View
             style={
               Array [
+                null,
+                Object {},
                 Object {
-                  "color": "rgba(0, 0, 0, .9)",
-                  "fontSize": 17,
-                  "fontWeight": "600",
+                  "opacity": undefined,
                 },
-                Array [
-                  Object {
-                    "color": undefined,
-                  },
-                  undefined,
-                ],
+                undefined,
               ]
             }
           >
-            Welcome anonymous
-          </Text>
-        </View>
-        <View
-          style={
-            Array [
-              Object {
-                "alignItems": "flex-end",
-                "bottom": 0,
-                "justifyContent": "center",
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
-              },
-              Object {
-                "opacity": undefined,
-              },
-              undefined,
-            ]
-          }
-        >
-          <View />
+            <Text
+              onLayout={[Function]}
+              style={
+                Array [
+                  Object {
+                    "color": "rgba(0, 0, 0, .9)",
+                    "fontSize": 17,
+                    "fontWeight": "600",
+                  },
+                  Array [
+                    Object {
+                      "color": undefined,
+                    },
+                    undefined,
+                  ],
+                ]
+              }
+            >
+              Welcome anonymous
+            </Text>
+          </View>
+          <View
+            style={
+              Array [
+                Object {
+                  "alignItems": "flex-end",
+                  "bottom": 0,
+                  "justifyContent": "center",
+                  "position": "absolute",
+                  "right": 0,
+                  "top": 0,
+                },
+                Object {
+                  "opacity": undefined,
+                },
+                undefined,
+              ]
+            }
+          >
+            <View />
+          </View>
         </View>
       </View>
     </View>
@@ -504,26 +509,12 @@ Array [
       onLayout={[Function]}
       pointerEvents="box-none"
       style={
-        Array [
-          Object {
-            "bottom": 0,
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-            "top": 0,
-          },
-          Object {
-            "height": 64,
-          },
-          Array [
-            Object {
-              "backgroundColor": "red",
-            },
-            Object {
-              "opacity": 0.5,
-            },
-          ],
-        ]
+        Object {
+          "left": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        }
       }
     >
       <View
@@ -557,58 +548,77 @@ Array [
           }
         />
       </View>
-      <View
-        pointerEvents="none"
-        style={
-          Object {
-            "height": 20,
-          }
-        }
-      />
       <View
         pointerEvents="box-none"
         style={
-          Object {
-            "alignItems": "center",
-            "flex": 1,
-            "flexDirection": "row",
-            "justifyContent": "center",
-            "paddingHorizontal": 4,
-          }
+          Array [
+            Object {
+              "height": 64,
+            },
+            Array [
+              Object {
+                "backgroundColor": "red",
+              },
+              Object {
+                "opacity": 0.5,
+              },
+            ],
+          ]
         }
       >
         <View
+          pointerEvents="none"
           style={
-            Array [
-              null,
-              Object {},
-              Object {
-                "opacity": undefined,
-              },
-              undefined,
-            ]
+            Object {
+              "height": 20,
+            }
+          }
+        />
+        <View
+          pointerEvents="box-none"
+          style={
+            Object {
+              "alignItems": "center",
+              "flex": 1,
+              "flexDirection": "row",
+              "justifyContent": "center",
+              "paddingHorizontal": 4,
+            }
           }
         >
-          <Text
-            onLayout={[Function]}
+          <View
             style={
               Array [
+                null,
+                Object {},
                 Object {
-                  "color": "rgba(0, 0, 0, .9)",
-                  "fontSize": 17,
-                  "fontWeight": "600",
+                  "opacity": undefined,
                 },
-                Array [
-                  Object {
-                    "color": undefined,
-                  },
-                  undefined,
-                ],
+                undefined,
               ]
             }
           >
-            Welcome anonymous
-          </Text>
+            <Text
+              onLayout={[Function]}
+              style={
+                Array [
+                  Object {
+                    "color": "rgba(0, 0, 0, .9)",
+                    "fontSize": 17,
+                    "fontWeight": "600",
+                  },
+                  Array [
+                    Object {
+                      "color": undefined,
+                    },
+                    undefined,
+                  ],
+                ]
+              }
+            >
+              Welcome anonymous
+            </Text>
+          </View>
         </View>
       </View>
     </View>
diff --git a/packages/stack/src/types.tsx b/packages/stack/src/types.tsx
index 710e6a77..e59395af 100644
--- a/packages/stack/src/types.tsx
+++ b/packages/stack/src/types.tsx
@@ -82,6 +82,7 @@ export type HeaderOptions = {
   headerBackgroundStyle?: StyleProp<ViewStyle>;
   headerStyle?: StyleProp<ViewStyle>;
   headerStatusBarHeight?: number;
+  headerTransparent?: boolean;
 };
 
 export type HeaderProps = {
diff --git a/packages/stack/src/views/Header/HeaderContainer.tsx b/packages/stack/src/views/Header/HeaderContainer.tsx
index 0adb6902..6e6a9a0e 100644
--- a/packages/stack/src/views/Header/HeaderContainer.tsx
+++ b/packages/stack/src/views/Header/HeaderContainer.tsx
@@ -6,7 +6,6 @@ import {
   StyleProp,
   ViewStyle,
 } from 'react-native';
-import { getDefaultHeaderHeight } from './HeaderSegment';
 import {
   Layout,
   Route,
@@ -98,13 +97,11 @@ export default function HeaderContainer({
             importantForAccessibility={
               isFocused ? 'auto' : 'no-hide-descendants'
             }
-            style={[
-              mode === 'float' ? StyleSheet.absoluteFill : null,
-              mode === 'screen' && options.header !== undefined
-                ? null
-                : { height: getDefaultHeaderHeight(layout) },
-              options.headerStyle,
-            ]}
+            style={
+              mode === 'float' || options.headerTransparent
+                ? styles.header
+                : null
+            }
           >
             {options.header !== undefined ? (
               options.header === null ? null : (
@@ -119,3 +116,12 @@ export default function HeaderContainer({
     </View>
   );
 }
+
+const styles = StyleSheet.create({
+  header: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+  },
+});
diff --git a/packages/stack/src/views/Header/HeaderSegment.tsx b/packages/stack/src/views/Header/HeaderSegment.tsx
index 3f9bc763..721cd46b 100644
--- a/packages/stack/src/views/Header/HeaderSegment.tsx
+++ b/packages/stack/src/views/Header/HeaderSegment.tsx
@@ -122,6 +122,7 @@ export default class HeaderSegment extends React.Component<Props, State> {
       ),
       // @ts-ignore
       headerStatusBarHeight = getStatusBarHeight(layout.width > layout.height),
+      headerTransparent,
       headerTintColor,
       headerBackground,
       headerBackgroundStyle,
@@ -138,6 +139,7 @@ export default class HeaderSegment extends React.Component<Props, State> {
       headerLeftContainerStyle: leftContainerStyle,
       headerRightContainerStyle: rightContainerStyle,
       headerTitleContainerStyle: titleContainerStyle,
+      headerStyle: customHeaderStyle,
       styleInterpolator,
     } = this.props;
 
@@ -166,68 +168,79 @@ export default class HeaderSegment extends React.Component<Props, State> {
         >
           {headerBackground ? (
             headerBackground()
-          ) : (
+          ) : headerTransparent ? null : (
             <HeaderBackground style={headerBackgroundStyle} />
           )}
         </Animated.View>
-        <View pointerEvents="none" style={{ height: headerStatusBarHeight }} />
-        <View pointerEvents="box-none" style={styles.container}>
-          {onGoBack ? (
-            <Animated.View
-              style={[styles.left, leftButtonStyle, leftContainerStyle]}
-            >
-              {left({
-                backImage,
-                pressColorAndroid,
-                allowFontScaling: backAllowFontScaling,
-                onPress: onGoBack,
-                labelVisible: headerBackTitleVisible,
-                label: leftLabel !== undefined ? leftLabel : previousTitle,
-                truncatedLabel,
-                labelStyle: [leftLabelStyle, customLeftLabelStyle],
-                onLabelLayout: this.handleLeftLabelLayout,
-                screenLayout: layout,
-                titleLayout,
-                tintColor: headerTintColor,
-              })}
-            </Animated.View>
-          ) : null}
-          {currentTitle ? (
-            <Animated.View
-              style={[
-                Platform.select({
-                  ios: null,
-                  default: { left: onGoBack ? 72 : 16 },
-                }),
-                styles.title,
-                titleStyle,
-                titleContainerStyle,
-              ]}
-            >
-              <HeaderTitle
-                onLayout={this.handleTitleLayout}
-                allowFontScaling={titleAllowFontScaling}
-                style={[{ color: headerTintColor }, customTitleStyle]}
+        <Animated.View
+          pointerEvents="box-none"
+          style={[
+            { height: getDefaultHeaderHeight(layout) },
+            customHeaderStyle,
+          ]}
+        >
+          <View
+            pointerEvents="none"
+            style={{ height: headerStatusBarHeight }}
+          />
+          <View pointerEvents="box-none" style={styles.content}>
+            {onGoBack ? (
+              <Animated.View
+                style={[styles.left, leftButtonStyle, leftContainerStyle]}
               >
-                {currentTitle}
-              </HeaderTitle>
-            </Animated.View>
-          ) : null}
-          {right ? (
-            <Animated.View
-              style={[styles.right, rightButtonStyle, rightContainerStyle]}
-            >
-              {right({ tintColor: headerTintColor })}
-            </Animated.View>
-          ) : null}
-        </View>
+                {left({
+                  backImage,
+                  pressColorAndroid,
+                  allowFontScaling: backAllowFontScaling,
+                  onPress: onGoBack,
+                  labelVisible: headerBackTitleVisible,
+                  label: leftLabel !== undefined ? leftLabel : previousTitle,
+                  truncatedLabel,
+                  labelStyle: [leftLabelStyle, customLeftLabelStyle],
+                  onLabelLayout: this.handleLeftLabelLayout,
+                  screenLayout: layout,
+                  titleLayout,
+                  tintColor: headerTintColor,
+                })}
+              </Animated.View>
+            ) : null}
+            {currentTitle ? (
+              <Animated.View
+                style={[
+                  Platform.select({
+                    ios: null,
+                    default: { left: onGoBack ? 72 : 16 },
+                  }),
+                  styles.title,
+                  titleStyle,
+                  titleContainerStyle,
+                ]}
+              >
+                <HeaderTitle
+                  onLayout={this.handleTitleLayout}
+                  allowFontScaling={titleAllowFontScaling}
+                  style={[{ color: headerTintColor }, customTitleStyle]}
+                >
+                  {currentTitle}
+                </HeaderTitle>
+              </Animated.View>
+            ) : null}
+            {right ? (
+              <Animated.View
+                style={[styles.right, rightButtonStyle, rightContainerStyle]}
+              >
+                {right({ tintColor: headerTintColor })}
+              </Animated.View>
+            ) : null}
+          </View>
+        </Animated.View>
       </React.Fragment>
     );
   }
 }
 
 const styles = StyleSheet.create({
-  container: {
+  content: {
     flex: 1,
     paddingHorizontal: 4,
     flexDirection: 'row',
diff --git a/packages/stack/src/views/Stack/Stack.tsx b/packages/stack/src/views/Stack/Stack.tsx
index 2e0cd799..db47a1ca 100755
--- a/packages/stack/src/views/Stack/Stack.tsx
+++ b/packages/stack/src/views/Stack/Stack.tsx
@@ -229,6 +229,7 @@ export default class Stack extends React.Component<Props, State> {
 
             const {
               header,
+              headerTransparent,
               cardTransparent,
               cardShadowEnabled,
               cardOverlayEnabled,
@@ -270,6 +271,7 @@ export default class Stack extends React.Component<Props, State> {
                   hasCustomHeader={header === null}
                   getPreviousRoute={getPreviousRoute}
                   headerMode={headerMode}
+                  headerTransparent={headerTransparent}
                   renderHeader={renderHeader}
                   renderScene={renderScene}
                   onOpenRoute={onOpenRoute}
diff --git a/packages/stack/src/views/Stack/StackItem.tsx b/packages/stack/src/views/Stack/StackItem.tsx
index 4e167007..ed3984cd 100644
--- a/packages/stack/src/views/Stack/StackItem.tsx
+++ b/packages/stack/src/views/Stack/StackItem.tsx
@@ -55,6 +55,7 @@ type Props = {
   headerStyleInterpolator: HeaderStyleInterpolator;
   cardStyleInterpolator: CardStyleInterpolator;
   headerMode: HeaderMode;
+  headerTransparent?: boolean;
   floaingHeaderHeight: number;
   hasCustomHeader: boolean;
 };
@@ -102,6 +103,7 @@ export default class StackItem extends React.PureComponent<Props> {
       hasCustomHeader,
       getPreviousRoute,
       headerMode,
+      headerTransparent,
       renderHeader,
       renderScene,
     } = this.props;
@@ -131,7 +133,7 @@ export default class StackItem extends React.PureComponent<Props> {
         importantForAccessibility={focused ? 'auto' : 'no-hide-descendants'}
         pointerEvents="box-none"
         containerStyle={
-          headerMode === 'float' && !hasCustomHeader
+          headerMode === 'float' && !headerTransparent && !hasCustomHeader
             ? { marginTop: floaingHeaderHeight }
             : null
         }