Cannot show simple toast in Ionic


#1

I’ve followed all of the steps in the docs (https://ionicframework.com/docs/native/toast/), and I just get an error when this.toast.show(...) is called. What other hoops do I need to jump through to get this working?

undefined is not an object (evaluating 'this.toast.show')

I also ran ionic doctor check and it updated my plugins and app-scripts, and it still gets the same error.


#2

What is your ionic info output?
What is all the code you have to implement the plugin and show a toast?


#3
$ionic info

cli packages: (/usr/local/lib/node_modules)

    @ionic/cli-utils  : 1.19.0
    ionic (Ionic CLI) : 3.19.0

global packages:

    cordova (Cordova CLI) : 7.1.0 

local packages:

    @ionic/app-scripts : 3.1.2
    Cordova Platforms  : browser 5.0.1 ios 4.5.4
    Ionic Framework    : ionic-angular 3.9.2

System:

    ios-deploy : 1.9.2 
    ios-sim    : 5.0.13 
    Node       : v8.9.1
    npm        : 5.5.1 
    OS         : macOS High Sierra
    Xcode      : Xcode 9.1 Build version 9B55 

Environment Variables:

    ANDROID_HOME : not set

Misc:

    backend : pro

#4
import {Toast} from "@ionic-native/toast";
...
constructor(
        public toast: Toast
    ) {
}
...
this.toast.show(`${timer.act.title} completed`, '10000', 'center').subscribe(
                            toast => {
                                console.log(toast);
                            }
                        );

#5

That part?


#6

Yes, I have everything from the Toast page, this is in app.module.ts:

import { Toast } from '@ionic-native/toast';
...

    providers: [
        StatusBar,
        SplashScreen,
        {provide: ErrorHandler, useClass: IonicErrorHandler},
        Toast
    ]

#7

Thanks so much for looking into it! I’ve used toast in other tutorial projects, but can’t get this project to work.


#8

I also cannot get the native NativeAudio plugin to work. I figured I would get the simpler Toast plugin working first, and see if the same solution applies to that.


#9
$ionic cordova plugin list
> cordova plugin ls
cordova-plugin-device 1.1.4 "Device"
cordova-plugin-ionic-webview 1.1.16 "cordova-plugin-ionic-webview"
cordova-plugin-nativeaudio 3.0.9 "Cordova Native Audio"
cordova-plugin-nativestorage 2.2.2 "NativeStorage"
cordova-plugin-splashscreen 4.0.3 "Splashscreen"
cordova-plugin-statusbar 2.3.1-dev "StatusBar"
cordova-plugin-whitelist 1.3.1 "Whitelist"
cordova-plugin-x-toast 2.6.0 "Toast"
ionic-plugin-keyboard 2.2.1 "Keyboard"

#10

Can you post the code you are using? I made a quick sample app to test and it’s working pretty good.


#11

Not sure why I didn’t catch this before. It was a scope/closure issue. I was trying to use this.toast in an interval function where it wasn’t available. So I am now passing in the toast like this:

this.interval = setInterval(this.countdown, 1000, this.activeTimers, this.toast);

Is there another, better way to do this?


#12

I found the right way to do this here: