Mask header issues.

On transition, often the header will render as the page that we are navigating to despite animation in progress, this makes it less obvious that header is not in sync.

Author: Steven Goff

src/views/CardStack/CardStack.js

@@ -40,6 +40,7 @@ const emptyFunction = () => {};
 const theme = {
   white: '#FFFFFF',
   lightGrey: '#B7B7B7',
+  primaryBlue: '#0074B4',
 };
 
 type Props = {
@@ -168,11 +169,17 @@ class CardStack extends React.Component<Props, State> {
 
     return (
       <View
-        style={{ flex: 1, paddingTop, backgroundColor: theme.white }}
+        style={{ flex: 1, backgroundColor: theme.white }}
         testID={`Screen_${scene.route.routeName}_${isActiveRoute
           ? 'IsActive'
           : 'IsNotActive'}`}
       >
+        <View
+          style={{
+            height: paddingTop,
+            backgroundColor: theme.primaryBlue,
+          }}
+        />
         <View style={{ flexDirection: 'row', flex: 1 }}>
           {hasSplitPaneComponent &&
             SplitPaneComponent && (