fix: disable native stack animation for PayWithModal in Perps routes#30353
Conversation
The PayWithModal screen in the Perps native stack only had `transparentModalScreenOptions` (presentation: 'transparentModal') without `clearNativeStackNavigatorOptions` (animation: 'none'). This caused a double slide-up: the native stack animated the transparent screen from bottom, then the BottomSheet inside it played its own slide-up animation. Adding `clearNativeStackNavigatorOptions` makes the screen appear instantly so only the BottomSheet's animation plays.
There was a problem hiding this comment.
Cursor Bugbot has reviewed your changes and found 1 potential issue.
❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, have a team admin enable autofix in the Cursor dashboard.
Reviewed by Cursor Bugbot for commit fa4a826. Configure here.
| component={PayWithModal} | ||
| options={{ | ||
| headerShown: false, | ||
| ...clearNativeStackNavigatorOptions, |
There was a problem hiding this comment.
Redundant headerShown set before spread overwrites it
Low Severity
The explicit headerShown: false on the PayWithModal screen options is immediately overwritten by ...clearNativeStackNavigatorOptions, which also sets headerShown: false. The other modal screens in this file (e.g., CLOSE_POSITION_MODALS, MODALS.ROOT) omit the redundant explicit property. This isn't a behavioral bug, but it's inconsistent with the sibling pattern and adds minor confusion about whether an intentional override is happening.
Reviewed by Cursor Bugbot for commit fa4a826. Configure here.
🔍 Smart E2E Test Selection
click to see 🤖 AI reasoning detailsE2E Test Selection: Performance Test Selection: |
|
Description
The PayWithModal screen in the Perps native stack only had
transparentModalScreenOptions(presentation: 'transparentModal') withoutclearNativeStackNavigatorOptions(animation: 'none'). This caused a double slide-up animation: the native stack animated the transparent screen from bottom to top, then the BottomSheet component inside it played its own slide-up animation.Root Cause
transparentModalScreenOptionssetspresentation: 'transparentModal'but does not setanimation: 'none'. The default native modal animation kicks in, creating a visible slide of the transparent overlay before the BottomSheet animates.Fix
Added
...clearNativeStackNavigatorOptionsbefore...transparentModalScreenOptionson the PayWithModal screen in the Perps native stack. This makes the screen appear instantly so only the BottomSheet's own animation plays.The App.tsx JS stack registration was already correct — its parent navigator sets
animationEnabled: falseglobally.Before:
broken.background.mov
After:
fixed.background.mov
Changes
app/components/UI/Perps/routes/index.tsx— AddedclearNativeStackNavigatorOptionsto PayWithModal screen optionsNote
Low Risk
Single navigation option change for one Perps screen; no auth, data, or business-logic impact.
Overview
Fixes a double slide-up when opening the pay-with token selector from the Perps native stack: the stack was animating the transparent modal while the inner
BottomSheetalso animated.The
CONFIRMATION_PAY_WITH_MODALscreen now spreadsclearNativeStackNavigatorOptions(includinganimation: 'none') beforetransparentModalScreenOptions, matching the siblingCONFIRMATION_PAY_WITH_BOTTOM_SHEETscreen and other Perps modal routes so only the bottom sheet animates.Reviewed by Cursor Bugbot for commit 70eef9a. Bugbot is set up for automated code reviews on this repo. Configure here.