feat: expose header height in context

packages/stack/src/index.tsx

@@ -36,8 +36,13 @@ export {
 /**
  * Utilities
  */
-export { default as StackGestureContext } from './utils/StackGestureContext';
-export { default as StackCardAnimationContext } from './utils/StackCardAnimationContext';
+export { default as CardAnimationContext } from './utils/CardAnimationContext';
+export { default as FloatingHeaderHeightContext } from './utils/FloatingHeaderHeightContext';
+export { default as GestureHandlerRefContext } from './utils/GestureHandlerRefContext';
+
+export { default as useCardAnimation } from './utils/useCardAnimation';
+export { default as useFloatingHeaderHeight } from './utils/useFloatingHeaderHeight';
+export { default as useGestureHandlerRef } from './utils/useGestureHandlerRef';
 
 /**
  * Types

packages/stack/src/utils/FloatingHeaderHeightContext.tsx

@@ -0,0 +1,3 @@
+import * as React from 'react';
+
+export default React.createContext<number>(0);

packages/stack/src/utils/useCardAnimation.tsx

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import CardAnimationContext from './CardAnimationContext';
+
+export default function useCardAnimation() {
+  const animation = React.useContext(CardAnimationContext);
+
+  if (animation === undefined) {
+    throw new Error(
+      "Couldn't find values for card animation. Are you inside a screen in Stack?"
+    );
+  }
+
+  return animation;
+}

packages/stack/src/utils/useFloatingHeaderHeight.tsx

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import FloatingHeaderHeightContext from './FloatingHeaderHeightContext';
+
+export default function useFloatingHeaderHeight() {
+  const height = React.useContext(FloatingHeaderHeightContext);
+
+  if (height === undefined) {
+    throw new Error(
+      "Couldn't find the floating header height. Are you inside a screen in Stack?"
+    );
+  }
+
+  return height;
+}

packages/stack/src/utils/useGestureHandlerRef.tsx

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import StackGestureRefContext from './GestureHandlerRefContext';
+
+export default function useGestureHandlerRef() {
+  const ref = React.useContext(StackGestureRefContext);
+
+  if (ref === undefined) {
+    throw new Error(
+      "Couldn't find a ref for gesture handler. Are you inside a screen in Stack?"
+    );
+  }
+
+  return ref;
+}

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

@@ -16,8 +16,8 @@ import {
 } from 'react-native-gesture-handler';
 import { EdgeInsets } from 'react-native-safe-area-context';
 import Color from 'color';
-import StackGestureContext from '../../utils/StackGestureContext';
-import StackCardAnimationContext from '../../utils/StackCardAnimationContext';
+import StackGestureRefContext from '../../utils/GestureHandlerRefContext';
+import CardAnimationContext from '../../utils/CardAnimationContext';
 import getDistanceForDirection from '../../utils/getDistanceForDirection';
 import getInvertedMultiplier from '../../utils/getInvertedMultiplier';
 import memoize from '../../utils/memoize';
@@ -421,48 +421,48 @@ export default class Card extends React.Component<Props> {
       : false;
 
     return (
-      <StackGestureContext.Provider value={this.gestureRef}>
-        <View pointerEvents="box-none" {...rest}>
-          {overlayEnabled && overlayStyle ? (
-            <Animated.View
-              pointerEvents="none"
-              style={[styles.overlay, overlayStyle]}
-            />
-          ) : null}
+      <View pointerEvents="box-none" {...rest}>
+        {overlayEnabled && overlayStyle ? (
           <Animated.View
-            style={[styles.container, containerStyle, customContainerStyle]}
-            pointerEvents="box-none"
+            pointerEvents="none"
+            style={[styles.overlay, overlayStyle]}
+          />
+        ) : null}
+        <Animated.View
+          style={[styles.container, containerStyle, customContainerStyle]}
+          pointerEvents="box-none"
+        >
+          <PanGestureHandler
+            ref={this.gestureRef}
+            enabled={layout.width !== 0 && gestureEnabled}
+            onGestureEvent={handleGestureEvent}
+            onHandlerStateChange={this.handleGestureStateChange}
+            {...this.gestureActivationCriteria()}
           >
-            <PanGestureHandler
-              ref={this.gestureRef}
-              enabled={layout.width !== 0 && gestureEnabled}
-              onGestureEvent={handleGestureEvent}
-              onHandlerStateChange={this.handleGestureStateChange}
-              {...this.gestureActivationCriteria()}
-            >
-              <Animated.View style={[styles.container, cardStyle]}>
-                {shadowEnabled && shadowStyle && !isTransparent ? (
-                  <Animated.View
-                    style={[
-                      styles.shadow,
-                      gestureDirection === 'horizontal'
-                        ? styles.shadowHorizontal
-                        : styles.shadowVertical,
-                      shadowStyle,
-                    ]}
-                    pointerEvents="none"
-                  />
-                ) : null}
-                <View ref={this.content} style={[styles.content, contentStyle]}>
-                  <StackCardAnimationContext.Provider value={animationContext}>
+            <Animated.View style={[styles.container, cardStyle]}>
+              {shadowEnabled && shadowStyle && !isTransparent ? (
+                <Animated.View
+                  style={[
+                    styles.shadow,
+                    gestureDirection === 'horizontal'
+                      ? styles.shadowHorizontal
+                      : styles.shadowVertical,
+                    shadowStyle,
+                  ]}
+                  pointerEvents="none"
+                />
+              ) : null}
+              <View ref={this.content} style={[styles.content, contentStyle]}>
+                <StackGestureRefContext.Provider value={this.gestureRef}>
+                  <CardAnimationContext.Provider value={animationContext}>
                     {children}
-                  </StackCardAnimationContext.Provider>
-                </View>
-              </Animated.View>
-            </PanGestureHandler>
-          </Animated.View>
-        </View>
-      </StackGestureContext.Provider>
+                  </CardAnimationContext.Provider>
+                </StackGestureRefContext.Provider>
+              </View>
+            </Animated.View>
+          </PanGestureHandler>
+        </Animated.View>
+      </View>
     );
   }
 }

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

@@ -4,6 +4,7 @@ import { StackNavigationState } from '@react-navigation/routers';
 import { Route, useTheme } from '@react-navigation/native';
 import { Props as HeaderContainerProps } from '../Header/HeaderContainer';
 import Card from './Card';
+import FloatingHeaderHeightContext from '../../utils/FloatingHeaderHeightContext';
 import { Scene, Layout, StackHeaderMode, TransitionPreset } from '../../types';
 
 type Props = TransitionPreset & {
@@ -156,7 +157,11 @@ export default function CardContainer({
       style={StyleSheet.absoluteFill}
     >
       <View style={styles.container}>
-        <View style={styles.scene}>{renderScene({ route: scene.route })}</View>
+        <View style={styles.scene}>
+          <FloatingHeaderHeightContext.Provider value={floatingHeaderHeight}>
+            {renderScene({ route: scene.route })}
+          </FloatingHeaderHeightContext.Provider>
+        </View>
         {headerMode === 'screen'
           ? renderHeader({
               mode: 'screen',