Snackbar pushing page down on android

[johandrott]

Make sure to check the demo app(s) for sample usage

• Done

Make sure to check the existing issues in this repository

• Done

If the demo apps cannot help and there is no issue for your problem, tell us about it

When showing a snackbar on android, the page is pushed down. This problem occurs whether you attach the snackbar to a view or not. iOS work as expected... See screenshots.

Which platform(s) does your issue occur on?

• Android

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

• CLI: (run tns --version to fetch it)
• Cross-platform modules: (check the 'version' attribute in the node_modules/@nativescript/core/package.json file in your project)
• Runtime(s): (look for the "tns-android" and "tns-ios" properties in the package.json file of your project)
• Plugin(s): (look for the version numbers in the package.json file of your project and paste your dependencies and devDependencies here)

"@angular/core": "~11.0.0", "@nativescript-community/ui-material-snackbar": "^5.2.7"

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

Describe the steps to reproduce it.

Is there any code involved?

new SnackBar().showSnack({ message: "My message", hideDelay: 10000, actionText: "OK", textColor: "white", actionTextColor: "white", backgroundColor: "red", maxLines: 3, view: this.view.nativeElement, });

[farfromrefug]

@johandrott the issue comes from your 'view' argument. it seems to be wrong on android and thus it adds the snack to the decor view or something, thus pushing the full page. Cant really say more. I can tell you that i get to work perfectly here with the view option or not. If you are sure there is an issue you can try the demo app (vue is most maintained one) from this repo: build.all cd demo-vue tns run android

[johandrott]

The issue still happens if a view is not supplied to the showSnack function. I will try to replicate the issue within the demo and report back to you.

[johandrott]

@farfromrefug I have not yet been able to reproduce the issue in the vue demo, my project is using angular. However, I found the line in the initSnack function that is causing the problem on my end.

let nView = page.nativeViewProtected.getParent();
        if (page.hasActionBar) {
           nView = nView.getParent();
        }

the nView.getParent() part is attaching the snackbar to the wrong view.

I don't understand the page.hasActionBar part. Why do you need to first get the page parent to then get the page parent's parent?

This might be an angular specific problem because of the way the page-router-outlet wraps a route component inside a Frame and then inside a Page. But that's just a theory for now, will have to investigate this further if you don't have any other ideas?

[farfromrefug]

@johandrott I ll need to look into this to see if something changed. however it should work by supplying a view. I do.that all the time. try to pass not the page but the content of the page.

[johandrott]

@farfromrefug I am passing a view, in this specific case, it's a StackLayout. So it should attach the snackbar at the same position as in the iOS screenshot. But the issue is still the same, the content of the page gets pushed down.

[farfromrefug]

@johandrott ok i do believe you ;) Can you create a very simple test project? Possibly not in angular... If not angular is ok

[johandrott]

@farfromrefug I have created a test project in vue and this time I could easily replicate the issue. The problem occurs when a page is inside a frame.

snack.zip

  <Page actionBarHidden="true">
    <Frame>
      <Page>
        <ActionBar>
          <Label text="My actionbar" />
        </ActionBar>
        <GridLayout rows="*, auto">
          <StackLayout ref="innerView" height="500" row="0">
            <Label text="section 1"></Label>
            <Button text="Tap me" @tap="onTap"></Button>
          </StackLayout>
          <StackLayout background="grey" row="1" height="300">
            <Label text="section 2"></Label>
          </StackLayout>
        </GridLayout>
      </Page>
    </Frame>
  </Page>

[Hugo-Dlg]

Hello, I just installed Snackbar and tried to use it in angular, it works well but still have this issue. Everything goes down when the message disappears, any idea since february ?

[farfromrefug]

@Hugo-Dlg i am really sorry i dont really have time to look at this right now. either have a go at it if you want or wait for it to be fixed in the weeks to come. I think I don't see it because I never use the native action bar

[Hugo-Dlg]

No Problem, I switched on Toasty, it's similar and works well except a little issue with color on Android 11