Screen Transitions

/**
 * Starts a screen transition animation with gesture handling
 * @param config - Screen transition configuration
 */
function startScreenTransition(config: ScreenTransitionConfig): void;

interface ScreenTransitionConfig {
  /** Stack identifier for the navigation stack */
  stackTag: number;
  /** ID or wrapper for the screen below the top screen */
  belowTopScreenId: number | ShadowNodeWrapper;
  /** ID or wrapper for the top screen being transitioned */
  topScreenId: number | ShadowNodeWrapper;
  /** Animation configuration for the transition */
  screenTransition: AnimatedScreenTransition;
  /** Shared value containing gesture event data */
  sharedEvent: SharedValue<PanGestureHandlerEventPayload>;
  /** Starting position of the gesture */
  startingGesturePosition: SharedValue<PanGestureHandlerEventPayload>;
  /** Optional callback when animation finishes */
  onFinishAnimation?: () => void;
  /** Whether the transition was canceled */
  isTransitionCanceled: boolean;
  /** Type of gesture that triggers go-back behavior */
  goBackGesture: GoBackGesture;
  /** Screen dimensions for calculations */
  screenDimensions: MeasuredDimensions;
}

import { startScreenTransition, ScreenTransition } from "react-native-reanimated";

const MyNavigator = () => {
  const sharedEvent = useSharedValue<PanGestureHandlerEventPayload>({
    x: 0, y: 0, absoluteX: 0, absoluteY: 0,
    translationX: 0, translationY: 0,
    velocityX: 0, velocityY: 0,
  });

  const startTransition = () => {
    startScreenTransition({
      stackTag: 1,
      belowTopScreenId: previousScreenId,
      topScreenId: currentScreenId,
      screenTransition: ScreenTransition.SwipeRight,
      sharedEvent,
      startingGesturePosition: useSharedValue(initialPosition),
      goBackGesture: 'swipeRight',
      screenDimensions: { width: 375, height: 812, x: 0, y: 0, pageX: 0, pageY: 0 },
      isTransitionCanceled: false,
    });
  };
};

/**
 * Finishes a screen transition with cleanup and final animation state
 * @param config - Screen transition configuration
 */
function finishScreenTransition(config: ScreenTransitionConfig): void;

import { finishScreenTransition } from "react-native-reanimated";

const completeTransition = () => {
  finishScreenTransition({
    stackTag: 1,
    belowTopScreenId: previousScreenId,
    topScreenId: currentScreenId,
    screenTransition: ScreenTransition.SwipeRight,
    sharedEvent,
    startingGesturePosition: startPosition,
    goBackGesture: 'swipeRight',
    screenDimensions: screenDims,
    isTransitionCanceled: false,
  });
};

const ScreenTransition: {
  /** Swipe right transition (iOS-style back navigation) */
  SwipeRight: AnimatedScreenTransition;
  /** Swipe left transition */
  SwipeLeft: AnimatedScreenTransition;
  /** Swipe down transition (modal dismiss) */
  SwipeDown: AnimatedScreenTransition;
  /** Swipe up transition */
  SwipeUp: AnimatedScreenTransition;
};

interface AnimatedScreenTransition {
  /** Style function for the top screen during transition */
  topScreenStyle: (
    event: PanGestureHandlerEventPayload,
    screenDimensions: MeasuredDimensions
  ) => Record<string, unknown>;
  /** Style function for the screen below during transition */
  belowTopScreenStyle: (
    event: PanGestureHandlerEventPayload,
    screenDimensions: MeasuredDimensions
  ) => Record<string, unknown>;
}

import { ScreenTransition } from "react-native-reanimated";

// Using preset transitions
const navigationConfig = {
  ios: ScreenTransition.SwipeRight,
  android: ScreenTransition.SwipeLeft,
  modal: ScreenTransition.SwipeDown,
};

// Custom transition
const customTransition: AnimatedScreenTransition = {
  topScreenStyle: (event, screenSize) => ({
    transform: [
      { translateX: event.translationX },
      { scale: 1 - Math.abs(event.translationX) / screenSize.width * 0.1 }
    ],
    opacity: 1 - Math.abs(event.translationX) / screenSize.width * 0.3,
  }),
  belowTopScreenStyle: (event, screenSize) => ({
    transform: [
      { translateX: (event.translationX - screenSize.width) * 0.3 },
    ],
  }),
};

type GoBackGesture = 
  | 'swipeRight'
  | 'swipeLeft' 
  | 'swipeUp'
  | 'swipeDown'
  | 'verticalSwipe'
  | 'horizontalSwipe'
  | 'twoDimensionalSwipe';

interface PanGestureHandlerEventPayload {
  /** Current x position */
  x: number;
  /** Current y position */
  y: number;
  /** Absolute x position on screen */
  absoluteX: number;
  /** Absolute y position on screen */
  absoluteY: number;
  /** Translation from starting x position */
  translationX: number;
  /** Translation from starting y position */
  translationY: number;
  /** Horizontal velocity */
  velocityX: number;
  /** Vertical velocity */
  velocityY: number;
}

interface MeasuredDimensions {
  /** X position relative to parent */
  x: number;
  /** Y position relative to parent */
  y: number;
  /** Width of the element */
  width: number;
  /** Height of the element */
  height: number;
  /** X position relative to screen */
  pageX: number;
  /** Y position relative to screen */
  pageY: number;
}

interface ShadowNodeWrapper {
  /** Internal shadow node reference */
  __hostObjectShadowNodeWrapper: any;
}

type LockAxis = 'x' | 'y' | undefined;