Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Navigating back from modal has animation glitch in old architecture with RNS 4.0.0 (React Navigation v7) #2488

Closed
roshangm1 opened this issue Nov 10, 2024 · 1 comment · Fixed by #2496
Closed

Navigating back from modal has animation glitch in old architecture with RNS 4.0.0 (React Navigation v7) #2488

roshangm1 opened this issue Nov 10, 2024 · 1 comment · Fixed by #2496
Assignees
@kkafar
Labels
Platform: iOS This issue is specific to iOS Repro provided A reproduction with a snack or repo is provided

Comments

@roshangm1
Copy link

roshangm1 commented Nov 10, 2024 •
edited
Loading

Description

When navigating back from a presentation modal screen manually, there is no slide down animation. This makes the app look glitchy.

Reproduction link uses expo router in the example but also happens when not using it.

Simulator Screen Recording - iPhone 14 Pro - 2024-11-10 at 20 11 45

Steps to reproduce

  1. Create a new app old architecture
  2. Two screens in a stack navigator, one with "presentation": "modal"
  3. Navigate to the modal
  4. Navigate back using navigation.goBack or router.back

Snack or a link to a repository

https://github.com/roshangm1/rns-modal-navigation-animation-glitch

Screens version

4.0.0

React Native version

0.76.0

Platforms

iOS

JavaScript runtime

None

Workflow

None

Architecture

Paper (Old Architecture)

Build type

Debug mode

Device

None

Device model

No response

Acknowledgements

Yes
@github-actions github-actions bot added Repro provided A reproduction with a snack or repo is provided Platform: iOS This issue is specific to iOS labels Nov 10, 2024
@kkafar kkafar self-assigned this Nov 12, 2024
@kkafar
Copy link
Member

kkafar commented Nov 12, 2024

I confirm the issue is reproducible, thanks for reporting

@kkafar kkafar mentioned this issue Nov 12, 2024
Merged
8 tasks
kkafar added a commit that referenced this issue Nov 13, 2024
@kkafar
fix(iOS,Paper): fix broken modal go-back animation (#2496)
68e3d73 
## Description

We recently fixed left-out modals dismissal when reloading react-native.
For some reason
calling in `dismissViewControllerAnimated:completion:` on **nested**
UINavigationController
(the one responsible for displaying the navigation bar in modal, not the
one reponsible for presentation)
during invalidation messes up with the animation. 

I'm not really sure why this is the case. Earlier we were calling
dismiss on all presented modals,
but not on UINavigationController itself and it worked like a charm. 

I've found out that simply animating the change solves the situation -
we fix the animation and keep nice
modal dismissal on reload.

Fixes #2488

## Changes

:point_up:

## Test code and steps to reproduce

`TestModalNavigation`

## Checklist

- [ ] Included code example that can be used to test this change
- [ ] Updated TS types
- [ ] Updated documentation: <!-- For adding new props to native-stack
-->
- [ ]
https://github.com/software-mansion/react-native-screens/blob/main/guides/GUIDE_FOR_LIBRARY_AUTHORS.md
- [ ]
https://github.com/software-mansion/react-native-screens/blob/main/native-stack/README.md
- [ ]
https://github.com/software-mansion/react-native-screens/blob/main/src/types.tsx
- [ ]
https://github.com/software-mansion/react-native-screens/blob/main/src/native-stack/types.tsx
- [ ] Ensured that CI passes
@erickreutz erickreutz mentioned this issue Nov 13, 2024
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@kkafar kkafar

Labels
Platform: iOS This issue is specific to iOS Repro provided A reproduction with a snack or repo is provided
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix(iOS,Paper): fix broken modal go-back animation software-mansion/react-native-screens
2 participants
@roshangm1 @kkafar