Update example app

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';
@@ -49,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,
@@ -155,7 +161,24 @@ const ExampleApp = (): JSX.Element => (
   <GestureHandlerRootView style={{ flex: 1 }}>
     <GestureDetectorProvider>
       <NavigationContainer>
-        <SimpleNativeStack />
+        <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>

Example/ios/.xcode.env

@@ -8,4 +8,3 @@
 # For example, to use nvm with brew, add the following line
 # . "$(brew --prefix nvm)/nvm.sh" --no-use
 export NODE_BINARY=$(command -v node)
-export NODE_BINARY=/opt/homebrew/opt/node@18/bin/node

Example/src/screens/SimpleNativeStack.tsx

@@ -5,65 +5,55 @@ import {
   NativeStackNavigationProp,
 } from 'react-native-screens/native-stack';
 import { Button } from '../shared';
-// import { ScreenTransition } from 'react-native-reanimated';
 
 type StackParamList = {
-  ScreenA: undefined;
-  ScreenB: undefined;
-  ScreenC: undefined;
+  Main: undefined;
+  Detail: undefined;
 };
 
 interface MainScreenProps {
-  navigation: NativeStackNavigationProp<StackParamList, 'ScreenA'>;
+  navigation: NativeStackNavigationProp<StackParamList, 'Main'>;
 }
 
 const MainScreen = ({ navigation }: MainScreenProps): JSX.Element => (
   <View style={{ ...styles.container, backgroundColor: 'moccasin' }}>
-    <Button title="Go ScreenB" onPress={() => navigation.navigate('ScreenB')} />
+    <Button
+      testID="simple-native-stack-go-to-detail"
+      title="Go to detail"
+      onPress={() => navigation.navigate('Detail')}
+    />
     <Button onPress={() => navigation.pop()} title="🔙 Back to Examples" />
   </View>
 );
 
-interface ScreenBProps {
-  navigation: NativeStackNavigationProp<StackParamList, 'ScreenB'>;
+interface DetailScreenProps {
+  navigation: NativeStackNavigationProp<StackParamList, 'Detail'>;
 }
 
-const ScreenB = ({ navigation }: ScreenBProps): JSX.Element => (
+const DetailScreen = ({ navigation }: DetailScreenProps): 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()} />
+    <Button
+      title="Go back"
+      onPress={() => navigation.goBack()}
+      testID="simple-native-stack-detail-go-back"
+    />
   </View>
 );
 
-const Stack = createNativeStackNavigator<StackParamList>() as any;
+const Stack = createNativeStackNavigator<StackParamList>();
 
 const App = (): JSX.Element => (
   <Stack.Navigator
     screenOptions={{
       headerHideBackButton: true,
       direction: I18nManager.isRTL ? 'rtl' : 'ltr',
-      stackAnimation: 'none',
-      goBackGesture: 'swipeRight',
     }}>
-    <Stack.Screen name="ScreenA" component={MainScreen} />
     <Stack.Screen
-      name="ScreenB"
-      component={ScreenB}
-      options={{
-        goBackGesture: 'swipeLeft',
-      }}
+      name="Main"
+      component={MainScreen}
+      options={{ title: 'Simple Native Stack' }}
     />
-    <Stack.Screen name="ScreenC" component={ScreenC} options={{}} />
+    <Stack.Screen name="Detail" component={DetailScreen} />
   </Stack.Navigator>
 );
 

Example/src/screens/SwipeBackAnimation.tsx

@@ -0,0 +1,77 @@
+import React from 'react';
+import { View, StyleSheet, I18nManager } from 'react-native';
+import {
+  createNativeStackNavigator,
+  NativeStackNavigationProp,
+} from 'react-native-screens/native-stack';
+import { Button } from '../shared';
+// import { ScreenTransition } from 'react-native-reanimated';
+
+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>() as any;
+
+const App = (): JSX.Element => (
+  <Stack.Navigator
+    screenOptions={{
+      headerHideBackButton: true,
+      direction: I18nManager.isRTL ? 'rtl' : 'ltr',
+      stackAnimation: 'none',
+      goBackGesture: 'swipeRight',
+    }}>
+    <Stack.Screen name="ScreenA" component={MainScreen} />
+    <Stack.Screen
+      name="ScreenB"
+      component={ScreenB}
+      options={{
+        goBackGesture: 'swipeLeft',
+      }}
+    />
+    <Stack.Screen name="ScreenC" component={ScreenC} options={{}} />
+  </Stack.Navigator>
+);
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    paddingTop: 10,
+  },
+});
+
+export default App;

src/gesture-handler/GestureDetector.tsx

@@ -32,6 +32,9 @@ const TransitionHandler = ({
   transitionAnimation: userTransitionAnimation,
 }: GestureProviderProps) => {
   const ScreenSize = Dimensions.get('window');
+  if (stackRefWrapper == null) {
+    throw new Error('You have to specify `stackRefWrapper`');
+  }
   stackRefWrapper.ref = useAnimatedRef();
   const defaultEvent: GestureUpdateEvent<PanGestureHandlerEventPayload> = {
     absoluteX: 0,

src/native-stack/types.tsx

@@ -513,7 +513,7 @@ export type AnimatedScreenTransition = {
 };
 
 export type GestureProviderProps = PropsWithChildren<{
-  stackRefWrapper: { ref: React.Ref<View> };
+  stackRefWrapper?: { ref: React.Ref<View> };
   goBackGesture?: GoBackGesture;
   transitionAnimation?: AnimatedScreenTransition;
 }>;