📅 Day 3
🛠️ tool

Quick Push & SnapAI

Learn how to use Quick Push & SnapAI to build your app faster

App IconsPush Notifications

Welcome to Day 3 of the React Native Advent Calendar!

Today we’re taking a break from coding to explore two amazing developer tools that will speed up your workflow: Quick Push for testing push notifications and SnapAI for generating app icons with AI. Plus, we’ll cover the exciting new Liquid Glass icons support in Expo SDK 54!

Quick Push: Test Push Notifications from Your Menu Bar

Testing push notifications during development can be a tedious process - switching between your code editor, Expo dashboard, and testing devices. Quick Push from Beto Moedano solves this by putting notification testing right in your macOS menu bar.

What is Quick Push?

Quick Push is a lightweight macOS menu bar utility that lets you send test push notifications to your Expo apps instantly. No more navigating to the Expo dashboard or writing test scripts - just click the menu bar icon and send notifications on the fly.

Key Features

  • Menu Bar Integration: Quick access to notification testing without leaving your workflow
  • Configurable Payloads: Customize notification title, body, data, and platform-specific options
  • Advanced Settings: Configure sound, badge counts, priority, and more
  • Multiple Apps: Switch between different Expo projects easily
  • Instant Testing: Send notifications with a single click

How to Use Quick Push

  1. Download: Get the latest release from GitHub Releases
  2. Install: Extract the QuickPush.zip and move the app to your Applications folder
  3. Configure: Add your Expo project’s push token
  4. Test: Send notifications directly from the menu bar!

Why it’s awesome:

Testing push notifications used to mean opening your browser, navigating to the Expo dashboard, filling out forms, and clicking send. With Quick Push, you can test notification flows in seconds while developing features like notification handlers, deep linking, or badge updates.

Pro tip: Keep Quick Push running while developing notification features - you’ll save countless minutes every development session!

SnapAI: Generate App Icons with AI

Creating app icons is often an afterthought, but with SnapAI, you can generate professional-looking icons in seconds using AI. No more placeholder icons or paying designers for quick mockups!

What is SnapAI?

SnapAI is a command-line tool that leverages OpenAI’s image generation models (DALL-E 3, DALL-E 2, and GPT-Image-1) to create stunning app icons from text descriptions. It’s built specifically for React Native and Expo developers, generating icons in the exact sizes you need.

Key Features

  • Lightning Fast: Generate icons in seconds from text prompts
  • Multiple AI Models: Choose between GPT-Image-1 (default), DALL-E 3, or DALL-E 2
  • Flexible Sizes: From 256x256 to 1792x1024 pixels
  • 14 Style Presets: Minimalism, glassy, neon, pixel art, Material Design, and more
  • Multiple Formats: PNG, JPEG, or WebP output
  • Privacy First: API keys stay local on your machine
  • Affordable: Just ~$0.04 per icon using OpenAI’s API

How to Use SnapAI

terminal 
# Install globally
npm install -g snapai

# Or use without installing
npx snapai

# Generate an icon
snapai "A blue rocket ship on a gradient background"

# Specify style and size
snapai "Coffee cup with steam" --style minimalism --size 1024x1024

# Use specific model
snapai "Mountain landscape" --model dall-e-3

Requirements:

Pro tip: Start with the glassy style for iOS apps and material for Android apps to match platform aesthetics. The quality is surprisingly good for quick mockups!

Bonus: Liquid Glass Icons in Expo SDK 54

Speaking of icons, Expo SDK 54 brings support for iOS 26’s stunning Liquid Glass icons! These are the beautiful, depth-filled icons you see in iOS 26 that respond to device orientation and lighting.

What are Liquid Glass Icons?

Liquid Glass icons are Apple’s new icon format that creates a 3D depth effect with dynamic reflections and lighting. They’re created using Apple’s Icon Composer app and provide an incredibly premium look for your app.

How to Use Liquid Glass Icons

  1. Create Icon: Use Apple’s Icon Composer app (macOS only) to create a .icon file
  2. Add to Project: Reference the icon in your app.json:
app.json 
{
	"expo": {
		"ios": {
			"icon": "./assets/icon.icon"
		}
	}
}

Key Benefits

  • Automatic Fallback: Apps using Liquid Glass icons automatically fall back to standard icons on iOS 19 and earlier
  • Premium Look: Gives your app a cutting-edge, premium appearance
  • System Integration: Icons automatically respond to device orientation and lighting

Important Note: The Icon Composer app is macOS-only. However, the output is straightforward JSON, and community tools may emerge to help create these icons on other platforms.

Wrapping Up

That’s it for Day 3 of the React Native Advent Calendar!

What to explore next:

  • Download Quick Push if you work with push notifications
  • Try SnapAI for your next app icon

Which tool are you most excited to try? Let me know on Twitter!

Tomorrow we’ll dive into Day 4’s topic - see you then! 🎄