Useful Titanium+Alloy widget to handle notifications messages when app is in foreground.
Latest commit fe76c4f Nov 23, 2016 @kopiro kopiro committed on GitHub Merge pull request #24 from HazemKhaled/patch-1
New version




Alloy Titanium widget to display an in-app notification.

The widget is a tiny view that comes from the top with a simple animation.


Cross Platform?

On iOS7+, the animation is managed by Ti.UI.iOS.Animator physics engine (Tweetbot style).


Via Gittio

gittio install com.caffeinalab.titanium.notifications

Via Github

Download the latest release and add in your config.json, under dependencies:

"dependencies": {
    "com.caffeinalab.titanium.notifications": "*"


var Notifier = Alloy.createWidget('com.caffeinalab.titanium.notifications', /* options */);

The Options


    message: 'Notification Test', // the message to display.

    duration: 2000, // time after go away. Valid for iOS7+ and Android
    icon: '/appicon.png', // icon to display on the left

    style: 'info', // 'info', 'success', 'error', 'warn',  notification background blue, green, red or amber.

    elasticity: 0.5, // iOS7+ only
    pushForce: 30, // iOS7+ only
    usePhysicsEngine: true, // disable if you don't want on iOS7+

    animationDuration: 200, // animation sliding duration



// Show the widget setting the title'Hello, world!');

// Show the widget, and override defaults{
    message: 'Notification Test',
    icon: '/appicon.png',
    pushForce: 10,
    style: 'info', // sets the message background to blue (50% opacity)
    duration: 2500,
    onClick: function(){ alert("OH, you clicked me!\nDo you think I'm weird?"); }

// Update the notification text. Useful for loading %
Notifier.setMessage('I updated the notifcation message!');

// Update the notification style. Useful for error and success messages

// Update the icon to a new one

// Hide

Loading Notification Example (With styling)

var Notifier = Alloy.createWidget('com.caffeinalab.titanium.notifications', { duration: null });'Loading');

// 50MB test file from thinkbroadband to simulate a slow load.
var url = "";
var client = Ti.Network.createHTTPClient({
    // function called when the response data is available
    onload : function(e) {
        Notifier.setMessage('Successful Download!');
        setTimeout(Notifier.hide, 3000);
        // function called at regular intervals as the request data is being received.
        ondatastream : function(e) {
            Notifier.setMessage('Loading ' + Math.round(e.progress.toFixed(2)*100) + '%');
        // function called when an error occurs, including a timeout
        onerror : function(e) {
            Notifier.setMessage('Error, Please try again.');
            setTimeout(Notifier.hide, 3000);
        timeout: 5000
});"GET", url);

Fully stylable via TSS

Override this options in your app.tss.

    "top": 0,
    "backgroundColor": "#A000",
    "height": 65,
    "touchEnabled": false
    "left": 8,
    "height": 42
    "touchEnabled": false,
    "left": 60,
    "right": 10,
    "height": 60,
    "color": "#fff",
    "textAlign": "left",
    "font": {
        "fontSize": 14

Work with Android or iOS modal Windows

On Android is not possible to make it work with Windows.

On iOS, with modal Windows, in not possible to open a non-modal window in front of another modal window.

So, to make it work with theese two cases, use the view property on open:{
    view: /* Your Window/View */


How to get involved:

  1. Star the project!
  2. Answer questions that come through GitHub issues
  3. Report a bug that you find

Pull requests are highly appreciated.

Solve a problem. Features are great, but even better is cleaning-up and fixing issues in the code that you discover.

Copyright and license

Copyright 2015 Caffeina srl under the MIT license.