Does not work in modal about nativescript-loading-indicator HOT 10 OPEN

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.

from nativescript-loading-indicator.

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.

from nativescript-loading-indicator.

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();
}

from nativescript-loading-indicator.

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;.

from nativescript-loading-indicator.

Ok. I'll give that a try.

from nativescript-loading-indicator.

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

from nativescript-loading-indicator.

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

from nativescript-loading-indicator.

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?

from nativescript-loading-indicator.

@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 ?

from nativescript-loading-indicator.

@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.

from nativescript-loading-indicator.