react-native-screens 3.29.0 → 3.30.1

package/src/gesture-handler/ScreenGestureDetector.tsx

@@ -0,0 +1,241 @@
+import React, { useEffect } from 'react';
+import { Dimensions, Platform, findNodeHandle } from 'react-native';
+import {
+  GestureDetector,
+  Gesture,
+  PanGestureHandlerEventPayload,
+  GestureUpdateEvent,
+} from 'react-native-gesture-handler';
+import {
+  useSharedValue,
+  measure,
+  startScreenTransition,
+  finishScreenTransition,
+  makeMutable,
+  runOnUI,
+} from 'react-native-reanimated';
+import type { GestureProviderProps } from 'src/native-stack/types';
+import { getShadowNodeWrapperAndTagFromRef, isFabric } from './fabricUtils';
+import { RNScreensTurboModule } from './RNScreensTurboModule';
+import { DefaultEvent, DefaultScreenDimensions } from './defaults';
+import {
+  checkBoundaries,
+  checkIfTransitionCancelled,
+  getAnimationForTransition,
+} from './constraints';
+
+const EmptyGestureHandler = Gesture.Fling();
+
+const ScreenGestureDetector = ({
+  children,
+  gestureDetectorBridge,
+  goBackGesture,
+  screenEdgeGesture,
+  transitionAnimation: customTransitionAnimation,
+  screensRefs,
+  currentRouteKey,
+}: GestureProviderProps) => {
+  const sharedEvent = useSharedValue(DefaultEvent);
+  const startingGesturePosition = useSharedValue(DefaultEvent);
+  const canPerformUpdates = makeMutable(false);
+  const transitionAnimation = getAnimationForTransition(
+    goBackGesture,
+    customTransitionAnimation
+  );
+  const screenTransitionConfig = makeMutable({
+    stackTag: -1,
+    belowTopScreenId: -1,
+    topScreenId: -1,
+    sharedEvent,
+    startingGesturePosition,
+    screenTransition: transitionAnimation,
+    isTransitionCanceled: false,
+    goBackGesture: goBackGesture ?? 'swipeRight',
+    screenDimensions: DefaultScreenDimensions,
+    onFinishAnimation: () => {
+      'worklet';
+    },
+  });
+  const stackTag = makeMutable(-1);
+  const screenTagToNodeWrapperUI = makeMutable<Record<string, any>>({});
+  const IS_FABRIC = isFabric();
+
+  gestureDetectorBridge.current.stackUseEffectCallback = stackRef => {
+    if (!goBackGesture) {
+      return;
+    }
+    stackTag.value = findNodeHandle(stackRef.current as any) as number;
+    if (Platform.OS === 'ios') {
+      runOnUI(() => {
+        RNScreensTurboModule.disableSwipeBackForTopScreen(stackTag.value);
+      })();
+    }
+  };
+
+  useEffect(() => {
+    if (!IS_FABRIC || !goBackGesture) {
+      return;
+    }
+    const screenTagToNodeWrapper: Record<string, Record<string, unknown>> = {};
+    for (const key in screensRefs.current) {
+      const screenRef = screensRefs.current[key];
+      const screenData = getShadowNodeWrapperAndTagFromRef(screenRef.current);
+      if (screenData.tag && screenData.shadowNodeWrapper) {
+        screenTagToNodeWrapper[screenData.tag] = screenData.shadowNodeWrapper;
+      } else {
+        console.warn('[RNScreens] Failed to find tag for screen.');
+      }
+    }
+    screenTagToNodeWrapperUI.value = screenTagToNodeWrapper;
+  }, [currentRouteKey]);
+
+  function computeProgress(
+    event: GestureUpdateEvent<PanGestureHandlerEventPayload>
+  ) {
+    'worklet';
+    let progress = 0;
+    const screenDimensions = screenTransitionConfig.value.screenDimensions;
+    const startingPosition = startingGesturePosition.value;
+    if (goBackGesture === 'swipeRight') {
+      progress =
+        event.translationX /
+        (screenDimensions.width - startingPosition.absoluteX);
+    } else if (goBackGesture === 'swipeLeft') {
+      progress = (-1 * event.translationX) / startingPosition.absoluteX;
+    } else if (goBackGesture === 'swipeDown') {
+      progress =
+        (-1 * event.translationY) /
+        (screenDimensions.height - startingPosition.absoluteY);
+    } else if (goBackGesture === 'swipeUp') {
+      progress = event.translationY / startingPosition.absoluteY;
+    } else if (goBackGesture === 'horizontalSwipe') {
+      progress = Math.abs(event.translationX / screenDimensions.width / 2);
+    } else if (goBackGesture === 'verticalSwipe') {
+      progress = Math.abs(event.translationY / screenDimensions.height / 2);
+    } else if (goBackGesture === 'twoDimensionalSwipe') {
+      const progressX = Math.abs(
+        event.translationX / screenDimensions.width / 2
+      );
+      const progressY = Math.abs(
+        event.translationY / screenDimensions.height / 2
+      );
+      progress = Math.max(progressX, progressY);
+    }
+    return progress;
+  }
+
+  function onStart(event: GestureUpdateEvent<PanGestureHandlerEventPayload>) {
+    'worklet';
+    sharedEvent.value = event;
+    const transitionConfig = screenTransitionConfig.value;
+    const transitionData = RNScreensTurboModule.startTransition(stackTag.value);
+    if (transitionData.canStartTransition === false) {
+      canPerformUpdates.value = false;
+      return;
+    }
+
+    if (IS_FABRIC) {
+      transitionConfig.topScreenId =
+        screenTagToNodeWrapperUI.value[transitionData.topScreenTag];
+      transitionConfig.belowTopScreenId =
+        screenTagToNodeWrapperUI.value[transitionData.belowTopScreenTag];
+    } else {
+      transitionConfig.topScreenId = transitionData.topScreenTag;
+      transitionConfig.belowTopScreenId = transitionData.belowTopScreenTag;
+    }
+
+    transitionConfig.stackTag = stackTag.value;
+    startingGesturePosition.value = event;
+    const animatedRefMock = () => {
+      return screenTransitionConfig.value.topScreenId;
+    };
+    const screenSize = measure(animatedRefMock as any);
+    if (screenSize == null) {
+      throw new Error('[RNScreens] Failed to measure screen.');
+    }
+    if (screenSize == null) {
+      canPerformUpdates.value = false;
+      RNScreensTurboModule.finishTransition(stackTag.value, true);
+      return;
+    }
+    transitionConfig.screenDimensions = screenSize;
+    startScreenTransition(transitionConfig);
+    canPerformUpdates.value = true;
+  }
+
+  function onUpdate(event: GestureUpdateEvent<PanGestureHandlerEventPayload>) {
+    'worklet';
+    if (!canPerformUpdates.value) {
+      return;
+    }
+    checkBoundaries(goBackGesture, event);
+    const progress = computeProgress(event);
+    sharedEvent.value = event;
+    const stackTag = screenTransitionConfig.value.stackTag;
+    RNScreensTurboModule.updateTransition(stackTag, progress);
+  }
+
+  function onEnd(event: GestureUpdateEvent<PanGestureHandlerEventPayload>) {
+    'worklet';
+    if (!canPerformUpdates.value) {
+      return;
+    }
+
+    const velocityFactor = 0.3;
+    const screenSize = screenTransitionConfig.value.screenDimensions;
+    const distanceX =
+      event.translationX + Math.min(event.velocityX * velocityFactor, 100);
+    const distanceY =
+      event.translationY + Math.min(event.velocityY * velocityFactor, 100);
+    const requiredXDistance = screenSize.width / 2;
+    const requiredYDistance = screenSize.height / 2;
+    const isTransitionCanceled = checkIfTransitionCancelled(
+      goBackGesture,
+      distanceX,
+      requiredXDistance,
+      distanceY,
+      requiredYDistance
+    );
+    const stackTag = screenTransitionConfig.value.stackTag;
+    screenTransitionConfig.value.onFinishAnimation = () => {
+      RNScreensTurboModule.finishTransition(stackTag, isTransitionCanceled);
+    };
+    screenTransitionConfig.value.isTransitionCanceled = isTransitionCanceled;
+    finishScreenTransition(screenTransitionConfig.value);
+  }
+
+  let panGesture = Gesture.Pan()
+    .onStart(onStart)
+    .onUpdate(onUpdate)
+    .onEnd(onEnd);
+
+  if (screenEdgeGesture) {
+    const HIT_SLOP_SIZE = 50;
+    const ACTIVATION_DISTANCE = 30;
+    if (goBackGesture === 'swipeRight') {
+      panGesture = panGesture
+        .activeOffsetX(ACTIVATION_DISTANCE)
+        .hitSlop({ left: 0, top: 0, width: HIT_SLOP_SIZE });
+    } else if (goBackGesture === 'swipeLeft') {
+      panGesture = panGesture
+        .activeOffsetX(-ACTIVATION_DISTANCE)
+        .hitSlop({ right: 0, top: 0, width: HIT_SLOP_SIZE });
+    } else if (goBackGesture === 'swipeDown') {
+      panGesture = panGesture
+        .activeOffsetY(ACTIVATION_DISTANCE)
+        .hitSlop({ top: 0, height: Dimensions.get('window').height * 0.2 });
+      // workaround, because we don't have access to header height
+    } else if (goBackGesture === 'swipeUp') {
+      panGesture = panGesture
+        .activeOffsetY(-ACTIVATION_DISTANCE)
+        .hitSlop({ bottom: 0, height: HIT_SLOP_SIZE });
+    }
+  }
+  return (
+    <GestureDetector gesture={goBackGesture ? panGesture : EmptyGestureHandler}>
+      {children}
+    </GestureDetector>
+  );
+};
+
+export default ScreenGestureDetector;

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,38 @@
+import {
+  GestureUpdateEvent,
+  PanGestureHandlerEventPayload,
+} 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,
+};
+
+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,39 @@
+import { NativeStackNavigatorProps } from '../native-stack/types';
+
+interface HostInstance {
+  _internalInstanceHandle: {
+    stateNode: {
+      node: Record<string, unknown>;
+    };
+  };
+  _nativeTag: number;
+}
+
+type LocalGlobal = typeof global & Record<string, unknown>;
+
+export function isFabric() {
+  return !!(global as LocalGlobal)._IS_FABRIC;
+}
+
+let findHostInstance: (ref: React.Component) => HostInstance | null = () => {
+  return null;
+};
+if (isFabric()) {
+  try {
+    findHostInstance =
+      // eslint-disable-next-line @typescript-eslint/no-var-requires
+      require('react-native/Libraries/Renderer/shims/ReactFabric').findHostInstance_DEPRECATED;
+  } catch (e) {
+    throw new Error('[RNScreens] Cannot import `findHostInstance_DEPRECATED`.');
+  }
+}
+
+export function getShadowNodeWrapperAndTagFromRef(
+  ref: React.Ref<NativeStackNavigatorProps> | React.Component
+) {
+  const hostInstance = findHostInstance(ref as React.Component);
+  return {
+    shadowNodeWrapper: hostInstance?._internalInstanceHandle.stateNode.node,
+    tag: hostInstance?._nativeTag,
+  };
+}

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,119 +1,72 @@
-import React, { ReactNode } from 'react';
-import { Animated, View, ViewProps, ImageProps, Image } from 'react-native';
-import {
-  ScreenProps,
-  ScreenContainerProps,
-  ScreenStackProps,
-  ScreenStackHeaderConfigProps,
-  HeaderSubviewTypes,
-  SearchBarProps,
-} from './types';
-
 export * from './types';
-export { default as useTransitionProgress } from './useTransitionProgress';
-export {
-  isSearchBarAvailableForCurrentPlatform,
-  isNewBackTitleImplementation,
-  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,
-      ...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} />;
+/*
+ * Core
+ */
+export {
+  enableScreens,
+  enableFreeze,
+  screensEnabled,
+  freezeEnabled,
+  shouldUseActivityState,
+} from './core';
+
+/*
+ * RNS Components
+ */
+export {
+  default as Screen,
+  NativeScreen,
+  InnerScreen,
+  ScreenContext,
+} from './components/Screen';
 
-export const ScreenStackHeaderSearchBarView = (
-  props: React.PropsWithChildren<Omit<SearchBarProps, 'ref'>>
-): JSX.Element => <View {...props} />;
+export {
+  default as ScreenContainer,
+  NativeScreenContainer,
+  NativeScreenNavigationContainer,
+} from './components/ScreenContainer';
 
-export const ScreenStackHeaderConfig = (
-  props: React.PropsWithChildren<ScreenStackHeaderConfigProps>
-): JSX.Element => <View {...props} />;
+export { default as ScreenStack } from './components/ScreenStack';
 
-// @ts-expect-error: search bar props have no common props with View
-export const SearchBar: React.ComponentType<SearchBarProps> = View;
+export {
+  ScreenStackHeaderConfig,
+  ScreenStackHeaderSubview,
+  ScreenStackHeaderLeftView,
+  ScreenStackHeaderCenterView,
+  ScreenStackHeaderRightView,
+  ScreenStackHeaderBackButtonImage,
+  ScreenStackHeaderSearchBarView,
+} from './components/ScreenStackHeaderConfig';
 
-export const ScreenStackHeaderSubview: React.ComponentType<
-  React.PropsWithChildren<ViewProps & { type?: HeaderSubviewTypes }>
-> = View;
+export {
+  default as SearchBar,
+  NativeSearchBar,
+  NativeSearchBarCommands,
+} from './components/SearchBar';
+
+export { default as FullWindowOverlay } from './components/FullWindowOverlay';
+
+/*
+ * Modules
+ */
+export { default as NativeScreensModule } from './fabric/NativeScreensModule';
+
+/*
+ * Contexts
+ */
+export { GHContext } from './native-stack/contexts/GHContext';
+
+/*
+ * Utils
+ */
+export {
+  isSearchBarAvailableForCurrentPlatform,
+  isNewBackTitleImplementation,
+  executeNativeBackPress,
+} from './utils';
 
-export const shouldUseActivityState = true;
+/*
+ * Hooks
+ */
+export { default as useTransitionProgress } from './useTransitionProgress';

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

@@ -0,0 +1,7 @@
+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}</>
+);