This tutorial shows how to use JavaScript to implement toast notifications in Mendix Native apps. Toasts are perfect for showing success, warning, or error messages in a sleek, non-intrusive way.

Right Click on ToastNotification module -> Add Other -> JavaScript Action & give the name JS_ToastNotification.

Open JS_ToastNotification Under Settings -> General tab add one String parameter(message).

Go to the Code tab and paste the following code with the same structure.

// This file was generated by Mendix Studio Pro.

//

// WARNING: Only the following code will be retained when actions are regenerated:

// - the import list

// - the code between BEGIN USER CODE and END USER CODE

// - the code between BEGIN EXTRA CODE and END EXTRA CODE

// Other code you write will be lost the next time you deploy the project.

import "mx-global";

import { Big } from "big.js";

import { Platform, ToastAndroid,Alert } from "react-native";

// BEGIN EXTRA CODE

// END EXTRA CODE

/**

* @param {string} message

* @returns {Promise.<void>}

*/

export async function JS_ToastNotification(message) {

   // BEGIN USER CODE

   if(Platform.OS==='ios'){

       Alert.alert("Notification", message);

   }else{

       ToastAndroid.showWithGravity(

     message,

     ToastAndroid.LONG,

     ToastAndroid.BOTTOM

   );

   }

   // END USER CODE

}

Go to Toast page -> Take a Button & give the name Show Toast By JS.

Double click on Show Toast By JS button -> In onClick events select call a nanoflow & create a new nanoflow(ACT_ShowToastByJS).

Open ACT_ShowToastByJS nanoflow

Take a JavaScript Action activity -> select previously created JS_ToastNotification & set value Message.

Now run the application & test it.

I hope this article has helped you understand How to Show Toast Notification By JS In Mendix Native App.

Thanks for reading this! See you in the next blog post.