@amazon-devices/react-native-screens 2.0.9000000000 → 3.0.9000000000-rn-83

package/src/gesture-handler/constraints.ts

@@ -0,0 +1,87 @@
+import { ScreenTransition } from 'react-native-reanimated';
+import {
+  AnimatedScreenTransition,
+  GoBackGesture,
+  PanGestureHandlerEventPayload,
+} from '../native-stack/types';
+import { AnimationForGesture } from './defaults';
+import { GestureUpdateEvent } from 'react-native-gesture-handler';
+
+const SupportedGestures = [
+  'swipeRight',
+  'swipeLeft',
+  'swipeDown',
+  'swipeUp',
+  'horizontalSwipe',
+  'verticalSwipe',
+  'twoDimensionalSwipe',
+];
+
+export function getAnimationForTransition(
+  goBackGesture: GoBackGesture | undefined,
+  customTransitionAnimation: AnimatedScreenTransition | undefined,
+) {
+  let transitionAnimation = ScreenTransition.SwipeRight;
+  if (customTransitionAnimation) {
+    transitionAnimation = customTransitionAnimation;
+    if (!goBackGesture) {
+      throw new Error(
+        '[RNScreens] You have to specify `goBackGesture` when using `transitionAnimation`.',
+      );
+    }
+  } else {
+    if (!!goBackGesture && SupportedGestures.includes(goBackGesture)) {
+      transitionAnimation = AnimationForGesture[goBackGesture];
+    } else if (goBackGesture !== undefined) {
+      throw new Error(
+        `[RNScreens] Unknown goBackGesture parameter has been specified: ${goBackGesture}.`,
+      );
+    }
+  }
+  return transitionAnimation;
+}
+
+export function checkBoundaries(
+  goBackGesture: string | undefined,
+  event: GestureUpdateEvent<PanGestureHandlerEventPayload>,
+) {
+  'worklet';
+  if (goBackGesture === 'swipeRight' && event.translationX < 0) {
+    event.translationX = 0;
+  } else if (goBackGesture === 'swipeLeft' && event.translationX > 0) {
+    event.translationX = 0;
+  } else if (goBackGesture === 'swipeDown' && event.translationY < 0) {
+    event.translationY = 0;
+  } else if (goBackGesture === 'swipeUp' && event.translationY > 0) {
+    event.translationY = 0;
+  }
+}
+
+export function checkIfTransitionCancelled(
+  goBackGesture: string | undefined,
+  distanceX: number,
+  requiredXDistance: number,
+  distanceY: number,
+  requiredYDistance: number,
+) {
+  'worklet';
+  let isTransitionCanceled = false;
+  if (goBackGesture === 'swipeRight') {
+    isTransitionCanceled = distanceX < requiredXDistance;
+  } else if (goBackGesture === 'swipeLeft') {
+    isTransitionCanceled = -distanceX < requiredXDistance;
+  } else if (goBackGesture === 'horizontalSwipe') {
+    isTransitionCanceled = Math.abs(distanceX) < requiredXDistance;
+  } else if (goBackGesture === 'swipeUp') {
+    isTransitionCanceled = -distanceY < requiredYDistance;
+  } else if (goBackGesture === 'swipeDown') {
+    isTransitionCanceled = distanceY < requiredYDistance;
+  } else if (goBackGesture === 'verticalSwipe') {
+    isTransitionCanceled = Math.abs(distanceY) < requiredYDistance;
+  } else if (goBackGesture === 'twoDimensionalSwipe') {
+    const isCanceledHorizontally = Math.abs(distanceX) < requiredXDistance;
+    const isCanceledVertically = Math.abs(distanceY) < requiredYDistance;
+    isTransitionCanceled = isCanceledHorizontally && isCanceledVertically;
+  }
+  return isTransitionCanceled;
+}

package/src/gesture-handler/defaults.ts

@@ -0,0 +1,46 @@
+import {
+  GestureUpdateEvent,
+  PanGestureHandlerEventPayload,
+  PointerType,
+} from 'react-native-gesture-handler';
+import { ScreenTransition } from 'react-native-reanimated';
+
+export const DefaultEvent: GestureUpdateEvent<PanGestureHandlerEventPayload> = {
+  absoluteX: 0,
+  absoluteY: 0,
+  handlerTag: 0,
+  numberOfPointers: 0,
+  state: 0,
+  translationX: 0,
+  translationY: 0,
+  velocityX: 0,
+  velocityY: 0,
+  x: 0,
+  y: 0,
+
+  // These two were added in recent versions of gesture handler
+  // and they are required to specify. This should be backward
+  // compatible unless they strictly parse the objects, which seems
+  // not likely. PointerType is present since 2.16.0, StylusData since 2.20.0
+  pointerType: PointerType.TOUCH,
+  stylusData: undefined,
+};
+
+export const DefaultScreenDimensions = {
+  width: 0,
+  height: 0,
+  x: 0,
+  y: 0,
+  pageX: 0,
+  pageY: 0,
+};
+
+export const AnimationForGesture = {
+  swipeRight: ScreenTransition.SwipeRight,
+  swipeLeft: ScreenTransition.SwipeLeft,
+  swipeDown: ScreenTransition.SwipeDown,
+  swipeUp: ScreenTransition.SwipeUp,
+  horizontalSwipe: ScreenTransition.Horizontal,
+  verticalSwipe: ScreenTransition.Vertical,
+  twoDimensionalSwipe: ScreenTransition.TwoDimensional,
+};

package/src/gesture-handler/fabricUtils.ts

@@ -0,0 +1,86 @@
+'use strict';
+
+import { View } from 'react-native';
+
+/* eslint-disable */
+
+type LocalGlobal = typeof global & Record<string, unknown>;
+
+export function isFabric() {
+  return !!(global as LocalGlobal)._IS_FABRIC;
+}
+
+export type ShadowNodeWrapper = {
+  __hostObjectShadowNodeWrapper: never;
+};
+
+let findHostInstance_DEPRECATED: (ref: unknown) => void;
+
+let getInternalInstanceHandleFromPublicInstance: (ref: unknown) => {
+  stateNode: { node: unknown };
+};
+
+// Taken and modifies from reanimated
+export function getShadowNodeWrapperAndTagFromRef(ref: View | null): {
+  shadowNodeWrapper: ShadowNodeWrapper;
+  tag: number;
+} {
+  // load findHostInstance_DEPRECATED lazily because it may not be available before render
+  if (findHostInstance_DEPRECATED === undefined) {
+    try {
+      findHostInstance_DEPRECATED =
+        require('react-native/Libraries/Renderer/shims/ReactFabric').findHostInstance_DEPRECATED;
+    } catch (e) {
+      findHostInstance_DEPRECATED = (_ref: unknown) => null;
+    }
+  }
+
+  if (getInternalInstanceHandleFromPublicInstance === undefined) {
+    try {
+      getInternalInstanceHandleFromPublicInstance =
+        require('react-native/Libraries/ReactNative/ReactFabricPublicInstance/ReactFabricPublicInstance')
+          .getInternalInstanceHandleFromPublicInstance ??
+        ((_ref: any) => _ref._internalInstanceHandle);
+    } catch (e) {
+      getInternalInstanceHandleFromPublicInstance = (_ref: any) =>
+        _ref._internalInstanceHandle;
+    }
+  }
+
+  // taken from https://github.com/facebook/react-native/commit/803bb16531697233686efd475f004c1643e03617#diff-d8172256c6d63b5d32db10e54d7b10f37a26b337d5280d89f5bfd7bcea778292R196
+  // @ts-ignore some weird stuff on RN 0.74 - see examples with scrollView
+  const scrollViewRef = ref?.getScrollResponder?.()?.getNativeScrollRef?.();
+  // @ts-ignore some weird stuff on RN 0.74  - see examples with scrollView
+  const otherScrollViewRef = ref?.getNativeScrollRef?.();
+  // @ts-ignore some weird stuff on RN 0.74 - see setNativeProps example
+  const textInputRef = ref?.__internalInstanceHandle?.stateNode?.node;
+
+  let resolvedRef;
+  if (scrollViewRef) {
+    resolvedRef = {
+      shadowNodeWrapper: scrollViewRef.__internalInstanceHandle.stateNode.node,
+      tag: scrollViewRef._nativeTag,
+    };
+  } else if (otherScrollViewRef) {
+    resolvedRef = {
+      shadowNodeWrapper:
+        otherScrollViewRef.__internalInstanceHandle.stateNode.node,
+      tag: otherScrollViewRef.__nativeTag,
+    };
+  } else if (textInputRef) {
+    resolvedRef = {
+      shadowNodeWrapper: textInputRef,
+      tag: (ref as any)?.__nativeTag,
+    };
+  } else {
+    const hostInstance = findHostInstance_DEPRECATED(ref);
+    resolvedRef = {
+      shadowNodeWrapper:
+        getInternalInstanceHandleFromPublicInstance(hostInstance).stateNode
+          .node,
+      tag: (hostInstance as any)?._nativeTag,
+    };
+  }
+
+  return resolvedRef;
+}

package/src/gesture-handler/fabricUtils.web.ts

@@ -0,0 +1,10 @@
+export function isFabric() {
+  return false;
+}
+
+export function getShadowNodeWrapperAndTagFromRef() {
+  return {
+    shadowNodeWrapper: undefined,
+    tag: undefined,
+  };
+}

package/src/gesture-handler/index.tsx

@@ -0,0 +1,4 @@
+/*
+ * Providers
+ */
+export { default as GestureDetectorProvider } from './GestureDetectorProvider';

package/src/index.tsx

@@ -1,120 +1,56 @@
-import React, { ReactNode } from 'react';
-import { Animated, View, ViewProps, ImageProps, Image } from 'react-native';
-import {
-  ScreenProps,
-  ScreenContainerProps,
-  ScreenStackProps,
-  ScreenStackHeaderConfigProps,
-  HeaderSubviewTypes,
-  SearchBarProps,
-} from './types';
+// Side effects import declaration to ensure our TurboModule
+// is loaded.
+import './fabric/NativeScreensModule';
 
 export * from './types';
-export { default as useTransitionProgress } from './useTransitionProgress';
+
+/**
+ * Core
+ */
+export {
+  enableScreens,
+  enableFreeze,
+  screensEnabled,
+  freezeEnabled,
+} from './core';
+
+/**
+ * RNS Components
+ */
+export {
+  default as Screen,
+  InnerScreen,
+  ScreenContext,
+} from './components/Screen';
+
+export {
+  ScreenStackHeaderConfig,
+  ScreenStackHeaderSubview,
+  ScreenStackHeaderLeftView,
+  ScreenStackHeaderCenterView,
+  ScreenStackHeaderRightView,
+  ScreenStackHeaderBackButtonImage,
+  ScreenStackHeaderSearchBarView,
+} from './components/ScreenStackHeaderConfig';
+
+export { default as SearchBar } from './components/SearchBar';
+export { default as ScreenContainer } from './components/ScreenContainer';
+export { default as ScreenStack } from './components/ScreenStack';
+export { default as ScreenStackItem } from './components/ScreenStackItem';
+export { default as FullWindowOverlay } from './components/FullWindowOverlay';
+export { default as ScreenFooter } from './components/ScreenFooter';
+export { default as ScreenContentWrapper } from './components/ScreenContentWrapper';
+
+/**
+ * Utils
+ */
 export {
   isSearchBarAvailableForCurrentPlatform,
-  isNewBackTitleImplementation,
+  compatibilityFlags,
   executeNativeBackPress,
 } from './utils';
 
-let ENABLE_SCREENS = true;
-
-export function enableScreens(shouldEnableScreens = true): void {
-  ENABLE_SCREENS = shouldEnableScreens;
-}
-
-export function screensEnabled(): boolean {
-  return ENABLE_SCREENS;
-}
-
-// @ts-ignore function stub, freezing logic is located in index.native.tsx
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-export function enableFreeze(shouldEnableReactFreeze = true): void {
-  // noop
-}
-
-export class NativeScreen extends React.Component<ScreenProps> {
-  render(): JSX.Element {
-    let {
-      active,
-      activityState,
-      style,
-      enabled = ENABLE_SCREENS,
-      stackAnimation,
-      ...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} />;
-  }
-}
-
-export const Screen = Animated.createAnimatedComponent(NativeScreen);
-
-export const InnerScreen = View;
-
-export const ScreenContext = React.createContext(Screen);
-
-export const ScreenContainer: React.ComponentType<ScreenContainerProps> = View;
-
-export const NativeScreenContainer: React.ComponentType<ScreenContainerProps> =
-  View;
-
-export const NativeScreenNavigationContainer: React.ComponentType<ScreenContainerProps> =
-  View;
-
-export const ScreenStack: React.ComponentType<ScreenStackProps> = View;
-
-export const FullWindowOverlay = View as React.ComponentType<{
-  children: ReactNode;
-}>;
-
-export const ScreenStackHeaderBackButtonImage = (
-  props: ImageProps
-): JSX.Element => (
-  <View>
-    <Image resizeMode="center" fadeDuration={0} {...props} />
-  </View>
-);
-
-export const ScreenStackHeaderRightView = (
-  props: React.PropsWithChildren<ViewProps>
-): JSX.Element => <View {...props} />;
-
-export const ScreenStackHeaderLeftView = (
-  props: React.PropsWithChildren<ViewProps>
-): JSX.Element => <View {...props} />;
-
-export const ScreenStackHeaderCenterView = (
-  props: React.PropsWithChildren<ViewProps>
-): JSX.Element => <View {...props} />;
-
-export const ScreenStackHeaderSearchBarView = (
-  props: React.PropsWithChildren<Omit<SearchBarProps, 'ref'>>
-): JSX.Element => <View {...props} />;
-
-export const ScreenStackHeaderConfig = (
-  props: React.PropsWithChildren<ScreenStackHeaderConfigProps>
-): JSX.Element => <View {...props} />;
-
-// @ts-expect-error: search bar props have no common props with View
-export const SearchBar: React.ComponentType<SearchBarProps> = View;
-
-export const ScreenStackHeaderSubview: React.ComponentType<
-  React.PropsWithChildren<ViewProps & { type?: HeaderSubviewTypes }>
-> = View;
-
-export const shouldUseActivityState = true;
+/**
+ * Hooks
+ */
+export { default as useTransitionProgress } from './useTransitionProgress';

package/src/native-stack/contexts/GHContext.tsx

@@ -0,0 +1,9 @@
+'use client';
+
+import React, { PropsWithChildren } from 'react';
+import { GestureProviderProps } from '../types';
+
+// context to be used when the user wants full screen swipe (see `gesture-handler` folder in repo)
+export const GHContext = React.createContext(
+  (props: PropsWithChildren<GestureProviderProps>) => <>{props.children}</>,
+);

package/src/native-stack/navigators/createNativeStackNavigator.tsx

@@ -55,7 +55,7 @@ function NativeStackNavigator({
     // @ts-ignore navigation.dangerouslyGetParent was removed in v6
     if (navigation?.dangerouslyGetParent === undefined) {
       console.warn(
-        'Looks like you are importing `native-stack` from `react-native-screens/native-stack`. Since version 6 of `react-navigation`, it should be imported from `@react-navigation/native-stack`.'
+        'Looks like you are importing `native-stack` from `react-native-screens/native-stack`. Since version 6 of `react-navigation`, it should be imported from `@react-navigation/native-stack`.',
       );
     }
   }, [navigation]);
@@ -84,9 +84,9 @@ function NativeStackNavigator({
               });
             }
           });
-        }
+        },
       ),
-    [navigation, state.index, state.key]
+    [navigation, state.index, state.key],
   );
 
   return (
@@ -99,6 +99,9 @@ function NativeStackNavigator({
   );
 }
 
+/**
+ * @deprecated NativeStack has been moved from react-native-screens/native-stack to @react-navigation/native since version v6. With react-native-screens v4 native stack v5 (react-native-screens/native-stack) is deprecated and marked for removal in the upcoming minor release, react-native-screens v4 will support only @react-navigation/native-stack v7.
+ */
 export default createNavigatorFactory<
   StackNavigationState<ParamListBase>,
   NativeStackNavigationOptions,