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(iOS): header left and right layout on fabric #2248

Merged
merged 6 commits into from
Jul 19, 2024

Conversation

alduzy
Copy link
Member

@alduzy alduzy commented Jul 16, 2024

Description

This PR fixes the header layout mismatch when updating both headerLeft and headerRight options simultaneously using navigation.setOptions.

Fixes #2231 .

Changes

  • Forced subview to re-layout when updating layoutMetrics
  • added Test2231.tsx repro

Screenshots / GIFs

Before

Screenshot 2024-07-16 at 12 05 14

After

Screenshot 2024-07-16 at 12 04 49

Test code and steps to reproduce

  • Use Test2231.tsx repro

Checklist

  • Ensured that CI passes

@alduzy alduzy requested review from tboba and kkafar July 16, 2024 10:07
@alduzy alduzy changed the title @alduzy/fabric header left and right layout fix fix(iOS): header left and right layout on fabric Jul 16, 2024
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 promising, I just left a question on "whys".

If you're to spend too much time investigating then I think it is not worth it & feel free to say so.

One general note: add link to this PR in comment above the line you added, because it is definitely not obvious why the line should be there.

@@ -72,6 +72,7 @@ - (void)updateLayoutMetrics:(const react::LayoutMetrics &)layoutMetrics
self);
} else {
self.bounds = CGRect{CGPointZero, frame.size};
[self.superview layoutIfNeeded];
Copy link
Member

Choose a reason for hiding this comment

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

Okay, so we now trigger layout in the native superview (this is one of system views, beyond control of react) every time we receive a new frame from react.

The solution itself is ok & if it helps I'm for it, but do we have understanding why does it not work without this change? Especially that we do not have such code on Paper & I believe it works fine there?

Copy link
Member Author

Choose a reason for hiding this comment

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

Yeah, it does work fine on paper. It looks like the bounds of the subview are set properly but then the frame is given the old values unless we trigger a re-layout of the superview.

Copy link
Member

Choose a reason for hiding this comment

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

Did you check what happens if you disable view recycling on header subviews in this PR? Im speaking with context of this issue on which we debated earlier today: #2232

Copy link
Member

Choose a reason for hiding this comment

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

This might be the same issue of the views being swapped due to recycling pool working in stack manner.

Copy link
Member Author

Choose a reason for hiding this comment

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

Turning off recycling does not fix this issue

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.

Okay, after playing around with this & seeing no other solution I think we should proceed.

@alduzy alduzy merged commit 5cd3b11 into main Jul 19, 2024
5 checks passed
@alduzy alduzy deleted the @alduzy/fabric-header-left-and-right-layout-fix branch July 19, 2024 13:38
alduzy added a commit that referenced this pull request Sep 27, 2024
## Description

This PR fixes the incorrect position of the custom header items when
updating more than one option at the same time. The proposed solution
let us remove the previous fix for a similar problem:
#2248 which
only fixed the issue on fabric.

Fixes #432, #2231.

## Changes

- forced re-layout of the navigation controller when subviews are
updated
- removed previous fix
- updated `Test432` repro

<!--

## Screenshots / GIFs

Here you can add screenshots / GIFs documenting your change.

You can add before / after section if you're changing some behavior.

### Before

### After

-->

## Test code and steps to reproduce

- use `Test432` and `Test2231` to test this fix on both architectures.

## Checklist

- [x] Included code example that can be used to test this change
- [x] 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.

Wrong layout when updating headerLeft and headerRight on new arch
2 participants