Does not work in modal

[Whip]

Which platform(s) does your issue occur on?

• Android 10, Device

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

• CLI: 6.3.3
• Cross-platform modules: 6.3.2
• Runtime(s): 6.3.1
• Plugin(s):
  "dependencies": {
  "@nativescript/theme": "2.3.2",
  "@nstudio/nativescript-cardview": "1.0.0",
  "@nstudio/nativescript-checkbox": "1.0.0",
  "@nstudio/nativescript-floatingactionbutton": "2.0.0",
  "@nstudio/nativescript-loading-indicator": "3.0.2",
  "nativescript-carousel": "6.1.1",
  "nativescript-google-places-autocomplete": "1.0.3",
  "nativescript-image-cache-it": "5.0.0-beta.9",
  "nativescript-material-icons": "1.0.3",
  "nativescript-permissions": "1.3.8",
  "nativescript-toasty": "3.0.0-alpha.2",
  "nativescript-ui-dataform": "6.0.0",
  "nativescript-ui-listview": "8.0.1",
  "tns-core-modules": "6.4.1"
  },
  "devDependencies": {
  "nativescript-dev-webpack": "1.5.0"
  },

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

Describe the steps to reproduce it.

1. Create a regular page and open a modal from it.
2. In the modal, trigger the loader to display. It will not show. When you click back to close the modal, the loader will be over your regular originating page.

[bradmartin]

Can you provide your code to show the loader? There is an option to specify where you wanna open it from. This seems like something you should be able to leverage for now with the modal.

[Whip]

I used pretty basic standard codes so didn't even mention that.

Originating page

exports.supportForm = function(args){  // fires on click of a button
	page.showModal("about/support-page", {
		fullscreen: true
	});
}

Modal page

const LoadingIndicator = require('@nstudio/nativescript-loading-indicator').LoadingIndicator;
const Mode = require('@nstudio/nativescript-loading-indicator').Mode;
const loader = new LoadingIndicator();

xports.onShownModally = function(args) {
	//initializing code
}

exports.send = function(args){ // triggers by a button on modal page
        loader.show();
}

[bradmartin]

You could possibly try grabbing the args.object in the onShownModally and using that for the view in the android options to pass to show()

https://github.com/nstudio/nativescript-loading-indicator#android-specific

this might not work exactly and require some changes but the modal dialog in NS on android is a DialogFragment so it might. If not, I would put a view inside the modal like a text label or something and get it via its loaded event and then pass that into the show() for the android.view option as view: yourlabel.android;.

[Whip]

Ok. I'll give that a try.

[tonyhogben]

Did you get this working @VeeK727? I'm having the same issue.

[Whip]

No, I used an ActivityIndicator because it worked better in my particular situation but the method @bradmartin suggested is likely to work.

[tonyhogben]

Thanks @VeeK727. Unfortunately @bradmartin's suggestion does not appear to work. I tried this...

XML:

<Page shownModally="onShownModally" xmlns="http://schemas.nativescript.org/tns.xsd">
    <ScrollView>
        <FlexboxLayout class="page" loaded="onLoaded">
            <Label text="Page Content" />
        </FlexboxLayout>
    </ScrollView>
</Page> 

TS:

import { LoadingIndicator, OptionsCommon } from '@nstudio/nativescript-loading-indicator';

export function onLoaded(args) {
    const flex = <FlexboxLayout>args.object;
    const loadingIndicator: LoadingIndicator = new LoadingIndicator();
    const loadingOptions: OptionsCommon = {
        message: 'Loading...',
        details: 'Additional detail note!',
        dimBackground: true,
        color: '#FFFFFF',
        backgroundColor: '#FE5000',
        android: {
            view: flex.android
        },
        ios: {
            view: flex.ios
        }
    }
    loadingIndicator.show(loadingOptions);
}

I also tried using the args.object from onShownModally as @bradmartin suggested, but no dice either.

Both of these work on iOS though.

@bradmartin, any other suggestions?

[sittaman]

Hi folks, I ran into the same issue and here's how I sorted it out:

I got the modal reference
@ViewChild('modal', { static: false}) modal: ElementRef<View>;

then I passed the nativeView into the android.view option:

this.modal.nativeElement.nativeView

and it showed correctly!

hope it helps!

btw I'm using Nativescript Angular.

[kriefsacha]

@sittaman to be able to get the modal by ViewChild where did you put the id "modal" ? And you saied android.view but what about IOS ?

[sittaman]

@sittaman to be able to get the modal by ViewChild where did you put the id "modal" ? And you saied android.view but what about IOS ?

The id is the view (or modal) you want the loading to appear on top of. Or the one that is appearing over the loading.

<FlexboxLayout #modal class="nt-form" alignItems="center" height="100%" flexDirection="column">

As for iOS unfortunately I can't help, the app I was working on was android only and I have no means to test it on iOS, sorry.