Seems like "goBackGesture" not working!
anisurrahman072 opened this issue Β· comments
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 π
Screen.Recording.2024-04-12.at.3.55.14.PM.mov
The output from my side (Gesture & Swipe not working!) π
Screen.Recording.2024-04-12.at.3.51.43.PM.mov
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
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)
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 π₯
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