Shift2App
Home chevron_right UI Functions
palette

UI Functions

Toast, vibration, clipboard, and status bar

Toast Messages

Show brief messages to user

shift2appjs.showToast(message)

Displays a native Android toast message at the bottom of the screen.

Parameters
message String - The message to display
Returns

void

javascript
// Simple toast
shift2appjs.showToast("Settings saved!");

// After an action
function addToCart(item) {
    cart.push(item);
    shift2appjs.showToast(item.name + " added to cart");
}

Vibration

Haptic feedback

shift2appjs.vibrate(duration)

Vibrates the device for the specified duration.

Parameters
duration Number - Duration in milliseconds
Returns

void

javascript
// Short vibration for feedback
shift2appjs.vibrate(50);

// Longer vibration for alerts
shift2appjs.vibrate(500);

// Pattern (multiple calls)
function vibratePattern() {
    shift2appjs.vibrate(100);
    setTimeout(() => shift2appjs.vibrate(100), 200);
    setTimeout(() => shift2appjs.vibrate(100), 400);
}

Clipboard

Copy text to clipboard

shift2appjs.copyToClipboard(text)

Copies text to the device clipboard.

Parameters
text String - Text to copy
Returns

void

javascript
// Copy referral code
function copyReferralCode() {
    const code = "REF123ABC";
    shift2appjs.copyToClipboard(code);
    shift2appjs.showToast("Code copied!");
}

// Copy current URL
function sharePageLink() {
    shift2appjs.copyToClipboard(window.location.href);
    shift2appjs.showToast("Link copied to clipboard");
}
shift2appjs.getClipboard()

Gets text from the device clipboard.

Returns

String - Clipboard contents

javascript
// Paste from clipboard
function pasteCode() {
    const text = shift2appjs.getClipboard();
    document.getElementById("codeInput").value = text;
}

Status Bar

Customize status bar appearance

shift2appjs.setStatusBarColor(color)

Changes the status bar background color.

Parameters
color String - Hex color code (e.g., "#FF5722")
Returns

void

javascript
// Match page theme
shift2appjs.setStatusBarColor("#1a1a2e");

// Change based on scroll
window.addEventListener("scroll", () => {
    if (window.scrollY > 100) {
        shift2appjs.setStatusBarColor("#ffffff");
    } else {
        shift2appjs.setStatusBarColor("#000000");
    }
});
dashboard Dashboard menu_book Docs science Playground