Material Design Snackbar for Android and IOS … and Mendix!
Last year, I published an article called Easy Toast Notifications with Mendix Native Mobile Android Application that demonstrates an easy way to show ephemeral messages to the user: the “Toast” messages. Another possibility is to use the so-called SnackBars. In this article, I’ll show you a procedure for using this approach on a Mendix-made Native Mobile application. For Android and IOS!
Environment
- Studio Pro 9.24.29 LTS
- Eclipse Adoptium jdk-11.0.16.101-hotspot
- Node.JS v20.17.0
- Windows 11 Pro 24H2
Procedure
[ 1 ] In Studio Pro, create a new project using the Blank Native Mobile App template.
[ 2 ] The goal is to use an NPM package called react-native-snackbar to show brief messages to the user. This package was created based on the M2 Material Guidelines.
[ 3 ] We don’t need to create a Mendix custom widget for this goal. The Snackbar code allows a direct call to the method that shows the message.
Snackbar.show({
text: 'Hello world',
duration: Snackbar.LENGTH_SHORT,
});
[ 4 ] I personally prefer to avoid creating custom widgets since it requires an additional effort to keep the custom widget code in sync with the subjacent NPM package. In addition, the standard solution described in the previous article also is not ideal, as it’s not easily portable and/or reusable (besides requiring extra preparation effort — NPEs, Microflows, Containers, Visibility control). Therefore, it’s a huge plus for me just be able to call the code to show the message.
[ 5 ] Let’s write a JavaScript action that is responsible for the code to call the react-native-snackbar
package’s method to show the message:
import "mx-global";
import { Big } from "big.js";
import Snackbar from 'react-native-snackbar';
// BEGIN EXTRA CODE
// END EXTRA CODE
/**
* @param {string} message
* @returns {Promise.<void>}
*/
export async function JSA_ShowSnackBar(message) {
// BEGIN USER CODE
Snackbar.show({
text: message,
duration: Snackbar.LENGTH_SHORT,
marginBottom: 50,
});
// END USER CODE
}
Notice that this JavaScript action was defined with the message
parameter:
The code calls the Snackbar.show
method with some basic parameters.
[ 6 ] The package react-native-snackbar
must be installed so that the JavaScript action code can run properly. Open a PowerShell terminal on <your-project-name>\javascriptsource\nativemobile\actions
folder and run the command below:
npm i react-native-snackbar@2.6.2
This will install the required node dependencies. Surprisingly, it takes only 204KB of your disk 🤣!
Observe that we are installing version 2.6.2 specifically (released 2 years ago). In my tests, the most recent version 2.8.0 did not compile.
[ 7 ] Now create a Nanoflow ACT_ShowSnackBar that calls this JavaScript Action.
[ 8 ] And finally call the Nanoflow created in Step 4 in your Native Home Screen. The result will be like this:
[ 9 ] In addition, it’s possible to configure an action button with the message, so that the user has a chance to accept or reject the action (if that is the case). For that, we must create another JavaScript action called JSA_ShowSnackBarWithAction with the parameters as shown below:
import "mx-global";
import { Big } from "big.js";
import Snackbar from 'react-native-snackbar';
// BEGIN EXTRA CODE
// END EXTRA CODE
/**
* @param {string} message
* @param {Nanoflow} action_callback
* @param {string} action_text
* @param {string} action_color
* @returns {Promise.<void>}
*/
export async function JSA_ShowSnackBarWithAction(message, action_callback, action_text, action_color) {
// BEGIN USER CODE
Snackbar.show({
text: message,
duration: Snackbar.LENGTH_INDEFINITE,
action: {
text: action_text,
textColor: action_color,
onPress: async () => {
await action_callback();
},
},
});
// END USER CODE
}
The action button is bound to the Nanoflow passed as a parameter. This is fantastic, allowing great flexibility when implementing the functionalities.
[ 10 ] If we use this JavaScript action in a Nanoflow and call this Nanoflow our Native Home Screen. The result will be like this:
[ 11 ] And on top of that, this implementation also works on IOS (at least on the IOS simulator provided by XCode)
Comments and Conclusions
With a little effort in searching, we can find the solutions required to implement the features we are asked for. This library package proved to be very useful since it has a lot of additional configurations.
However, would be perfect if this kind of feature would be provided by the ReactNative Framework by itself. If we have this feature for Android, why don't we have it for IOS?
Relying on official framework implementations strengthens the project governance and reduces fragmentation (using plenty of 3rd party code).