[iOS] SideDrawer does not stretch on iPhone X

Tell us about the problem

Here are cases based on the template-tab-navigation-ts.

Which platform(s) does your issue occur on?

iOS

Please tell us how to recreate the issue in as much detail as possible.

tns create my-drawer-ts --template https://github.com/NativeScript/template-drawer-navigation-ts

Screenshots

drawer-navigation-portrait-current

Expected: SideDrawer content should span under the home indicator.

drawer-navigation-landscape-current

Expected: SideDrawer background should stretch.

It is possible to get around this very easily with the help of safe areas (using - margins on iphone x). I am using this in multiple projects and it works flawfless. :D

Check out how Eddy has solved this in his plugins showcase project. https://github.com/EddyVerbruggen/nativescript-pluginshowcase

@p-3

@p-3 not entirely flawless... these values would have to be adjusted on rotation.

Hi all,
This issue should be fixed with the latest nativescript-ui-sidedrawer (v. 5.0.0). I will close the issue. If the issue appears again, I will reopen it.

@tsonevn

@tsonevn I experience the same issue with nativescript-ui-sidedrawer (v6.0.0). However, I'm using the side drawer only on one page not as a global root sidedrawer. Is it possible that the issue was only fixed for the global case?

@stefan-kolb

HI @stefan-kolb,
Currently, by design, if you want to display SideDrawer, which is shown above the ActionBar, you need to define the Drawer as a root component. In your case, you can disable the RadSideDrawer on some of the pages by setting up gesturesEnabled property to false.

@tsonevn

@tsonevn Is the homeindicator on the bottom part of the action bar? I'm not referring to the action bar but the bottom of the screen.

@stefan-kolb

Hi @stefan-kolb,
The blue line, shown below the SideDrawer might be related to some global CSS style that might apply this background color to the Drawer component. Keep in mind that this is only an assumption. It will help if you can provide the project, that will help us in investigating further, where this line comes from.

@tsonevn

Hi @tsonevn,

here's a demo project which reproduces the issue:
https://play.nativescript.org/?template=play-ng&id=9dMwDw&v=25

In Android, the page including the background and the drawer spans the whole page.

@stefan-kolb

Hi @stefan-kolb,
Thank you for the demo project. I discussed your case with the dev team and it seems that this is expected behaviour(the RadSideDrawer not to be stretched) when the component is nested inside the page. On that matter, I would suggest opening a new feature request in the nativescript-ui-feedback repository, for providing support for your scenario.
Meanwhile, as I suggested in my previous comment, you can set up the Drawer as root and you can disable it on some of the pages by setting up gesturesEnabled property to false.

@tsonevn

Hi @tsonevn,

how can this be expected behavior? If the side drawer is used in the app component it also stretches.
Furthermore, on Android it stretches expectedly or am I using just a wrong Android device? This feels like a bug to me. Also, disabling the side drawer on every page (there might be quite a few) feels like a hack (and it is even pretty hacky to do so, as the side drawer is not immediately available to the page. If I'm not mistaken it was something like:

`ngAfterViewInit() {`
    // use setTimeout otherwise there is no getRootView valid reference
    setTimeout(() => {
        const drawer = <RadSideDrawer>app.getRootView();
        drawer.gesturesEnabled = false;
    }, 100);
}

Additionally, if I move the side drawer to the root component, I get problems with the side drawer and ScrollView on pages. It will disable scrolling and hide form fields when the soft keyboard comes up.

I nevertheless filed a new issue in the nativescript ui repository. It also looks like the layout algorithm thinks it can use the whole page and cuts of the button at the bottom. ProgressNS/nativescript-ui-feedback#1058

@stefan-kolb

Hi @stefan-kolb,
In the introduction of the safe area feature for iOS, a few changes were made on the RadSideDrawer component for its properly layouting. Those changes currently affect only the cases when the component is used as a root container. On that matter, since the case(not stretched SideDrawer inside the child component) is related to the safe area iOS feature, in my opinion nativescript-ui-feedback#1058 is more likely a feature request rather then a bug reported.
On Android, there is no Safe Area and the RadSideDrawer will be stretch correctly in both scenarios( while using the component as root or inside the child components).

Regarding the solution with gesturesEnabled = false. Once SideDrawer is defined as a root container, you should be able to access it without the timeout. As a reference, you can check our template-drawer-navigation-ng template.

About the ScrollView, you can try nesting it inside a GridLayout, which should solve the issue.

@stefan-kolb

HI @stefan-kolb,
I've discussed the case again with the team and we've decided to mark issue ProgressNS/nativescript-ui-feedback#1058 as a bug, which we will investigate further. For now, I would suggest keeping track on issue ProgressNS/nativescript-ui-feedback#1058 for further info.

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.

Navigation Menu

Repository navigation

[iOS] SideDrawer does not stretch on iPhone X #5782

Tell us about the problem

Which platform(s) does your issue occur on?

Please tell us how to recreate the issue in as much detail as possible.

Screenshots

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

[iOS] SideDrawer does not stretch on iPhone X #5782

Description

Tell us about the problem

Which platform(s) does your issue occur on?

Please tell us how to recreate the issue in as much detail as possible.

Screenshots

Activity

p-3 commented on May 16, 2018

drewcovi commented on Oct 24, 2018

tsonevn commented on Dec 4, 2018

stefan-kolb commented on Mar 15, 2019

tsonevn commented on Mar 19, 2019

stefan-kolb commented on Mar 19, 2019

tsonevn commented on Mar 20, 2019

stefan-kolb commented on Mar 20, 2019

tsonevn commented on Mar 21, 2019

stefan-kolb commented on Mar 21, 2019

stefan-kolb commented on Mar 21, 2019

tsonevn commented on Mar 22, 2019

tsonevn commented on Mar 22, 2019

lock commented on Mar 21, 2020

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions