iOS bottomsheet angular backgroundColor is undefined when binded

[bradmartin]

trafficstars

Which platform(s) does your issue occur on?

• iOS
• iOS 12+
• emulator or device. What type of device? iPhone XR

Please, provide the following version numbers that your issue occurs with:

• CLI: (run tns --version to fetch it) latest all everything

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

Describe the steps to reproduce it.

xml
<StackLayout class="bottom-sheet-layout" [backgroundColor]="CURRENT_THEME === APP_THEMES.DEFAULT ? '#ffffff' : '#202125'">

This block: https://github.com/Akylas/nativescript-material-components/blob/master/src/bottomsheet/bottomsheet.ios.ts#L183

this will run and produce undefined in the bottomsheet.ios file when it's checking for value of backgroundColor. Removing the [] binding of the value works as expected.

Wrapping the bottomsheet.ios code checking backgroundColor value in a timeout fixes the problem but don't like it 😄. I'm going with a local fork for now with this for angular because I need to support theming at runtime for various modes. I'll poke around on it a few more and see if something comes up as potential solution for angular apps.

[bradmartin]

What's even stranger about this is that the actual view in the template will be styled correctly. However, the bottomsheet.view native background color will not be set because when the if check runs the this.backgroundColor is undefined when bound via [backgroundColor].

Image below shows what happens currently at runtime. So the backgroundColor being undefined when the plugin executes, the bottomsheet.view.backgroundColor is always WHITE. Even though the layout gets the background color set, I'm assuming NS is setting this after the plugin execs that block showing the bottomsheet.

[farfromrefug]

@bradmartin have to look at this but I think it had to do with safe area. I think we need to tell the view.(the purple one) to expand o n bottom safe area

[bradmartin]

IDK, I don't think that's it. Maybe that's a solution but the face that backgroundColor is undefined without the timeout makes me think it's an execution issue with angular parsing the template AFTER the plugin show process has ran the bottom sheet backgroundColor check.

Make any sense?

[bradmartin]

Because that bottom area that is white in my screenshot is the bottomsheet.view.backgroundColor, so it seems the plugin runs it's check on the template and it's undefined then NS is correctly applying the backgroundColor of the layout of my component when it shows and has been loaded.

And hardcoding the backgroundColor it'll be defined bc the template has provided the value already when it runs thru the code to show the bottomsheet. When databound it's too early.

However, if you wanna change the plugin to handle the bottom safe area and apply the background color correctly that would work, hopefully without too much headache 👍

[henrychavez]

I think the backgroundColor being undefined is because is using the style.backgroundColor.ios as default, but the property backgroundColor in the style is undefined I had the same issue with the bottom-navigation-bar component.

[bradmartin]

That really doesn't make sense to me. It's only undefined when binded in the template. If hardcoded it's not. So it's timing related with how angular (or NS) evals the angular template with the correct bound value. Which is why a timeout causes it to not be undefined.

[standevo]

<StackLayout #modal></StackLayout>

@ViewChild("modal") modal: ElementRef<LayoutBase>;

this.modal.nativeElement.viewController.view.backgroundColor =
        this.modal.nativeElement.style.backgroundColor.ios;