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.

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

When enabled fullScreenGestureEnabled, the animation changed from Native one to React Navigation animation once goes back triggered #2227

Closed
xiaomei7 opened this issue Jul 2, 2024 · 6 comments · Fixed by #2234
Assignees
Labels
Platform: iOS This issue is specific to iOS Repro provided A reproduction with a snack or repo is provided

Comments

@xiaomei7
Copy link

xiaomei7 commented Jul 2, 2024

Description

Basically the title.
In my project, I enabled fullScreenGestureEnabled for stack options. I went on using the app with no problem but once I go back then go into it again or any other screens, the animation changes from Native behaviour to React Navigation one.

Steps to reproduce

  1. set fullScreenGestureEnabled to true.
  2. App must have more than one stack screen.
  3. Navigate to one, then swipe back.
  4. Navigate again, the animation looks different.

Snack or a link to a repository

https://github.com/xiaomei7/ReactScreenBugExample

Screens version

3.27.0

React Native version

0.73.8

Platforms

iOS

JavaScript runtime

None

Workflow

None

Architecture

None

Build type

None

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 Jul 2, 2024
@xiaomei7
Copy link
Author

xiaomei7 commented Jul 2, 2024

Uploading RPReplay_Final1719927009.mp4…

@kkafar
Copy link
Member

kkafar commented Jul 2, 2024

@xiaomei7 I was just about to ask you for recording, cause I'm trying to reproduce & I can't spot the issue.

Please note that your video did not upload.

@kkafar kkafar self-assigned this Jul 2, 2024
@kkafar
Copy link
Member

kkafar commented Jul 2, 2024

Oh, I can see it 😱

Initial After swipeback
initial-animation.mov
animation-after-navigating-with-swipe.mov

It looks like missing shadow / elevation. Very interesting 😄

@xiaomei7
Copy link
Author

xiaomei7 commented Jul 2, 2024

Yes, sorry for the video, didn't see it haven't upload, but the animation is very subtle yeah😵

@kkafar
Copy link
Member

kkafar commented Jul 2, 2024

I'm not sure whether this is a bug or iOS feature yet. Will look into it sometime this / next week and update you here.

@xiaomei7
Copy link
Author

xiaomei7 commented Jul 2, 2024

many thanks

@kkafar kkafar assigned maksg and unassigned kkafar Jul 3, 2024
@maksg maksg closed this as completed in 8a13075 Jul 9, 2024
ja1ns pushed a commit to WiseOwlTech/react-native-screens that referenced this issue Oct 9, 2024
software-mansion#2234)

## Description

Doing the swipe also caused programmatic push to use manual transition
and have no shadow.
Fixes software-mansion#2227.

## Changes

Set `_isFullWidthSwiping` to `NO` when swipe gesture ends in
`handleSwipe:` so programmatic push and pop can use OS logic by default.

## Screenshots / GIFs

### Before

https://github.com/software-mansion/react-native-screens/assets/11507974/0f710aec-c8f0-4a3a-82df-d3edb5f0fb19

### After

https://github.com/software-mansion/react-native-screens/assets/11507974/51119c74-b2c3-4c32-9202-6954c3c70218

## Test code and steps to reproduce

1. Run `Test2227` in TestsExample app.
2. Push screen with `Go to Details`.
3. Swipe back with full screen swipe gesture.
4. Push screen with `Go to Details` again.
7. Before this fix there would be no shadow during transition after
first full screen swipe back.

## Checklist

- [x] 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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Platform: iOS This issue is specific to iOS Repro provided A reproduction with a snack or repo is provided
Projects
None yet
3 participants