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): FullWindowOverlay layout height #2430

Merged
merged 1 commit into from
Oct 22, 2024

Conversation

alduzy
Copy link
Member

@alduzy alduzy commented Oct 22, 2024

Description

This PR intents to fix FullWindowOverlays height issue.

The component is given wrong frame size during layout because of it's placement in the react tree. Although in the iOS view hierarchy it is displayed independently its height is still reduced by the height of the header.

Correct frame can be achieved by utilising useWindowDimensions hook and forcing correct width and height on the JS side.

Fixes #1247

Changes

  • modified Test1096 repro

Screenshots / GIFs

Before

Simulator Screenshot - iPhone 16 Pro - 2024-10-22 at 10 08 00

After

Simulator Screenshot - iPhone 16 Pro - 2024-10-22 at 10 08 09

Test code and steps to reproduce

  • use Test1096 repro

Checklist

  • Included code example that can be used to test this change
  • Ensured that CI passes

@alduzy alduzy requested review from maciekstosio and kkafar October 22, 2024 08:23
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.

The code changes look very promising! I have only single remark and I think we can proceed. Good job 🎉

src/components/FullWindowOverlay.tsx Show resolved Hide resolved
@alduzy alduzy requested a review from kkafar October 22, 2024 08:54
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.

I have few test recommendations before merging. Beside this I think we're good to go.

src/components/FullWindowOverlay.tsx Show resolved Hide resolved
Copy link
Contributor

@maciekstosio maciekstosio left a comment

Choose a reason for hiding this comment

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

🚀

@alduzy alduzy merged commit cf31492 into main Oct 22, 2024
3 checks passed
@alduzy alduzy deleted the @laduzy/fullwindowoverlay-height-fix branch October 22, 2024 12:17
kkafar pushed a commit that referenced this pull request Oct 25, 2024
## Description

This PR intents to fix `FullWindowOverlay`s height issue.

The component is given wrong frame size during layout because of it's
placement in the react tree. Although in the iOS view hierarchy it is
displayed independently its height is still reduced by the height of the
header.

Correct frame can be achieved by utilising `useWindowDimensions` hook
and forcing correct width and height on the JS side.

Fixes #1247

## Changes

- modified `Test1096` repro

## Screenshots / GIFs

### Before
![Simulator Screenshot - iPhone 16 Pro - 2024-10-22 at 10 08
00](https://github.com/user-attachments/assets/2b7164b4-8fc8-4685-b3e5-a7d1f01f08af)

### After
![Simulator Screenshot - iPhone 16 Pro - 2024-10-22 at 10 08
09](https://github.com/user-attachments/assets/8362dcc9-e5fd-4ce1-a2ea-a47ec6e7b214)

## Test code and steps to reproduce

- use `Test1096` repro

## Checklist

- [x] Included code example that can be used to test this change
- [x] Ensured that CI passes

(cherry picked from commit cf31492)
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.

FullWindowOverlay not fitting the window
3 participants