How to properly reference modals as of NativeScript 4


#1

I have built an app with NativeScript Angular (now on v4.1). I am using the code below to set a status bar color on Android, which works fine for “regular” views by using angular routing:

if (isAndroid) {
  if (app.android && device.sdkVersion >= '21') {
    const nativeColor = new Color('purple').android;
    const window = app.android.startActivity.getWindow();
    window.addFlags(android.view.WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS);
    app.android.startActivity.getWindow().setStatusBarColor(nativeColor);
  }
}

However, it does not work in a modal, where the colored status-bar turns to black. Anyone any ideas why this is? My best guess would be that a modal is not referenced by app.android.startActivity.getWindow() but I’m unclear as how to get it.

Not sure to what extent this is related, but also I am unable to set a different loading indicator on iOS in modals by using this code from the docs (again works fine in non-modal views):

if (isIOS) {
  var indicator = this.page.getViewById("spinner");
  indicator.ios.activityIndicatorViewStyle = UIActivityIndicatorViewStyle.WhiteLarge;
}

Thanks for any pointers!

P.S. I have posted this on StackOverflow as well if anyone prefers to answer there.


#2

The android docs says you should call dialog.requestWindowFeature(Window.FEATURE_NO_TITLE); inside onCreateDialog but I didn’t get time to test it yet.

If you want to give it a try, you will have to add those lines here. Let me know if that solves this issue.


#3

Hey @manojdcoder! Thanks for your reply. Adding the exact line you posted causes the app to crash, but the line below “works” as in it doesn’t crash, but the modal isn’t affected and still has a black statusbar:

dialog.requestWindowFeature(android.view.Window.FEATURE_NO_TITLE);

Do you know how I can change the line below to get the window for a modal instead (so I won’t have to hack the NS core code)?

const window = app.android.startActivity.getWindow();

Thanks for helping out!


#4

You can of course get the window of dialog using just dialog.getWindow(), but the reason I asked to hack the core code is that requestWindowFeature has to be called before dialog content could be set.

Do you have any crash log to understand why exactly it crashed.


#5

Hey man!

So it doesn’t crash when I do (added the android.view to what you wrote):

dialog.requestWindowFeature(android.view.Window.FEATURE_NO_TITLE);

So you write you write that I can get the “dialog.getWindow()” inside the modal. What I don’t understand is how I can get a reference to dialog inside of the modal in my app (not in the core view)?

Thanks!


#6

The code was copied directly from android docs, I hoped you must be able to figure out how to write it in {N} and you did.

To get reference of dialog, you can simply access ._dialogFragment.getDialog() on your root view of the modal component.


#7

Hey man!

Sorry for the delay, I was away for a couple of days.

Thanks to your help, I was able to get the dialog fragment through the root view of my modal component. I do see for example the getDialog and the getActivity functions on that object (and the toString() function on that object returns for example DialogFragment_view_84_32_DialogFragmentImpl).

The thing is tough that they return null when I call them, even if I add the requestWindowFeature to the tns-core-modules as you suggested.

Any idea what might be going on?

Thanks a lot!


#8

After reading this I moved calling _dialogFragment.getDialog() to ngAfterViewInit and inside of a setTimeout of 1ms and now getDialog works and I can call getWindow().

However I am still not able to set the statusbar color as follows:

const dialog = dialogFragmentRef.getDialog();
const window = dialog.getWindow();

const nativeColor = new Color('#ff0000').android;
window.addFlags(android.view.WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS);
window.setStatusBarColor(nativeColor);

#9

Correction: due to the FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS flag, modals now span under the status-bar, but I am still unable to set the color properly if I don’t set this flag.

If you have any ideas still I would be happy to hear them.

Thanks again!


#10

By the way regarding the activityIndicator it was very simple to fix by not using page to reference the indicator but using an Angular ViewChild on the indicator element and then referencing that:

<ActivityIndicator #spinner busy="true"></ActivityIndicator>
@ViewChild('spinner') spinner: ElementRef;
this.spinner.nativeElement.ios.activityIndicatorViewStyle = UIActivityIndicatorViewStyle.WhiteLarge;