diff --git a/Example/App.tsx b/Example/App.tsx
index acb64fb683..f53e19b350 100644
--- a/Example/App.tsx
+++ b/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 => (
-
+
+
+ {Object.keys(SCREENS).map(name => (
+ SCREENS[name].component}
+ options={{ headerShown: false }}
+ />
+ ))}
+
diff --git a/Example/ios/.xcode.env b/Example/ios/.xcode.env
index 618e4c6fc5..b32032ca15 100644
--- a/Example/ios/.xcode.env
+++ b/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
diff --git a/Example/src/screens/SimpleNativeStack.tsx b/Example/src/screens/SimpleNativeStack.tsx
index c479b313fa..7b5ab78c22 100644
--- a/Example/src/screens/SimpleNativeStack.tsx
+++ b/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;
+ navigation: NativeStackNavigationProp;
}
const MainScreen = ({ navigation }: MainScreenProps): JSX.Element => (
-
);
-interface ScreenBProps {
- navigation: NativeStackNavigationProp;
+interface DetailScreenProps {
+ navigation: NativeStackNavigationProp;
}
-const ScreenB = ({ navigation }: ScreenBProps): JSX.Element => (
+const DetailScreen = ({ navigation }: DetailScreenProps): JSX.Element => (
- navigation.navigate('ScreenC')} />
- navigation.goBack()} />
-
-);
-
-interface ScreenCProps {
- navigation: NativeStackNavigationProp;
-}
-
-const ScreenC = ({ navigation }: ScreenCProps): JSX.Element => (
-
- navigation.goBack()} />
+ navigation.goBack()}
+ testID="simple-native-stack-detail-go-back"
+ />
);
-const Stack = createNativeStackNavigator() as any;
+const Stack = createNativeStackNavigator();
const App = (): JSX.Element => (
-
-
+
);
diff --git a/Example/src/screens/SwipeBackAnimation.tsx b/Example/src/screens/SwipeBackAnimation.tsx
new file mode 100644
index 0000000000..c479b313fa
--- /dev/null
+++ b/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;
+}
+
+const MainScreen = ({ navigation }: MainScreenProps): JSX.Element => (
+
+ navigation.navigate('ScreenB')} />
+ navigation.pop()} title="🔙 Back to Examples" />
+
+);
+
+interface ScreenBProps {
+ navigation: NativeStackNavigationProp;
+}
+
+const ScreenB = ({ navigation }: ScreenBProps): JSX.Element => (
+
+ navigation.navigate('ScreenC')} />
+ navigation.goBack()} />
+
+);
+
+interface ScreenCProps {
+ navigation: NativeStackNavigationProp;
+}
+
+const ScreenC = ({ navigation }: ScreenCProps): JSX.Element => (
+
+ navigation.goBack()} />
+
+);
+
+const Stack = createNativeStackNavigator() as any;
+
+const App = (): JSX.Element => (
+
+
+
+
+
+);
+
+const styles = StyleSheet.create({
+ container: {
+ flex: 1,
+ paddingTop: 10,
+ },
+});
+
+export default App;
diff --git a/src/gesture-handler/GestureDetector.tsx b/src/gesture-handler/GestureDetector.tsx
index db4c0405e3..31c6697cc3 100644
--- a/src/gesture-handler/GestureDetector.tsx
+++ b/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 = {
absoluteX: 0,
diff --git a/src/native-stack/types.tsx b/src/native-stack/types.tsx
index 80610ea67b..7add39fba7 100644
--- a/src/native-stack/types.tsx
+++ b/src/native-stack/types.tsx
@@ -513,7 +513,7 @@ export type AnimatedScreenTransition = {
};
export type GestureProviderProps = PropsWithChildren<{
- stackRefWrapper: { ref: React.Ref };
+ stackRefWrapper?: { ref: React.Ref };
goBackGesture?: GoBackGesture;
transitionAnimation?: AnimatedScreenTransition;
}>;