Skip to content

Fix: Navigation gesture gestureResponseDistance failure - #1016

Open
kazhoang wants to merge 5 commits into
callstack:masterfrom
kazhoang:fix/gesture-response-distance-navigation-failure
Open

Fix: Navigation gesture gestureResponseDistance failure#1016
kazhoang wants to merge 5 commits into
callstack:masterfrom
kazhoang:fix/gesture-response-distance-navigation-failure

Conversation

@kazhoang

@kazhoangkazhoang commented Aug 1, 2025

Copy link
Copy Markdown

Summary

#Before

Screen.Recording.2025-08-01.at.14.49.12.mov

#After

Screen.Recording.2025-08-01.at.14.47.45.mov

Test Plan

"react-native": "0.79.5" (New Architect)
"react-native-pager-view": "^6.8.1"
"@react-navigation/native": "^7.1.16",
"@react-navigation/native-stack": "^7.3.23",

Set screen options:

<RootStack.Screen
name="SecurityUpdate"
component={SecurityUpdateScreen}
options={{
fullScreenGestureEnabled: true,
gestureResponseDistance: {
start: 0,
end: Constants.deviceWidth
}
}}
/>

then in the screen:

return (
<PagerView style={{ flex: 1 }} initialPage={0}>
<View key="1" style={{ backgroundColor: 'pink', flex: 1 }}>
<Text>First page</Text>
</View>
<View key="2" style={{ backgroundColor: 'green', flex: 1 }}>
<Text>Second page</Text>
</View>
</PagerView>
)

What's required for testing (prerequisites)?

What are the steps to reproduce (after prerequisites)?

Compatibility

OSImplemented
iOS
Android

Checklist

  • I have tested this on a device and a simulator
  • I added the documentation in README.md
  • I updated the typed files (TS and Flow)

@troZee

Copy link
Copy Markdown
Collaborator

@kazhoang could you resolve the conflicts 🙏 ?

Comment threadios/Fabric/RNCPagerViewComponentView.mm Outdated
@troZee
troZee requested a review from CopilotAugust 2, 2025 19:28

This comment was marked as outdated.

@kazhoang
kazhoang requested a review from troZeeAugust 6, 2025 06:59
@troZee
troZee requested review from Copilot and krozniataAugust 6, 2025 07:00

CopilotAI left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull Request Overview

This PR fixes a navigation gesture issue in PagerView where iOS fullscreen swipe-back gestures fail when using React Navigation's native stack with gestureResponseDistance. The fix allows navigation gestures to work properly when the pager is at index 0.

Key changes:

  • Added allowNavFullscreenGesture prop to enable navigation gesture passthrough
  • Implemented gesture recognition logic to handle conflicts between pager and navigation gestures
  • Added comprehensive gesture state management for iOS

Reviewed Changes

Copilot reviewed 4 out of 4 changed files in this pull request and generated 2 comments.

FileDescription
src/PagerViewNativeComponent.tsAdded TypeScript interface for new allowNavFullscreenGesture prop
ios/RNCPagerViewComponentView.mmImplemented core gesture handling logic with UIGestureRecognizerDelegate
android/src/main/java/com/reactnativepagerview/PagerViewViewManager.ktAdded stub implementation for Android compatibility
README.mdAdded documentation for the new prop
Comments suppressed due to low confidence (1)

ios/RNCPagerViewComponentView.mm:103

  • The variable name 'p' is too short and ambiguous. Consider renaming it to 'panGestureRecognizer' or 'panGesture' for better readability.
 UIPanGestureRecognizer* p = (UIPanGestureRecognizer*) gestureRecognizer;

Comment threadios/RNCPagerViewComponentView.mm Outdated
Comment threadios/RNCPagerViewComponentView.mm
@troZee
troZee requested a review from MrRefactorAugust 6, 2025 07:01

@troZeetroZee left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@kazhoang
Thank you for addressing all our feedback. Let's wait for more feedback from other devs. I will try to find time this week to check it.

Once everything is in order, we will merge and release it.

Comment threadios/RNCPagerViewComponentView.mm Outdated
Comment threadios/RNCPagerViewComponentView.mm Outdated
Comment threadios/RNCPagerViewComponentView.mm Outdated
Comment threadios/RNCPagerViewComponentView.mm Outdated
Comment threadios/RNCPagerViewComponentView.mm Outdated
_overdrag = newScreenProps.overdrag;
}

if (newScreenProps.allowNavFullscreenGesture != _allowNavFullscreenGesture) {

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You should check previous screen properties in here. Same as other props

Comment threadios/RNCPagerViewComponentView.mm Outdated
}

if (newScreenProps.allowNavFullscreenGesture != _allowNavFullscreenGesture) {
_allowNavFullscreenGesture = newScreenProps.allowNavFullscreenGesture;

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think we also don't need to store this as it's stored in _props.allowNavFullscreenGesture for us.

@kazhoangkazhoangAug 8, 2025

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@okwasniewski
I’m encountering issues with oldScreenProps.allowNavFullscreenGesture due to the recycling process while re-enter the pager-view. (It keeps the old properties)
This is why I’m using an additional local property to control it
(as otherwise, it skips attaching the navGestureRecognizer since it’s already been cleaned up)

screenshot_1754629457

Comment threadios/RNCPagerViewComponentView.mm Outdated
…ure for clarity and consistency and remove unnecessary properties
@MrRefactor
MrRefactor removed their request for review August 14, 2025 14:14
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants

@kazhoang@troZee@okwasniewski