feat: add screen "go back" transition animations based on gestures using Reanimated

.eslintrc.js

@@ -18,6 +18,7 @@ module.exports = {
       'react-native-screens',
       'react-native-screens/native-stack',
       'react-native-screens/reanimated',
+      'react-native-screens/gesture-handler',
     ],
     'import/ignore': [
       'node_modules/react-native/index\\.js$', 

Example/App.tsx

@@ -15,6 +15,7 @@ import RNRestart from 'react-native-restart';
 import { ListItem, SettingsSwitch } from './src/shared';
 
 import SimpleNativeStack from './src/screens/SimpleNativeStack';
+import SwipeBackAnimation from './src/screens/SwipeBackAnimation';
 import StackPresentation from './src/screens/StackPresentation';
 import HeaderOptions from './src/screens/HeaderOptions';
 import StatusBarExample from './src/screens/StatusBar';
@@ -27,6 +28,8 @@ import Events from './src/screens/Events';
 import Gestures from './src/screens/Gestures';
 
 import { enableFreeze } from 'react-native-screens';
+import { GestureDetectorProvider } from 'react-native-screens/gesture-handler';
+import { GestureHandlerRootView } from 'react-native-gesture-handler';
 
 enableFreeze();
 
@@ -47,6 +50,11 @@ const SCREENS: Record<
     component: SimpleNativeStack,
     type: 'example',
   },
+  SwipeBackAnimation: {
+    title: 'Swipe Back Animation',
+    component: SwipeBackAnimation,
+    type: 'example',
+  },
   StackPresentation: {
     title: 'Stack Presentation',
     component: StackPresentation,
@@ -150,26 +158,30 @@ const MainScreen = ({ navigation }: MainScreenProps): JSX.Element => (
 );
 
 const ExampleApp = (): JSX.Element => (
-  <NavigationContainer>
-    <Stack.Navigator
-      screenOptions={{
-        direction: I18nManager.isRTL ? 'rtl' : 'ltr',
-      }}>
-      <Stack.Screen
-        name="Main"
-        options={{ title: '📱 React Native Screens Examples' }}
-        component={MainScreen}
-      />
-      {Object.keys(SCREENS).map(name => (
-        <Stack.Screen
-          key={name}
-          name={name}
-          getComponent={() => SCREENS[name].component}
-          options={{ headerShown: false }}
-        />
-      ))}
-    </Stack.Navigator>
-  </NavigationContainer>
+  <GestureHandlerRootView style={{ flex: 1 }}>
+    <GestureDetectorProvider>
+      <NavigationContainer>
+        <Stack.Navigator
+          screenOptions={{
+            direction: I18nManager.isRTL ? 'rtl' : 'ltr',
+          }}>
+          <Stack.Screen
+            name="Main"
+            options={{ title: '📱 React Native Screens Examples' }}
+            component={MainScreen}
+          />
+          {Object.keys(SCREENS).map(name => (
+            <Stack.Screen
+              key={name}
+              name={name}
+              getComponent={() => SCREENS[name].component}
+              options={{ headerShown: false }}
+            />
+          ))}
+        </Stack.Navigator>
+      </NavigationContainer>
+    </GestureDetectorProvider>
+  </GestureHandlerRootView>
 );
 
 const styles = StyleSheet.create({

Example/babel.config.js

@@ -1,4 +1,4 @@
 module.exports = {
   presets: ['module:metro-react-native-babel-preset'],
-  plugins: [],
+  plugins: ['react-native-reanimated/plugin'],
 };

Example/ios/Podfile.lock

@@ -489,8 +489,12 @@ PODS:
     - React-jsi (= 0.72.4)
     - React-logger (= 0.72.4)
     - React-perflogger (= 0.72.4)
-  - RNGestureHandler (2.12.1):
+  - RNGestureHandler (2.13.1):
     - React-Core
+  - RNReanimated (3.7.0-nightly-20240109-9e2c33716):
+    - RCT-Folly (= 2021.07.22.00)
+    - React-Core
+    - ReactCommon/turbomodule/core
   - RNScreens (3.29.0):
     - RCT-Folly (= 2021.07.22.00)
     - React-Core
@@ -567,6 +571,7 @@ DEPENDENCIES:
   - React-utils (from `../node_modules/react-native/ReactCommon/react/utils`)
   - ReactCommon/turbomodule/core (from `../node_modules/react-native/ReactCommon`)
   - RNGestureHandler (from `../node_modules/react-native-gesture-handler`)
+  - RNReanimated (from `../node_modules/react-native-reanimated`)
   - RNScreens (from `../node_modules/react-native-screens`)
   - RNVectorIcons (from `../node_modules/react-native-vector-icons`)
   - Yoga (from `../node_modules/react-native/ReactCommon/yoga`)
@@ -672,6 +677,8 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native/ReactCommon"
   RNGestureHandler:
     :path: "../node_modules/react-native-gesture-handler"
+  RNReanimated:
+    :path: "../node_modules/react-native-reanimated"
   RNScreens:
     :path: "../node_modules/react-native-screens"
   RNVectorIcons:
@@ -680,9 +687,9 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native/ReactCommon/yoga"
 
 SPEC CHECKSUMS:
-  boost: 57d2868c099736d80fcd648bf211b4431e51a558
+  boost: a7c83b31436843459a1961bfd74b96033dc77234
   CocoaAsyncSocket: 065fd1e645c7abab64f7a6a2007a48038fdc6a99
-  DoubleConversion: 5189b271737e1565bdce30deb4a08d647e3f5f54
+  DoubleConversion: 831926d9b8bf8166fd87886c4abab286c2422662
   FBLazyVector: 5d4a3b7f411219a45a6d952f77d2c0a6c9989da5
   FBReactNativeSpec: 3fc2d478e1c4b08276f9dd9128f80ec6d5d85c1f
   Flipper: 6edb735e6c3e332975d1b17956bcc584eccf5818
@@ -694,7 +701,7 @@ SPEC CHECKSUMS:
   Flipper-PeerTalk: 116d8f857dc6ef55c7a5a75ea3ceaafe878aadc9
   FlipperKit: 2efad7007d6745a3f95e4034d547be637f89d3f6
   fmt: ff9d55029c625d3757ed641535fd4a75fedc7ce9
-  glog: 04b94705f318337d7ead9e6d17c019bd9b1f6b1b
+  glog: 5337263514dd6f09803962437687240c5dc39aa4
   hermes-engine: 81191603c4eaa01f5e4ae5737a9efcf64756c7b2
   libevent: 4049cae6c81cdb3654a443be001fb9bdceff7913
   OpenSSL-Universal: ebc357f1e6bc71fa463ccb2fe676756aff50e88c
@@ -732,13 +739,14 @@ SPEC CHECKSUMS:
   React-runtimescheduler: 4941cc1b3cf08b792fbf666342c9fc95f1969035
   React-utils: b79f2411931f9d3ea5781404dcbb2fa8a837e13a
   ReactCommon: 4b2bdcb50a3543e1c2b2849ad44533686610826d
-  RNGestureHandler: c0d04458598fcb26052494ae23dda8f8f5162b13
-  RNScreens: 3c5b9f4a9dcde752466854b6109b79c0e205dad3
+  RNGestureHandler: 38aa38413896620338948fbb5c90579a7b1c3fde
+  RNReanimated: 0f8173d46f45c2f690c416dff10206832631571d
+  RNScreens: 975abd21a20b6ebd26563e5ab86b30250569c182
   RNVectorIcons: 31cebfcf94e8cf8686eb5303ae0357da64d7a5a4
   SocketRocket: f32cd54efbe0f095c4d7594881e52619cfe80b17
   Yoga: 3efc43e0d48686ce2e8c60f99d4e6bd349aff981
   YogaKit: f782866e155069a2cca2517aafea43200b01fd5a
 
 PODFILE CHECKSUM: 86e380a4262db238c7a45428750af2d88465585c
 
-COCOAPODS: 1.11.3
+COCOAPODS: 1.14.3

Example/metro.config.js

@@ -10,6 +10,8 @@ const root = path.resolve(__dirname, '..');
 const modules = [
   '@react-navigation/native',
   'react-native-safe-area-context',
+  'react-native-gesture-handler',
+  'react-native-reanimated',
   ...Object.keys(pack.peerDependencies),
 ];
 

Example/package.json

@@ -23,7 +23,8 @@
     "nanoid": "^4.0.2",
     "react": "18.2.0",
     "react-native": "0.72.4",
-    "react-native-gesture-handler": "^2.12.1",
+    "react-native-gesture-handler": "^2.13.1",
+    "react-native-reanimated": "3.7.0-nightly-20240109-9e2c33716",
     "react-native-restart": "^0.0.27",
     "react-native-safe-area-context": "^4.8.1",
     "react-native-screens": "link:../",
@@ -36,9 +37,9 @@
     "@react-native/eslint-config": "^0.72.2",
     "@react-native/metro-config": "^0.72.11",
     "@tsconfig/react-native": "^3.0.0",
+    "@types/jest": "^29.2.5",
     "@types/react": "^18.0.24",
     "@types/react-native": "0.72.2",
-    "@types/jest": "^29.2.5",
     "@types/react-native-restart": "^0.0.0",
     "@types/react-test-renderer": "^18.0.0",
     "babel-jest": "^29.3.1",

Example/src/screens/SwipeBackAnimation.tsx

@@ -0,0 +1,74 @@
+import React from 'react';
+import { View, StyleSheet, I18nManager } from 'react-native';
+import {
+  createNativeStackNavigator,
+  NativeStackNavigationProp,
+} from 'react-native-screens/native-stack';
+import { Button } from '../shared';
+
+type StackParamList = {
+  ScreenA: undefined;
+  ScreenB: undefined;
+  ScreenC: undefined;
+};
+
+interface MainScreenProps {
+  navigation: NativeStackNavigationProp<StackParamList, 'ScreenA'>;
+}
+
+const MainScreen = ({ navigation }: MainScreenProps): JSX.Element => (
+  <View style={{ ...styles.container, backgroundColor: 'moccasin' }}>
+    <Button title="Go ScreenB" onPress={() => navigation.navigate('ScreenB')} />
+    <Button onPress={() => navigation.pop()} title="🔙 Back to Examples" />
+  </View>
+);
+
+interface ScreenBProps {
+  navigation: NativeStackNavigationProp<StackParamList, 'ScreenB'>;
+}
+
+const ScreenB = ({ navigation }: ScreenBProps): JSX.Element => (
+  <View style={{ ...styles.container, backgroundColor: 'thistle' }}>
+    <Button title="Go ScreenC" onPress={() => navigation.navigate('ScreenC')} />
+    <Button title="Go back" onPress={() => navigation.goBack()} />
+  </View>
+);
+
+interface ScreenCProps {
+  navigation: NativeStackNavigationProp<StackParamList, 'ScreenC'>;
+}
+
+const ScreenC = ({ navigation }: ScreenCProps): JSX.Element => (
+  <View style={{ ...styles.container, backgroundColor: 'blue' }}>
+    <Button title="Go back" onPress={() => navigation.goBack()} />
+  </View>
+);
+
+const Stack = createNativeStackNavigator<StackParamList>();
+
+const App = (): JSX.Element => (
+  <Stack.Navigator
+    screenOptions={{
+      headerHideBackButton: true,
+      stackAnimation: 'none',
+    }}>
+    <Stack.Screen name="ScreenA" component={MainScreen} />
+    <Stack.Screen
+      name="ScreenB"
+      component={ScreenB}
+      options={{
+        goBackGesture: 'twoDimensionalSwipe',
+      }}
+    />
+    <Stack.Screen name="ScreenC" component={ScreenC} />
+  </Stack.Navigator>
+);
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    paddingTop: 10,
+  },
+});
+
+export default App;