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

Fix bug with header hide prop on the screen under the modal #2229

Merged
merged 3 commits into from
Jul 5, 2024

Conversation

kuczi55
Copy link
Contributor

@kuczi55 kuczi55 commented Jul 3, 2024

Description

When we push multiple screens with different configuration of headerShown prop (e.g. 4 screens with visible header and one screen with hidden header), open a modal and trigger rerenders on screens (e.g. by changing the theme) there's a high chance that value of header hide prop will be incorrect on the screen under the modal.

Big kudos to @WoLewicki for helping with debugging!

Changes

isPresentingVC flag wasn't checking if current view controller was on the top, which was causing header updates for all screens in the stack (moreover it was done in non-deterministic order as context updates can cause non-deterministic rerenders of particular screens), so check && vc == nav.topViewController was added to isPresentingVC flag in ios/RNSScreenStackHeaderConfig.mm file. After that change, we still update the screen which is directly under the modal, so fix merged in #1228 is still valid.

Screenshots / GIFs

Before

Screen.Recording.2024-07-02.at.18.17.23.mov

After

Screen.Recording.2024-07-03.at.15.54.19.mov

Test code and steps to reproduce

  1. Test2229 was added, so just render it in TestsExample app
  2. Push a few screens with header
  3. Push screen without header
  4. Open modal
  5. Background and open the app or change theme
  6. Close the modal
  7. Before the fix header should be visible on the screen although it should be a screen without a header

Checklist

Copy link
Member

@WoLewicki WoLewicki left a comment

Choose a reason for hiding this comment

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

LGTM!

Copy link
Member

@kkafar kkafar left a comment

Choose a reason for hiding this comment

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

Looks good, thanks!

@kkafar kkafar merged commit ab065f2 into software-mansion:main Jul 5, 2024
5 checks passed
ja1ns pushed a commit to WiseOwlTech/react-native-screens that referenced this pull request Oct 9, 2024
…oftware-mansion#2229)

## Description
When we push multiple screens with different configuration of
`headerShown` prop (e.g. 4 screens with visible header and one screen
with hidden header), open a modal and trigger rerenders on screens (e.g.
by changing the theme) there's a high chance that value of header hide
prop will be incorrect on the screen under the modal.

Big kudos to @WoLewicki for helping with debugging!

## Changes
`isPresentingVC` flag wasn't checking if current view controller was on
the top, which was causing header updates for all screens in the stack
(moreover it was done in non-deterministic order as context updates can
cause non-deterministic rerenders of particular screens), so check `&&
vc == nav.topViewController` was added to `isPresentingVC` flag in
`ios/RNSScreenStackHeaderConfig.mm` file. After that change, we still
update the screen which is directly under the modal, so fix merged in
software-mansion#1228 is
still valid.

## Screenshots / GIFs

### Before


https://github.com/software-mansion/react-native-screens/assets/44415389/cf9b07fc-4e95-4362-95c7-ab387a94148e

### After


https://github.com/software-mansion/react-native-screens/assets/44415389/94a5dd72-498b-4959-a2de-1e6008d63895


## Test code and steps to reproduce
1. `Test2229` was added, so just render it in `TestsExample` app
2. Push a few screens with header
3. Push screen without header
4. Open modal
5. Background and open the app or change theme
6. Close the modal
7. Before the fix header should be visible on the screen although it
should be a screen without a header

## 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
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants