@react-navigation/stack 7.0.0-alpha.0 → 7.0.0-alpha.2

package/src/utils/getDistanceForDirection.tsx

@@ -1,7 +1,7 @@
 import type { GestureDirection, Layout } from '../types';
-import getInvertedMultiplier from './getInvertedMultiplier';
+import { getInvertedMultiplier } from './getInvertedMultiplier';
 
-export default function getDistanceForDirection(
+export function getDistanceForDirection(
   layout: Layout,
   gestureDirection: GestureDirection
 ): number {

package/src/utils/getInvertedMultiplier.tsx

@@ -2,7 +2,7 @@ import { I18nManager } from 'react-native';
 
 import type { GestureDirection } from '../types';
 
-export default function getInvertedMultiplier(
+export function getInvertedMultiplier(
   gestureDirection: GestureDirection
 ): 1 | -1 {
   switch (gestureDirection) {

package/src/utils/memoize.tsx

@@ -1,4 +1,4 @@
-export default function memoize<Result, Deps extends readonly any[]>(
+export function memoize<Result, Deps extends readonly any[]>(
   callback: (...deps: Deps) => Result
 ) {
   let previous: Deps | undefined;

package/src/utils/useCardAnimation.tsx

@@ -1,8 +1,8 @@
 import * as React from 'react';
 
-import CardAnimationContext from './CardAnimationContext';
+import { CardAnimationContext } from './CardAnimationContext';
 
-export default function useCardAnimation() {
+export function useCardAnimation() {
   const animation = React.useContext(CardAnimationContext);
 
   if (animation === undefined) {

package/src/utils/useGestureHandlerRef.tsx

@@ -1,9 +1,9 @@
 import * as React from 'react';
 
-import StackGestureRefContext from './GestureHandlerRefContext';
+import { GestureHandlerRefContext } from './GestureHandlerRefContext';
 
-export default function useGestureHandlerRef() {
-  const ref = React.useContext(StackGestureRefContext);
+export function useGestureHandlerRef() {
+  const ref = React.useContext(GestureHandlerRefContext);
 
   if (ref === undefined) {
     throw new Error(

package/src/utils/useKeyboardManager.tsx

@@ -3,7 +3,7 @@ import { HostComponent, Keyboard, TextInput } from 'react-native';
 
 type InputRef = React.ElementRef<HostComponent<unknown>> | undefined;
 
-export default function useKeyboardManager(isEnabled: () => boolean) {
+export function useKeyboardManager(isEnabled: () => boolean) {
   // Numeric id of the previously focused text input
   // When a gesture didn't change the tab, we can restore the focused input with this
   const previouslyFocusedTextInputRef = React.useRef<InputRef>(undefined);

package/src/views/GestureHandlerNative.tsx

@@ -4,7 +4,7 @@ import {
   PanGestureHandlerProperties,
 } from 'react-native-gesture-handler';
 
-import GestureHandlerRefContext from '../utils/GestureHandlerRefContext';
+import { GestureHandlerRefContext } from '../utils/GestureHandlerRefContext';
 
 export function PanGestureHandler(props: PanGestureHandlerProperties) {
   const gestureRef = React.useRef<PanGestureHandlerNative>(null);

package/src/views/Header/Header.tsx

@@ -4,11 +4,11 @@ import * as React from 'react';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 import type { StackHeaderProps } from '../../types';
-import debounce from '../../utils/debounce';
-import ModalPresentationContext from '../../utils/ModalPresentationContext';
-import HeaderSegment from './HeaderSegment';
+import { debounce } from '../../utils/debounce';
+import { ModalPresentationContext } from '../../utils/ModalPresentationContext';
+import { HeaderSegment } from './HeaderSegment';
 
-export default React.memo(function Header({
+export const Header = React.memo(function Header({
   back,
   layout,
   progress,

package/src/views/Header/HeaderContainer.tsx

@@ -21,7 +21,7 @@ import type {
   StackHeaderProps,
   StackNavigationProp,
 } from '../../types';
-import Header from './Header';
+import { Header } from './Header';
 
 export type Props = {
   mode: StackHeaderMode;
@@ -36,7 +36,7 @@ export type Props = {
   style?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
 };
 
-export default function HeaderContainer({
+export function HeaderContainer({
   mode,
   scenes,
   layout,

package/src/views/Header/HeaderSegment.tsx

@@ -20,7 +20,7 @@ import type {
   StackHeaderOptions,
   StackHeaderStyleInterpolator,
 } from '../../types';
-import memoize from '../../utils/memoize';
+import { memoize } from '../../utils/memoize';
 
 type Props = Omit<StackHeaderOptions, 'headerStatusBarHeight'> & {
   headerStatusBarHeight: number;
@@ -32,7 +32,7 @@ type Props = Omit<StackHeaderOptions, 'headerStatusBarHeight'> & {
   styleInterpolator: StackHeaderStyleInterpolator;
 };
 
-export default function HeaderSegment(props: Props) {
+export function HeaderSegment(props: Props) {
   const [leftLabelLayout, setLeftLabelLayout] = React.useState<
     Layout | undefined
   >(undefined);

package/src/views/ModalStatusBarManager.tsx

@@ -12,12 +12,7 @@ type Props = {
   style: any;
 };
 
-export default function ModalStatusBarManager({
-  dark,
-  layout,
-  insets,
-  style,
-}: Props) {
+export function ModalStatusBarManager({ dark, layout, insets, style }: Props) {
   const { dark: darkTheme } = useTheme();
   const [overlapping, setOverlapping] = React.useState(true);
 

package/src/views/Stack/Card.tsx

@@ -20,17 +20,17 @@ import type {
   StackCardStyleInterpolator,
   TransitionSpec,
 } from '../../types';
-import CardAnimationContext from '../../utils/CardAnimationContext';
-import getDistanceForDirection from '../../utils/getDistanceForDirection';
-import getInvertedMultiplier from '../../utils/getInvertedMultiplier';
-import memoize from '../../utils/memoize';
+import { CardAnimationContext } from '../../utils/CardAnimationContext';
+import { getDistanceForDirection } from '../../utils/getDistanceForDirection';
+import { getInvertedMultiplier } from '../../utils/getInvertedMultiplier';
+import { memoize } from '../../utils/memoize';
 import {
   GestureState,
   PanGestureHandler,
   PanGestureHandlerGestureEvent,
 } from '../GestureHandler';
-import ModalStatusBarManager from '../ModalStatusBarManager';
-import CardSheet, { CardSheetRef } from './CardSheet';
+import { ModalStatusBarManager } from '../ModalStatusBarManager';
+import { CardSheet, CardSheetRef } from './CardSheet';
 
 type Props = ViewProps & {
   interpolationIndex: number;
@@ -89,7 +89,7 @@ const hasOpacityStyle = (style: any) => {
   return false;
 };
 
-export default class Card extends React.Component<Props> {
+export class Card extends React.Component<Props> {
   static defaultProps = {
     shadowEnabled: false,
     gestureEnabled: true,

package/src/views/Stack/CardContainer.tsx

@@ -9,10 +9,10 @@ import * as React from 'react';
 import { Animated, StyleSheet, View } from 'react-native';
 
 import type { Layout, Scene } from '../../types';
-import ModalPresentationContext from '../../utils/ModalPresentationContext';
-import useKeyboardManager from '../../utils/useKeyboardManager';
+import { ModalPresentationContext } from '../../utils/ModalPresentationContext';
+import { useKeyboardManager } from '../../utils/useKeyboardManager';
 import type { Props as HeaderContainerProps } from '../Header/HeaderContainer';
-import Card from './Card';
+import { Card } from './Card';
 
 type Props = {
   interpolationIndex: number;
@@ -56,7 +56,7 @@ type Props = {
 
 const EPSILON = 0.1;
 
-function CardContainer({
+function CardContainerInner({
   interpolationIndex,
   index,
   active,
@@ -307,7 +307,7 @@ function CardContainer({
   );
 }
 
-export default React.memo(CardContainer);
+export const CardContainer = React.memo(CardContainerInner);
 
 const styles = StyleSheet.create({
   container: {

package/src/views/Stack/CardSheet.tsx

@@ -15,40 +15,39 @@ export type CardSheetRef = {
 // if the container fills the body by comparing the size
 // This lets the document.body handle scrolling of the content
 // It's necessary for mobile browsers to be able to hide address bar on scroll
-export default React.forwardRef<CardSheetRef, Props>(function CardSheet(
-  { enabled, layout, style, ...rest },
-  ref
-) {
-  const [fill, setFill] = React.useState(false);
-  // To avoid triggering a rerender in Card during animation we had to move
-  // the state to CardSheet. The `setPointerEvents` is then hoisted back to the Card.
-  const [pointerEvents, setPointerEvents] =
-    React.useState<ViewProps['pointerEvents']>('auto');
-
-  React.useImperativeHandle(ref, () => {
-    return { setPointerEvents };
-  });
-
-  React.useEffect(() => {
-    if (typeof document === 'undefined' || !document.body) {
-      // Only run when DOM is available
-      return;
-    }
-
-    const width = document.body.clientWidth;
-    const height = document.body.clientHeight;
-
-    setFill(width === layout.width && height === layout.height);
-  }, [layout.height, layout.width]);
-
-  return (
-    <View
-      {...rest}
-      pointerEvents={pointerEvents}
-      style={[enabled && fill ? styles.page : styles.card, style]}
-    />
-  );
-});
+export const CardSheet = React.forwardRef<CardSheetRef, Props>(
+  function CardSheet({ enabled, layout, style, ...rest }, ref) {
+    const [fill, setFill] = React.useState(false);
+    // To avoid triggering a rerender in Card during animation we had to move
+    // the state to CardSheet. The `setPointerEvents` is then hoisted back to the Card.
+    const [pointerEvents, setPointerEvents] =
+      React.useState<ViewProps['pointerEvents']>('auto');
+
+    React.useImperativeHandle(ref, () => {
+      return { setPointerEvents };
+    });
+
+    React.useEffect(() => {
+      if (typeof document === 'undefined' || !document.body) {
+        // Only run when DOM is available
+        return;
+      }
+
+      const width = document.body.clientWidth;
+      const height = document.body.clientHeight;
+
+      setFill(width === layout.width && height === layout.height);
+    }, [layout.height, layout.width]);
+
+    return (
+      <View
+        {...rest}
+        pointerEvents={pointerEvents}
+        style={[enabled && fill ? styles.page : styles.card, style]}
+      />
+    );
+  }
+);
 
 const styles = StyleSheet.create({
   page: {

package/src/views/Stack/CardStack.tsx

@@ -35,12 +35,12 @@ import type {
   StackHeaderMode,
   StackNavigationOptions,
 } from '../../types';
-import findLastIndex from '../../utils/findLastIndex';
-import getDistanceForDirection from '../../utils/getDistanceForDirection';
+import { findLastIndex } from '../../utils/findLastIndex';
+import { getDistanceForDirection } from '../../utils/getDistanceForDirection';
 import type { Props as HeaderContainerProps } from '../Header/HeaderContainer';
 import { MaybeScreen, MaybeScreenContainer } from '../Screens';
 import { getIsModalPresentation } from './Card';
-import CardContainer from './CardContainer';
+import { CardContainer } from './CardContainer';
 
 type GestureValues = {
   [key: string]: Animated.Value;
@@ -202,7 +202,7 @@ const getProgressFromGesture = (
   });
 };
 
-export default class CardStack extends React.Component<Props, State> {
+export class CardStack extends React.Component<Props, State> {
   static getDerivedStateFromProps(
     props: Props,
     state: State

package/src/views/Stack/StackView.tsx

@@ -21,12 +21,13 @@ import type {
   StackNavigationConfig,
   StackNavigationHelpers,
 } from '../../types';
-import ModalPresentationContext from '../../utils/ModalPresentationContext';
+import { ModalPresentationContext } from '../../utils/ModalPresentationContext';
 import { GestureHandlerRootView } from '../GestureHandler';
-import HeaderContainer, {
+import {
+  HeaderContainer,
   Props as HeaderContainerProps,
 } from '../Header/HeaderContainer';
-import CardStack from './CardStack';
+import { CardStack } from './CardStack';
 
 type Props = StackNavigationConfig & {
   state: StackNavigationState<ParamListBase>;
@@ -61,7 +62,7 @@ const GestureHandlerWrapper = GestureHandlerRootView ?? View;
 const isArrayEqual = (a: any[], b: any[]) =>
   a.length === b.length && a.every((it, index) => it === b[index]);
 
-export default class StackView extends React.Component<Props, State> {
+export class StackView extends React.Component<Props, State> {
   static getDerivedStateFromProps(
     props: Readonly<Props>,
     state: Readonly<State>