Easy Toast Notifications with Mendix Native Mobile Android Application
For those of you developing native mobile Android apps in Mendix who need to show toast notifications, I have good news! React Native has an API called ToastAndroid that we can use to show ephemeral messages in your app.
There are situations when it’s required to show ephemeral messages to the user. These messages are short-lived, since a few seconds after they automatically disappear. Mendix doesn’t provide us with an out-of-the-box solution for this requirement. Fortunately, we can use a simple JavaScript action to call an API called ToastAndroid to help us.
EDIT 2024/12/07: See Also Material Design Snackbar for Android and IOS … and Mendix!
Introduction
It’s a simple requirement: you need to display a message for a few seconds and then it disappears automatically. How can we tackle this requirement? Let me show you two possible solutions: the standard and the ‘easy’ solution.
Standard Solution
We could use a standard Mendix container with absolute positioning, some custom styling classes to mimic the toast’s usual appearance, the Wait JScriptAction, and surround this container with a DataView connected to a non-persistent entity (NPE). This NPE must have, besides the message attribute, a boolean indicating its visibility.
The images are self-explanatory. It’s relatively easy, right? A missing piece of this solution is the custom JScript Style class (defined in main.js) to be applied in the message container:
export const containerToast = {
container: {
position: "absolute",
bottom: 16,
paddingHorizontal: 25,
alignSelf: "center",
height: 45,
borderRadius: 50,
justifyContent: "center",
backgroundColor: "#535353",
opacity: 0.9,
zIndex: 999999,
},
};
This container also has its visibility controlled by the Isvisible boolean attribute. You can see the result below.
Not bad, huh?! The big advantage of this solution is that works fine on both Android and IOS. Oppositely, the disadvantage is that you have to use an NPE helper just to control the visibility of the Toast, which in turn pollutes the page where the message needs to be shown. In a complex project, this can be cumbersome.
Easy Solution
The above solution is fine and generic, but in my opinion, showing a Toast should be as easy as calling a Show message activity. Looking for a solution using this approach, I’ve made a little research on the React Native API. That’s when I found the ToastAndroid API!
// JScript Action Show toast code
import "mx-global";
import { Big } from "big.js";
import {ToastAndroid} from 'react-native';
// BEGIN EXTRA CODE
// END EXTRA CODE
/**
* @param {string} message
* @returns {Promise.<void>}
*/
export async function ShowToast(message) {
// BEGIN USER CODE
ToastAndroid.showWithGravity(
message,
ToastAndroid.LONG,
ToastAndroid.BOTTOM,
);
// END USER CODE
}Worth mentioning that you don’t need any extra steps to use ToastAndroid API. It’s available in the react-native import. The result can be shown below:
The advantage of this approach is that your Domain Model is not flooded with NPE Helpers, since it’s possible to call the Toast directly as you can do with the Show message activity. The big disadvantage is that this solution only works on Android.
Conclusion
As you can see, the results are very similar. It’s up to you to judge which solution is more suitable to your requirements.
Searching for alternatives on IOS, found this package:
Haven’t tried it yet, but it seems easy to use following the same approach, though the visual is a little different.
That’s it! Go Make It!
