search

nstudio / nativescript-loading-indicator

NativeScript Loading Indicator plugin
Apache License 2.0
49 stars 14 forks source link

Does not work in modal #35

Open Whip opened 4 years ago

Whip commented 4 years ago

Which platform(s) does your issue occur on?

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

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 commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

Ok. I'll give that a try.

tonyhogben commented 4 years ago

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

Whip commented 4 years ago

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

tonyhogben commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

@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 commented 4 years ago

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