@amazon-devices/react-native-screens 3.0.9000000000 → 3.0.9000000003

package/src/components/Screen.tsx

@@ -1,392 +0,0 @@
-'use client';
-
-import React from 'react';
-import { Animated, View, Platform } from 'react-native';
-
-import TransitionProgressContext from '../TransitionProgressContext';
-import DelayedFreeze from './helpers/DelayedFreeze';
-import { ScreenProps } from '../types';
-
-import {
-  freezeEnabled,
-  isNativePlatformSupported,
-  screensEnabled,
-} from '../core';
-
-// Native components
-import ScreenNativeComponent, {
-  NativeProps as ScreenNativeComponentProps,
-} from '../fabric/ScreenNativeComponent';
-import ModalScreenNativeComponent, {
-  NativeProps as ModalScreenNativeComponentProps,
-} from '../fabric/ModalScreenNativeComponent';
-import { usePrevious } from './helpers/usePrevious';
-
-type NativeProps = ScreenNativeComponentProps | ModalScreenNativeComponentProps;
-const AnimatedNativeScreen = Animated.createAnimatedComponent(
-  ScreenNativeComponent,
-);
-const AnimatedNativeModalScreen = Animated.createAnimatedComponent(
-  ModalScreenNativeComponent,
-);
-
-// Incomplete type, all accessible properties available at:
-// react-native/Libraries/Components/View/ReactNativeViewViewConfig.js
-interface ViewConfig extends View {
-  viewConfig: {
-    validAttributes: {
-      style: {
-        display: boolean;
-      };
-    };
-  };
-  _viewConfig: {
-    validAttributes: {
-      style: {
-        display: boolean;
-      };
-    };
-  };
-}
-
-// This value must be kept in sync with native side.
-const SHEET_FIT_TO_CONTENTS = [-1];
-const SHEET_COMPAT_LARGE = [1.0];
-const SHEET_COMPAT_MEDIUM = [0.5];
-const SHEET_COMPAT_ALL = [0.5, 1.0];
-
-const SHEET_DIMMED_ALWAYS = -1;
-// const SHEET_DIMMED_NEVER = 9999;
-
-function assertDetentsArrayIsSorted(array: number[]) {
-  for (let i = 1; i < array.length; i++) {
-    if (array[i - 1] > array[i]) {
-      throw new Error(
-        '[RNScreens] The detent array is not sorted in ascending order!',
-      );
-    }
-  }
-}
-
-// These exist to transform old 'legacy' values used by the formsheet API to the new API shape.
-// We can get rid of it, once we get rid of support for legacy values: 'large', 'medium', 'all'.
-function resolveSheetAllowedDetents(
-  allowedDetentsCompat: ScreenProps['sheetAllowedDetents'],
-): number[] {
-  if (Array.isArray(allowedDetentsCompat)) {
-    if (Platform.OS === 'android' && allowedDetentsCompat.length > 3) {
-      if (__DEV__) {
-        console.warn(
-          '[RNScreens] Sheets API on Android do accept only up to 3 values. Any surplus value are ignored.',
-        );
-      }
-      allowedDetentsCompat = allowedDetentsCompat.slice(0, 3);
-    }
-    if (__DEV__) {
-      assertDetentsArrayIsSorted(allowedDetentsCompat);
-    }
-    return allowedDetentsCompat;
-  } else if (allowedDetentsCompat === 'fitToContents') {
-    return SHEET_FIT_TO_CONTENTS;
-  } else if (allowedDetentsCompat === 'large') {
-    return SHEET_COMPAT_LARGE;
-  } else if (allowedDetentsCompat === 'medium') {
-    return SHEET_COMPAT_MEDIUM;
-  } else if (allowedDetentsCompat === 'all') {
-    return SHEET_COMPAT_ALL;
-  } else {
-    // Safe default, only large detent is allowed.
-    return [1.0];
-  }
-}
-
-function resolveSheetLargestUndimmedDetent(
-  lud: ScreenProps['sheetLargestUndimmedDetentIndex'],
-  lastDetentIndex: number,
-): number {
-  if (typeof lud === 'number') {
-    if (!isIndexInClosedRange(lud, SHEET_DIMMED_ALWAYS, lastDetentIndex)) {
-      if (__DEV__) {
-        throw new Error(
-          "[RNScreens] Provided value of 'sheetLargestUndimmedDetentIndex' prop is out of bounds of 'sheetAllowedDetents' array.",
-        );
-      }
-      // Return default in production
-      return SHEET_DIMMED_ALWAYS;
-    }
-    return lud;
-  } else if (lud === 'last') {
-    return lastDetentIndex;
-  } else if (lud === 'none' || lud === 'all') {
-    return SHEET_DIMMED_ALWAYS;
-  } else if (lud === 'large') {
-    return 1;
-  } else if (lud === 'medium') {
-    return 0;
-  } else {
-    // Safe default, every detent is dimmed
-    return SHEET_DIMMED_ALWAYS;
-  }
-}
-
-function resolveSheetInitialDetentIndex(
-  index: ScreenProps['sheetInitialDetentIndex'],
-  lastDetentIndex: number,
-): number {
-  if (index === 'last') {
-    index = lastDetentIndex;
-  } else if (index == null) {
-    // Intentional check for undefined & null ^
-    index = 0;
-  }
-  if (!isIndexInClosedRange(index, 0, lastDetentIndex)) {
-    if (__DEV__) {
-      throw new Error(
-        "[RNScreens] Provided value of 'sheetInitialDetentIndex' prop is out of bounds of 'sheetAllowedDetents' array.",
-      );
-    }
-    // Return default in production
-    return 0;
-  }
-  return index;
-}
-
-function isIndexInClosedRange(
-  value: number,
-  lowerBound: number,
-  upperBound: number,
-): boolean {
-  return Number.isInteger(value) && value >= lowerBound && value <= upperBound;
-}
-
-export const InnerScreen = React.forwardRef<View, ScreenProps>(
-  function InnerScreen(props, ref) {
-    const innerRef = React.useRef<ViewConfig | null>(null);
-    React.useImperativeHandle(ref, () => innerRef.current!, []);
-    const prevActivityState = usePrevious(props.activityState);
-
-    const setRef = (ref: ViewConfig) => {
-      innerRef.current = ref;
-      props.onComponentRef?.(ref);
-    };
-
-    const closing = React.useRef(new Animated.Value(0)).current;
-    const progress = React.useRef(new Animated.Value(0)).current;
-    const goingForward = React.useRef(new Animated.Value(0)).current;
-
-    const {
-      enabled = screensEnabled(),
-      freezeOnBlur = freezeEnabled(),
-      shouldFreeze,
-      ...rest
-    } = props;
-
-    // To maintain default behavior of formSheet stack presentation style and to have reasonable
-    // defaults for new medium-detent iOS API we need to set defaults here
-    const {
-      // formSheet presentation related props
-      sheetAllowedDetents = [1.0],
-      sheetLargestUndimmedDetentIndex = SHEET_DIMMED_ALWAYS,
-      sheetGrabberVisible = false,
-      sheetCornerRadius = -1.0,
-      sheetExpandsWhenScrolledToEdge = true,
-      sheetElevation = 24,
-      sheetInitialDetentIndex = 0,
-      // Other
-      stackPresentation,
-      // Events for override
-      onAppear,
-      onDisappear,
-      onWillAppear,
-      onWillDisappear,
-    } = rest;
-
-    if (enabled && isNativePlatformSupported) {
-      const resolvedSheetAllowedDetents =
-        resolveSheetAllowedDetents(sheetAllowedDetents);
-      const resolvedSheetLargestUndimmedDetent =
-        resolveSheetLargestUndimmedDetent(
-          sheetLargestUndimmedDetentIndex,
-          resolvedSheetAllowedDetents.length - 1,
-        );
-      const resolvedSheetInitialDetentIndex = resolveSheetInitialDetentIndex(
-        sheetInitialDetentIndex,
-        resolvedSheetAllowedDetents.length - 1,
-      );
-      // Due to how Yoga resolves layout, we need to have different components for modal nad non-modal screens
-      const AnimatedScreen =
-        Platform.OS === 'android' ||
-        // amznmod_react - disable NativeModalScreen on kepler because native component is not implemented yet
-        // @ts-ignore
-        Platform.OS === 'kepler' ||
-        stackPresentation === undefined ||
-        stackPresentation === 'push' ||
-        stackPresentation === 'containedModal' ||
-        stackPresentation === 'containedTransparentModal'
-          ? AnimatedNativeScreen
-          : AnimatedNativeModalScreen;
-
-      let {
-        // Filter out active prop in this case because it is unused and
-        // can cause problems depending on react-native version:
-        // https://github.com/react-navigation/react-navigation/issues/4886
-        active,
-        activityState,
-        children,
-        isNativeStack,
-        gestureResponseDistance,
-        onGestureCancel,
-        style,
-        ...props
-      } = rest;
-
-      if (active !== undefined && activityState === undefined) {
-        console.warn(
-          'It appears that you are using old version of react-navigation library. Please update @react-navigation/bottom-tabs, @react-navigation/stack and @react-navigation/drawer to version 5.10.0 or above to take full advantage of new functionality added to react-native-screens',
-        );
-        activityState = active !== 0 ? 2 : 0; // in the new version, we need one of the screens to have value of 2 after the transition
-      }
-
-      if (
-        isNativeStack &&
-        prevActivityState !== undefined &&
-        activityState !== undefined
-      ) {
-        if (prevActivityState > activityState) {
-          throw new Error(
-            '[RNScreens] activityState cannot be decreased in NativeStack',
-          );
-        }
-      }
-
-      const handleRef = (ref: ViewConfig) => {
-        if (ref?.viewConfig?.validAttributes?.style) {
-          ref.viewConfig.validAttributes.style = {
-            ...ref.viewConfig.validAttributes.style,
-            display: false,
-          };
-          setRef(ref);
-        } else if (ref?._viewConfig?.validAttributes?.style) {
-          ref._viewConfig.validAttributes.style = {
-            ...ref._viewConfig.validAttributes.style,
-            display: false,
-          };
-          setRef(ref);
-        }
-      };
-
-      const freeze =
-        freezeOnBlur &&
-        (shouldFreeze !== undefined ? shouldFreeze : activityState === 0);
-
-      return (
-        <DelayedFreeze freeze={freeze}>
-          <AnimatedScreen
-            {...props}
-            /**
-             * This messy override is to conform NativeProps used by codegen and
-             * our Public API. To see reasoning go to this PR:
-             * https://github.com/software-mansion/react-native-screens/pull/2423#discussion_r1810616995
-             */
-            onAppear={onAppear as NativeProps['onAppear']}
-            onDisappear={onDisappear as NativeProps['onDisappear']}
-            onWillAppear={onWillAppear as NativeProps['onWillAppear']}
-            onWillDisappear={onWillDisappear as NativeProps['onWillDisappear']}
-            onGestureCancel={
-              (onGestureCancel as NativeProps['onGestureCancel']) ??
-              (() => {
-                // for internal use
-              })
-            }
-            //
-            // Hierarchy of screens is handled on the native side and setting zIndex value causes this issue:
-            // https://github.com/software-mansion/react-native-screens/issues/2345
-            // With below change of zIndex, we force RN diffing mechanism to NOT include detaching and attaching mutation in one transaction.
-            // Detailed information can be found here https://github.com/software-mansion/react-native-screens/pull/2351
-            style={[style, { zIndex: undefined }]}
-            activityState={activityState}
-            sheetAllowedDetents={resolvedSheetAllowedDetents}
-            sheetLargestUndimmedDetent={resolvedSheetLargestUndimmedDetent}
-            sheetElevation={sheetElevation}
-            sheetGrabberVisible={sheetGrabberVisible}
-            sheetCornerRadius={sheetCornerRadius}
-            sheetExpandsWhenScrolledToEdge={sheetExpandsWhenScrolledToEdge}
-            sheetInitialDetent={resolvedSheetInitialDetentIndex}
-            gestureResponseDistance={{
-              start: gestureResponseDistance?.start ?? -1,
-              end: gestureResponseDistance?.end ?? -1,
-              top: gestureResponseDistance?.top ?? -1,
-              bottom: gestureResponseDistance?.bottom ?? -1,
-            }}
-            // This prevents showing blank screen when navigating between multiple screens with freezing
-            // https://github.com/software-mansion/react-native-screens/pull/1208
-            ref={handleRef}
-            onTransitionProgress={
-              !isNativeStack
-                ? undefined
-                : Animated.event(
-                    [
-                      {
-                        nativeEvent: {
-                          progress,
-                          closing,
-                          goingForward,
-                        },
-                      },
-                    ],
-                    { useNativeDriver: true },
-                  )
-            }>
-            {!isNativeStack ? ( // see comment of this prop in types.tsx for information why it is needed
-              children
-            ) : (
-              <TransitionProgressContext.Provider
-                value={{
-                  progress,
-                  closing,
-                  goingForward,
-                }}>
-                {children}
-              </TransitionProgressContext.Provider>
-            )}
-          </AnimatedScreen>
-        </DelayedFreeze>
-      );
-    } else {
-      // same reason as above
-      let {
-        active,
-        activityState,
-        style,
-        // eslint-disable-next-line @typescript-eslint/no-unused-vars
-        onComponentRef,
-        ...props
-      } = rest;
-
-      if (active !== undefined && activityState === undefined) {
-        activityState = active !== 0 ? 2 : 0;
-      }
-      return (
-        <Animated.View
-          style={[style, { display: activityState !== 0 ? 'flex' : 'none' }]}
-          ref={setRef}
-          {...props}
-        />
-      );
-    }
-  },
-);
-
-// context to be used when the user wants to use enhanced implementation
-// e.g. to use `useReanimatedTransitionProgress` (see `reanimated` folder in repo)
-export const ScreenContext = React.createContext(InnerScreen);
-
-const Screen = React.forwardRef<View, ScreenProps>((props, ref) => {
-  const ScreenWrapper = React.useContext(ScreenContext) || InnerScreen;
-
-  return <ScreenWrapper {...props} ref={ref} />;
-});
-
-Screen.displayName = 'Screen';
-
-export default Screen;

package/src/components/Screen.web.tsx

@@ -1,46 +0,0 @@
-'use client';
-
-import { ScreenProps } from '../types';
-import { Animated, View } from 'react-native';
-import React from 'react';
-
-import { screensEnabled } from '../core';
-
-export const InnerScreen = View;
-
-// We're using class component here because of the error from reanimated:
-// createAnimatedComponent` does not support stateless functional components; use a class component instead.
-// NOTE: React Server Components do not support class components.
-export class NativeScreen extends React.Component<ScreenProps> {
-  render(): JSX.Element {
-    let {
-      active,
-      activityState,
-      style,
-      enabled = screensEnabled(),
-      ...rest
-    } = this.props;
-
-    if (enabled) {
-      if (active !== undefined && activityState === undefined) {
-        activityState = active !== 0 ? 2 : 0; // change taken from index.native.tsx
-      }
-      return (
-        <View
-          // @ts-expect-error: hidden exists on web, but not in React Native
-          hidden={activityState === 0}
-          style={[style, { display: activityState !== 0 ? 'flex' : 'none' }]}
-          {...rest}
-        />
-      );
-    }
-
-    return <View {...rest} />;
-  }
-}
-
-const Screen = Animated.createAnimatedComponent(NativeScreen);
-
-export const ScreenContext = React.createContext(Screen);
-
-export default Screen;

package/src/components/ScreenContainer.tsx

@@ -1,28 +0,0 @@
-'use client';
-
-import { Platform, View } from 'react-native';
-import React from 'react';
-import { ScreenContainerProps } from '../types';
-import { isNativePlatformSupported, screensEnabled } from '../core';
-
-// Native components
-import ScreenContainerNativeComponent from '../fabric/ScreenContainerNativeComponent';
-import ScreenNavigationContainerNativeComponent from '../fabric/ScreenNavigationContainerNativeComponent';
-
-function ScreenContainer(props: ScreenContainerProps) {
-  const { enabled = screensEnabled(), hasTwoStates, ...rest } = props;
-
-  if (enabled && isNativePlatformSupported) {
-    if (hasTwoStates) {
-      const ScreenNavigationContainer =
-        Platform.OS === 'ios'
-          ? ScreenNavigationContainerNativeComponent
-          : ScreenContainerNativeComponent;
-      return <ScreenNavigationContainer {...rest} />;
-    }
-    return <ScreenContainerNativeComponent {...rest} />;
-  }
-  return <View {...rest} />;
-}
-
-export default ScreenContainer;

package/src/components/ScreenContainer.web.tsx

@@ -1,5 +0,0 @@
-import { View } from 'react-native';
-
-const ScreenContainer = View;
-
-export default ScreenContainer;

package/src/components/ScreenContentWrapper.tsx

@@ -1,9 +0,0 @@
-import React from 'react';
-import { ViewProps } from 'react-native';
-import ScreenContentWrapperNativeComponent from '../fabric/ScreenContentWrapperNativeComponent';
-
-function ScreenContentWrapper(props: ViewProps) {
-  return <ScreenContentWrapperNativeComponent collapsable={false} {...props} />;
-}
-
-export default ScreenContentWrapper;

package/src/components/ScreenContentWrapper.web.tsx

@@ -1,5 +0,0 @@
-import { View } from 'react-native';
-
-const ScreenContentWrapper = View;
-
-export default ScreenContentWrapper;

package/src/components/ScreenFooter.tsx

@@ -1,20 +0,0 @@
-import React from 'react';
-import { ViewProps } from 'react-native';
-import ScreenFooterNativeComponent from '../fabric/ScreenFooterNativeComponent';
-
-/**
- * Unstable API
- */
-function ScreenFooter(props: ViewProps) {
-  return <ScreenFooterNativeComponent {...props} />;
-}
-
-type FooterProps = {
-  children?: React.ReactNode;
-};
-
-export function FooterComponent({ children }: FooterProps) {
-  return <ScreenFooter collapsable={false}>{children}</ScreenFooter>;
-}
-
-export default ScreenFooter;

package/src/components/ScreenFooter.web.tsx

@@ -1,7 +0,0 @@
-import { View } from 'react-native';
-
-const ScreenFooter = View;
-const FooterComponent = View;
-
-export default ScreenFooter;
-export { FooterComponent };

package/src/components/ScreenStack.tsx

@@ -1,112 +0,0 @@
-'use client';
-
-import React, { PropsWithChildren } from 'react';
-import {
-  GestureDetectorBridge,
-  ScreensRefsHolder,
-  GestureProviderProps,
-  GoBackGesture,
-  ScreenStackProps,
-} from '../types';
-import { GHContext, RNSScreensRefContext } from '../contexts';
-import warnOnce from 'warn-once';
-
-// Native components
-import ScreenStackNativeComponent, {
-  NativeProps,
-} from '../fabric/ScreenStackNativeComponent';
-
-const assertGHProvider = (
-  ScreenGestureDetector: (
-    props: PropsWithChildren<GestureProviderProps>,
-  ) => React.JSX.Element,
-  goBackGesture: GoBackGesture | undefined,
-) => {
-  const isGestureDetectorProviderNotDetected =
-    ScreenGestureDetector.name !== 'GHWrapper' && goBackGesture !== undefined;
-
-  warnOnce(
-    isGestureDetectorProviderNotDetected,
-    'Cannot detect GestureDetectorProvider in a screen that uses `goBackGesture`. Make sure your navigator is wrapped in GestureDetectorProvider.',
-  );
-};
-
-const assertCustomScreenTransitionsProps = (
-  screensRefs: ScreenStackProps['screensRefs'],
-  currentScreenId: ScreenStackProps['currentScreenId'],
-  goBackGesture: ScreenStackProps['goBackGesture'],
-) => {
-  const isGestureDetectorNotConfiguredProperly =
-    goBackGesture !== undefined &&
-    screensRefs === null &&
-    currentScreenId === undefined;
-
-  warnOnce(
-    isGestureDetectorNotConfiguredProperly,
-    'Custom Screen Transition require screensRefs and currentScreenId to be provided.',
-  );
-};
-
-function ScreenStack(props: ScreenStackProps) {
-  const {
-    goBackGesture,
-    screensRefs: passedScreenRefs, // TODO: For compatibility with v5, remove once v5 is removed
-    currentScreenId,
-    transitionAnimation,
-    screenEdgeGesture,
-    onFinishTransitioning,
-    children,
-    ...rest
-  } = props;
-
-  const screensRefs = React.useRef<ScreensRefsHolder>(
-    passedScreenRefs?.current ?? {},
-  );
-  const ref = React.useRef(null);
-  const ScreenGestureDetector = React.useContext(GHContext);
-  const gestureDetectorBridge = React.useRef<GestureDetectorBridge>({
-    stackUseEffectCallback: _stackRef => {
-      // this method will be overriden in GestureDetector
-    },
-  });
-
-  React.useEffect(() => {
-    gestureDetectorBridge.current.stackUseEffectCallback(ref);
-  });
-
-  assertGHProvider(ScreenGestureDetector, goBackGesture);
-
-  assertCustomScreenTransitionsProps(
-    screensRefs,
-    currentScreenId,
-    goBackGesture,
-  );
-
-  return (
-    <RNSScreensRefContext.Provider value={screensRefs}>
-      <ScreenGestureDetector
-        gestureDetectorBridge={gestureDetectorBridge}
-        goBackGesture={goBackGesture}
-        transitionAnimation={transitionAnimation}
-        screenEdgeGesture={screenEdgeGesture ?? false}
-        screensRefs={screensRefs}
-        currentScreenId={currentScreenId}>
-        <ScreenStackNativeComponent
-          {...rest}
-          /**
-           * This messy override is to conform NativeProps used by codegen and
-           * our Public API. To see reasoning go to this PR:
-           * https://github.com/software-mansion/react-native-screens/pull/2423#discussion_r1810616995
-           */
-          onFinishTransitioning={
-            onFinishTransitioning as NativeProps['onFinishTransitioning']
-          }
-          ref={ref}>
-          {children}
-        </ScreenStackNativeComponent>
-      </ScreenGestureDetector>
-    </RNSScreensRefContext.Provider>
-  );
-}
-
-export default ScreenStack;

package/src/components/ScreenStack.web.tsx

@@ -1,5 +0,0 @@
-import { View } from 'react-native';
-
-const ScreenStack = View;
-
-export default ScreenStack;