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

FullWindowOverlay not fitting the window #1247

Closed
nazrdogan opened this issue Dec 25, 2021 · 5 comments · Fixed by #2430
Closed

FullWindowOverlay not fitting the window #1247

nazrdogan opened this issue Dec 25, 2021 · 5 comments · Fixed by #2430
Assignees
Labels
Bug Something isn't working Repro provided A reproduction with a snack or repo is provided

Comments

@nazrdogan
Copy link

I m trying to use FullWindowOverlay to show a custom action sheet in the modal screen. but FullWindowOverlay has some spaces at the bottom.
In our app, I edited react-native-screens/ios/RNSFullWindowOverlay.m ( version: 3.10.1) like this way. it seems working for me. but I m not sure this is the right way to do

- (void)reactSetFrame:(CGRect)frame
{
  _reactFrame = frame;
  CGRect rect = [[UIScreen mainScreen] bounds];
  [_container setFrame:rect];
}

https://snack.expo.dev/@nazrdogan/suspicious-coffee

Image from iOS

@nazrdogan nazrdogan added the Bug Something isn't working label Dec 25, 2021
@WoLewicki
Copy link
Member

I believe it is a duplicate of #1202 (check if #1202 (comment) resolves the issue). As for adding such code, it may be a good point to just make it fullscreen by default, could you make a PR with this change and this reproduction in TestsExample app ?

@github-actions github-actions bot added Missing repro This issue need minimum repro scenario Repro provided A reproduction with a snack or repo is provided and removed Missing repro This issue need minimum repro scenario labels Jan 3, 2022
@kkafar kkafar self-assigned this Aug 14, 2022
@lexi-stein
Copy link

lexi-stein commented Jul 25, 2023

Hi! Having the same issue but I can't use the solution indicated in that issue because FullWindowOverlay no longer seems to accept a style prop

@erickreutz
Copy link

This is still an issue.

@erickreutz
Copy link

The change op mentions did not work for me.

@GLSinthu
Copy link

GLSinthu commented Mar 1, 2024

Having a child view with the styles mentioned in the workaround fixed the issue for me.

      <FullWindowOverlay>
        <View style={tw`absolute inset-0 w-100vw h-100vh`}>{children}</View>
      </FullWindowOverlay>

@alduzy alduzy self-assigned this Oct 21, 2024
alduzy added a commit that referenced this issue Oct 22, 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
kkafar pushed a commit that referenced this issue 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
Bug Something isn't working Repro provided A reproduction with a snack or repo is provided
Projects
None yet
Development

Successfully merging a pull request may close this issue.

7 participants