refactor: minor tweaks

example/src/Screens/StackHeaderCustomization.tsx

@@ -1,11 +1,11 @@
 import * as React from 'react';
 import {
+  Animated,
   View,
   StyleSheet,
   ScrollView,
   Alert,
   Platform,
-  Text,
 } from 'react-native';
 import { Button, Appbar } from 'react-native-paper';
 import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
@@ -101,15 +101,20 @@ type Props = Partial<React.ComponentProps<typeof SimpleStack.Navigator>> & {
 };
 
 function CustomHeader(props: StackHeaderProps) {
-  const { navigation } = props;
+  const { current, next } = props.scene.progress;
+
+  const progress = Animated.add(current, next || 0);
+  const opacity = progress.interpolate({
+    inputRange: [0, 1, 2],
+    outputRange: [0, 1, 0],
+  });
+
   return (
     <>
       <Header {...props} />
-      <View style={{ opacity: navigation.isFocused() ? 1 : 0 }}>
-        <Text style={{ textAlign: 'center', backgroundColor: 'pink' }}>
-          Why hello there, pardner!
-        </Text>
-      </View>
+      <Animated.Text style={[styles.banner, { opacity }]}>
+        Why hello there, pardner!
+      </Animated.Text>
     </>
   );
 }
@@ -184,4 +189,10 @@ const styles = StyleSheet.create({
   button: {
     margin: 8,
   },
+  banner: {
+    textAlign: 'center',
+    color: 'tomato',
+    backgroundColor: 'papayawhip',
+    padding: 4,
+  },
 });

packages/stack/src/views/Stack/CardContainer.tsx

@@ -53,9 +53,7 @@ type Props = TransitionPreset & {
   gestureVelocityImpact?: number;
   mode: StackCardMode;
   headerMode: StackHeaderMode;
-  headerShown?: boolean;
-  headerTransparent?: boolean;
-  isFloatHeaderAbsolute: boolean;
+  hasAbsoluteHeader: boolean;
   headerHeight: number;
   onHeaderHeightChange: (props: {
     route: Route<string>;
@@ -83,10 +81,8 @@ function CardContainer({
   getFocusedRoute,
   mode,
   headerMode,
-  headerShown,
   headerStyleInterpolator,
-  headerTransparent,
-  isFloatHeaderAbsolute,
+  hasAbsoluteHeader,
   headerHeight,
   onHeaderHeightChange,
   index,
@@ -189,11 +185,7 @@ function CardContainer({
       importantForAccessibility={focused ? 'auto' : 'no-hide-descendants'}
       pointerEvents={active ? 'box-none' : pointerEvents}
       pageOverflowEnabled={headerMode === 'screen' && mode === 'card'}
-      containerStyle={
-        isFloatHeaderAbsolute && !headerTransparent && headerShown !== false
-          ? { marginTop: headerHeight }
-          : null
-      }
+      containerStyle={hasAbsoluteHeader ? { marginTop: headerHeight } : null}
       contentStyle={[{ backgroundColor: colors.background }, cardStyle]}
       style={StyleSheet.absoluteFill}
     >

packages/stack/src/views/Stack/CardStack.tsx

@@ -335,17 +335,20 @@ export default class CardStack extends React.Component<Props, State> {
     return state.routes[state.index];
   };
 
-  private getSomeFloatHeaderNeedsAbsolutePositioning = () => {
+  private doesFloatHeaderNeedAbsolutePositioning = () => {
     if (this.props.headerMode !== 'float') {
       return false;
     }
+
     return this.state.scenes.slice(-2).some((scene) => {
       const { descriptor } = scene;
       const options = descriptor ? descriptor.options : {};
       const { headerTransparent, headerShown } = options;
+
       if (headerTransparent || headerShown === false) {
         return true;
       }
+
       return false;
     });
   };
@@ -377,7 +380,8 @@ export default class CardStack extends React.Component<Props, State> {
     const focusedRoute = state.routes[state.index];
     const focusedDescriptor = descriptors[focusedRoute.key];
     const focusedOptions = focusedDescriptor ? focusedDescriptor.options : {};
-    const isFloatHeaderAbsolute = this.getSomeFloatHeaderNeedsAbsolutePositioning();
+
+    const isFloatHeaderAbsolute = this.doesFloatHeaderNeedAbsolutePositioning();
 
     let defaultTransitionPreset =
       mode === 'modal' ? ModalTransition : DefaultTransition;
@@ -401,27 +405,29 @@ export default class CardStack extends React.Component<Props, State> {
     const isScreensEnabled = Platform.OS !== 'ios' && mode !== 'modal';
 
     let floatingHeader;
+
     if (headerMode === 'float') {
-      const renderedHeader = renderHeader({
-        mode: 'float',
-        layout,
-        insets: { top, right, bottom, left },
-        scenes,
-        getPreviousRoute,
-        getFocusedRoute: this.getFocusedRoute,
-        onContentHeightChange: this.handleHeaderLayout,
-        gestureDirection:
-          focusedOptions.gestureDirection !== undefined
-            ? focusedOptions.gestureDirection
-            : defaultTransitionPreset.gestureDirection,
-        styleInterpolator:
-          focusedOptions.headerStyleInterpolator !== undefined
-            ? focusedOptions.headerStyleInterpolator
-            : defaultTransitionPreset.headerStyleInterpolator,
-        style: isFloatHeaderAbsolute ? styles.floating : undefined,
-      });
       floatingHeader = (
-        <React.Fragment key="floatingHeader">{renderedHeader}</React.Fragment>
+        <React.Fragment key="header">
+          {renderHeader({
+            mode: 'float',
+            layout,
+            insets: { top, right, bottom, left },
+            scenes,
+            getPreviousRoute,
+            getFocusedRoute: this.getFocusedRoute,
+            onContentHeightChange: this.handleHeaderLayout,
+            gestureDirection:
+              focusedOptions.gestureDirection !== undefined
+                ? focusedOptions.gestureDirection
+                : defaultTransitionPreset.gestureDirection,
+            styleInterpolator:
+              focusedOptions.headerStyleInterpolator !== undefined
+                ? focusedOptions.headerStyleInterpolator
+                : defaultTransitionPreset.headerStyleInterpolator,
+            style: isFloatHeaderAbsolute ? styles.floating : undefined,
+          })}
+        </React.Fragment>
       );
     }
 
@@ -564,9 +570,11 @@ export default class CardStack extends React.Component<Props, State> {
                   getFocusedRoute={this.getFocusedRoute}
                   mode={mode}
                   headerMode={headerMode}
-                  headerShown={headerShown}
-                  headerTransparent={headerTransparent}
-                  isFloatHeaderAbsolute={isFloatHeaderAbsolute}
+                  hasAbsoluteHeader={
+                    isFloatHeaderAbsolute &&
+                    headerShown !== false &&
+                    !headerTransparent
+                  }
                   renderHeader={renderHeader}
                   renderScene={renderScene}
                   onOpenRoute={onOpenRoute}