Seems like "goBackGesture" not working!

[anisurrahman072]

Description

Hi @WoLewicki , @tboba, @piaskowyk great work on "goBackGesture" 🔥

By any chance I followed all of your instructions to create "Screen transition based on gesture" in a fresh bare React Native app but I see the output is not like yours in Youtube/ Pull Request videos.

Steps to reproduce

• Below are the SDK dependencies. So, please use these SDK dependencies
• After that I have added the code of App.js file for "goBackGesture". But that didn't work

Dependencies & their Versions

• "react": "18.2.0",
• "react-native": "0.73.6",
• "@react-navigation/native": "^6.1.17",
• "@react-navigation/native-stack": "^6.9.26",
• "react-native-gesture-handler": "^2.16.0",
• "react-native-reanimated": "^3.8.1",
• "react-native-screens": "^3.30.1"

Code of App.js below 👇

// NPM MODULES
import React from 'react'
import { StyleSheet } from 'react-native'

import { NavigationContainer } from '@react-navigation/native'
import { GestureHandlerRootView } from 'react-native-gesture-handler'
import { createNativeStackNavigator } from '@react-navigation/native-stack'
import { GestureDetectorProvider } from 'react-native-screens/gesture-handler'

// SCREENS
import ScreenA from './src/components/screenA'
import ScreenB from './src/components/screenB'
import ScreenC from './src/components/screenC'

const Stack = createNativeStackNavigator()

function App() {
    return (
        <GestureHandlerRootView style={styles.container}>
            <NavigationContainer>
                <GestureDetectorProvider>
                    <Stack.Navigator
                        screenOptions={{
                            stackAnimation: 'modal'
                        }}>
                        <Stack.Screen name="ScreenA" component={ScreenA} />
                        <Stack.Screen
                            name="ScreenB"
                            component={ScreenB}
                            options={{
                                title: 'ScreenB',
                                gestureEnabled: true,
                                goBackGesture: 'swipeDown' // gestures that trigger the screen transition
                            }}
                        />
                        <Stack.Screen
                            name="ScreenC"
                            component={ScreenC}
                            options={{
                                title: 'ScreenC',
                                gestureEnabled: true,
                                goBackGesture: 'swipeUp' // gestures that trigger the screen transition
                            }}
                        />
                    </Stack.Navigator>
                </GestureDetectorProvider>
            </NavigationContainer>
        </GestureHandlerRootView>
    )
}

Expected output from your video 👇

https://github.com/software-mansion/react-native-screens/assets/40535268/8ab9fe99-e1a7-46b2-a30f-1b87abeffc71

The output from my side (Gesture & Swipe not working!) 👇

https://github.com/software-mansion/react-native-screens/assets/40535268/d4f208e7-dd75-4e23-922e-ad3bffa873aa

If you guys can help on it then it would be very helpful 🙏. Also I didn't get any complete code examples for "goBackGesture". May be I didn't find that or may that is not there yet.

Snack or a link to a repository

Issue Github Repo: https://github.com/anisurrahman072/researchRN

Screens version

^3.30.1

React Native version

0.73.6

Platforms

Android, iOS

JavaScript runtime

Hermes

Workflow

React Native (without Expo)

Architecture

Paper (Old Architecture)

Build type

Debug mode

Device

Real device

Device model

Symphony Z35 (Android 11)

Acknowledgements

Yes

[anisurrahman072]

Hello, seems like it was an issue of Import. Basically, the guide/resources were not pretty clear on how to import stuffs to activate "goBackGesture"!

✅ So I'm using this one now 👇

import { NavigationContainer } from '@react-navigation/native'
import { GestureHandlerRootView } from 'react-native-gesture-handler'
import { createNativeStackNavigator } from 'react-native-screens/native-stack'
import { GestureDetectorProvider } from 'react-native-screens/gesture-handler'

❌ Instead of this 👇

import { NavigationContainer } from '@react-navigation/native'
import { GestureHandlerRootView } from 'react-native-gesture-handler'
import { createNativeStackNavigator } from '@react-navigation/native-stack'
import { GestureDetectorProvider } from 'react-native-screens/gesture-handler'

So, now I see I can refer (inspect in VScode by CMD + Mouse Left Button) "goBackGesture" props easily 🚀

But when I ran this, I found a NEW ERROR 👇 (Could you please help here @WoLewicki , @tboba, @piaskowyk)

[anisurrahman072]

Finally solved it by using "react-native-reanimated": "3.9.0-rc.0" ---> It is not yet a stable version. It is still in pre-release.

A day in a battleship. Finally won the war 🔥

[tboba]

Hi @anisurrahman072, that's awesome! 😄 Yeah, this feature is currently working only on the native-stack v5 and RC version of Reanimated, but we're preparing all of the stuff to make this stable! ❤️

If you still have any questions, I'm happy to help. Cheers