Add screen transition animation

app/src/examples/ScreenTransitionExample.tsx

@@ -0,0 +1,115 @@
+// @ts-nocheck - It will be removed after release of react-native-screens, because currently 'react-native-screens/gesture-handler' import doesn't exist.
+import React from 'react';
+import { View, StyleSheet, Button } from 'react-native';
+import {
+  createNativeStackNavigator,
+  NativeStackScreenProps,
+} from 'react-native-screens/native-stack';
+import { ParamListBase } from '@react-navigation/native';
+import {
+  ScreenTransition,
+  AnimatedScreenTransition,
+} from 'react-native-reanimated';
+
+// This is a temporary workaround until react-native-screens release with 'react-native-screens/gesture-handler' import.
+// import { GestureDetectorProvider } from 'react-native-screens/gesture-handler';
+function GestureDetectorProvider({ children }) {
+  return children;
+}
+
+function MainScreen({ navigation }: NativeStackScreenProps<ParamListBase>) {
+  return (
+    <View style={[styles.container, styles.screenA]}>
+      <Button
+        title="Go ScreenB"
+        onPress={() => navigation.navigate('ScreenB')}
+      />
+      <Button onPress={() => navigation.pop()} title="🔙 Back to Examples" />
+    </View>
+  );
+}
+
+function ScreenB({ navigation }: NativeStackScreenProps<ParamListBase>) {
+  return (
+    <View style={[styles.container, styles.screenB]}>
+      <Button
+        title="Go ScreenC"
+        onPress={() => navigation.navigate('ScreenC')}
+      />
+      <Button title="Go back" onPress={() => navigation.goBack()} />
+    </View>
+  );
+}
+
+function ScreenC({ navigation }: NativeStackScreenProps<ParamListBase>) {
+  return (
+    <View style={[styles.container, styles.screenC]}>
+      <Button title="Go back" onPress={() => navigation.goBack()} />
+    </View>
+  );
+}
+
+const Stack = createNativeStackNavigator();
+
+const customTransition: AnimatedScreenTransition = {
+  topScreenFrame: (event, screenSize) => {
+    'worklet';
+    const progress = event.translationX / screenSize.width;
+    return {
+      transform: [
+        { translateX: event.translationX },
+        { rotate: `${20 * progress}deg` },
+      ],
+    };
+  },
+  belowTopScreenFrame: (event, screenSize) => {
+    'worklet';
+    const progress = event.translationX / screenSize.width;
+    return {
+      transform: [{ scale: 0.7 + 0.3 * progress }],
+    };
+  },
+};
+
+function ScreenTransitionExample(): JSX.Element {
+  return (
+    <GestureDetectorProvider>
+      <Stack.Navigator
+        screenOptions={{
+          headerHideBackButton: true,
+          stackAnimation: 'none',
+          goBackGesture: 'swipeRight',
+        }}>
+        <Stack.Screen name="ScreenA" component={MainScreen} />
+        <Stack.Screen
+          name="ScreenB"
+          component={ScreenB}
+          options={{ transitionAnimation: customTransition }}
+        />
+        <Stack.Screen
+          name="ScreenC"
+          component={ScreenC}
+          options={{ transitionAnimation: ScreenTransition.SwipeRightFade }}
+        />
+      </Stack.Navigator>
+    </GestureDetectorProvider>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    paddingTop: 10,
+  },
+  screenA: {
+    backgroundColor: 'moccasin',
+  },
+  screenB: {
+    backgroundColor: 'thistle',
+  },
+  screenC: {
+    backgroundColor: 'blue',
+  },
+});
+
+export default ScreenTransitionExample;

app/src/examples/ScreenTransitionExample.web.tsx

@@ -0,0 +1,19 @@
+import { StyleSheet, Text, View } from 'react-native';
+
+import React from 'react';
+
+export default function ScreenTransitionExample() {
+  return (
+    <View style={styles.container}>
+      <Text>Screen transition example is not supported on web</Text>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});

app/src/examples/index.ts

@@ -122,6 +122,7 @@ import WorkletFactoryCrash from './WorkletFactoryCrashExample';
 import RuntimeTestsExample from './RuntimeTests/RuntimeTestsExample';
 import HabitsExample from './LayoutAnimations/HabitsExample';
 import MemoExample from './MemoExample';
+import ScreenTransitionExample from './ScreenTransitionExample';
 
 interface Example {
   icon?: string;
@@ -131,7 +132,6 @@ interface Example {
 
 export const EXAMPLES: Record<string, Example> = {
   // Empty example for test purposes
-
   EmptyExample: {
     icon: '👻',
     title: 'Empty',
@@ -238,6 +238,11 @@ export const EXAMPLES: Record<string, Example> = {
     title: 'Update props performance',
     screen: UpdatePropsPerfExample,
   },
+  ScreenTransitionExample: {
+    icon: '📺',
+    title: 'Screen transition',
+    screen: ScreenTransitionExample,
+  },
 
   // Basic examples
 

src/ConfigHelper.ts

@@ -11,7 +11,7 @@ function assertNoOverlapInLists() {
   }
 }
 
-function configureProps(): void {
+export function configureProps(): void {
   assertNoOverlapInLists();
   jsiConfigureProps(
     Object.keys(PropsAllowlists.UI_THREAD_PROPS_WHITELIST),

src/reanimated2/globals.d.ts

@@ -18,6 +18,7 @@ import type { ProgressTransitionRegister } from './layoutReanimation/sharedTrans
 import type { UpdatePropsManager } from './UpdateProps';
 import type { callGuardDEV } from './initializers';
 import type { WorkletRuntime } from './runtimes';
+import type { RNScreensTurboModuleType } from './screenTransition/commonTypes';
 
 declare global {
   var _REANIMATED_IS_REDUCED_MOTION: boolean | undefined;
@@ -105,6 +106,7 @@ declare global {
   var UpdatePropsManager: UpdatePropsManager;
   var ProgressTransitionRegister: ProgressTransitionRegister;
   var updateJSProps: (viewTag: number, props: Record<string, unknown>) => void;
+  var RNScreensTurboModule: RNScreensTurboModuleType | undefined;
   var _obtainPropPaper: (viewTag: number, propName: string) => string;
   var _obtainPropFabric: (
     shadowNodeWrapper: ShadowNodeWrapper,

src/reanimated2/index.ts

@@ -273,3 +273,13 @@ export type {
 export type { AnimatedScrollViewProps } from './component/ScrollView';
 export type { FlatListPropsWithLayout } from './component/FlatList';
 export { startMapper, stopMapper } from './mappers';
+export {
+  startScreenTransition,
+  finishScreenTransition,
+  ScreenTransition,
+} from './screenTransition';
+export type {
+  AnimatedScreenTransition,
+  GoBackGesture,
+  ScreenTransitionConfig,
+} from './screenTransition';

src/reanimated2/screenTransition/RNScreensTurboModule.ts

@@ -0,0 +1,29 @@
+'use strict';
+import type { RNScreensTurboModuleType } from './commonTypes';
+
+function noopFactory<T>(defaultReturnValue?: T): () => T {
+  return () => {
+    'worklet';
+    console.warn(
+      '[Reanimated] RNScreensTurboModule has not been found. Check that you have installed `[email protected]` or newer in your project and rebuilt your app.'
+    );
+    return defaultReturnValue as T;
+  };
+}
+
+type TransactionConfig = {
+  topScreenId: number;
+  belowTopScreenId: number;
+  canStartTransition: boolean;
+};
+
+export const RNScreensTurboModule: RNScreensTurboModuleType =
+  global.RNScreensTurboModule || {
+    startTransition: noopFactory<TransactionConfig>({
+      topScreenId: -1,
+      belowTopScreenId: -1,
+      canStartTransition: false,
+    }),
+    updateTransition: noopFactory(),
+    finishTransition: noopFactory(),
+  };

src/reanimated2/screenTransition/animationManager.ts

@@ -0,0 +1,45 @@
+'use strict';
+
+import type { LockAxis, ScreenTransitionConfig } from './commonTypes';
+import { configureProps } from '../../ConfigHelper';
+import { applyStyle } from './styleUpdater';
+import { getSwipeSimulator } from './swipeSimulator';
+
+configureProps();
+
+export function startScreenTransition(
+  screenTransitionConfig: ScreenTransitionConfig
+) {
+  'worklet';
+  const { stackTag, sharedEvent } = screenTransitionConfig;
+  sharedEvent.addListener(stackTag, () => {
+    applyStyle(screenTransitionConfig, sharedEvent.value);
+  });
+}
+
+function getLockAxis(goBackGesture: string): LockAxis {
+  'worklet';
+  if (['swipeRight', 'swipeLeft', 'horizontalSwipe'].includes(goBackGesture)) {
+    return 'x';
+  } else if (
+    ['swipeUp', 'swipeDown', 'verticalSwipe'].includes(goBackGesture)
+  ) {
+    return 'y';
+  }
+  return undefined;
+}
+
+export function finishScreenTransition(
+  screenTransitionConfig: ScreenTransitionConfig
+) {
+  'worklet';
+  const { stackTag, sharedEvent, goBackGesture } = screenTransitionConfig;
+  sharedEvent.removeListener(stackTag);
+  const lockAxis = getLockAxis(goBackGesture);
+  const step = getSwipeSimulator(
+    sharedEvent.value,
+    screenTransitionConfig,
+    lockAxis
+  );
+  step();
+}

src/reanimated2/screenTransition/commonTypes.ts

@@ -0,0 +1,63 @@
+'use strict';
+
+import type {
+  MeasuredDimensions,
+  ShadowNodeWrapper,
+  SharedValue,
+} from '../commonTypes';
+
+export type PanGestureHandlerEventPayload = {
+  x: number;
+  y: number;
+  absoluteX: number;
+  absoluteY: number;
+  translationX: number;
+  translationY: number;
+  velocityX: number;
+  velocityY: number;
+};
+
+export type AnimatedScreenTransition = {
+  topScreenFrame: (
+    event: PanGestureHandlerEventPayload,
+    screenDimensions: MeasuredDimensions
+  ) => Record<string, unknown>;
+  belowTopScreenFrame: (
+    event: PanGestureHandlerEventPayload,
+    screenDimensions: MeasuredDimensions
+  ) => Record<string, unknown>;
+};
+
+export type GoBackGesture =
+  | 'swipeRight'
+  | 'swipeLeft'
+  | 'swipeUp'
+  | 'swipeDown'
+  | 'verticalSwipe'
+  | 'horizontalSwipe'
+  | 'twoDimensionalSwipe';
+
+export type ScreenTransitionConfig = {
+  stackTag: number;
+  belowTopScreenId: number | ShadowNodeWrapper;
+  topScreenId: number | ShadowNodeWrapper;
+  screenTransition: AnimatedScreenTransition;
+  sharedEvent: SharedValue<PanGestureHandlerEventPayload>;
+  startingGesturePosition: SharedValue<PanGestureHandlerEventPayload>;
+  onFinishAnimation?: () => void;
+  isTransitionCanceled: boolean;
+  goBackGesture: GoBackGesture;
+  screenDimensions: MeasuredDimensions;
+};
+
+export type RNScreensTurboModuleType = {
+  startTransition: (stackTag: number) => {
+    topScreenId: number | ShadowNodeWrapper;
+    belowTopScreenId: number | ShadowNodeWrapper;
+    canStartTransition: boolean;
+  };
+  updateTransition: (stackTag: number, progress: number) => void;
+  finishTransition: (stackTag: number, isCanceled: boolean) => void;
+};
+
+export type LockAxis = 'x' | 'y' | undefined;

src/reanimated2/screenTransition/index.ts

@@ -0,0 +1,12 @@
+'use strict';
+
+export {
+  startScreenTransition,
+  finishScreenTransition,
+} from './animationManager';
+export { ScreenTransition } from './presets';
+export type {
+  AnimatedScreenTransition,
+  GoBackGesture,
+  ScreenTransitionConfig,
+} from './commonTypes';