Expo: The Swiss Army Knife of React Native (And How to Test Your App Everywhere)

[Artem Gontar]

Welcome to the wonderful world of Expo! If React Native is the engine of your app, then Expo is the entire garage — complete with tools, spare parts, and a really nice coffee machine. Today we're diving into what makes Expo magical and how to test your Purchase Tracker app on every device imaginable (including that old iPad your mom still uses).

What the Heck is Expo? ​

Think of Expo as React Native with superpowers and a really good UX team. It's a platform that makes building, deploying, and testing React Native apps feel less like rocket science and more like... well, regular science. The fun kind with fewer explosions.

Expo gives you:

• Pre-built modules (camera, notifications, etc.)
• Over-the-air updates (push fixes without app store delays)
• Easy testing (scan QR code, boom, app runs)
• Build services (build iOS apps without owning a Mac!)
• Developer tools (debugging that doesn't make you cry)

It's like having a full development team, but they never complain about the office coffee.

The Expo Ecosystem: Your New Best Friends ​

Expo CLI: The Command Center ​

Your terminal's new favorite command:

npx expo start  # Starts the development server
npx expo start --tunnel  # For when your network is being difficult
npx expo build  # Builds your app for production
npx expo publish  # Pushes updates to existing apps

Expo Go: The Magic Portal ​

This little app turns any phone into a testing device. Download it from:

• App Store (iOS)
• Google Play (Android)

Scan the QR code from your terminal, and BOOM — your app appears. It's like Uber, but for apps.

Expo SDK: The Toolbox ​

Pre-built modules for common tasks:

// Camera access
import * as ImagePicker from 'expo-image-picker';

// File system
import * as FileSystem from 'expo-file-system';

// Notifications
import * as Notifications from 'expo-notifications';

// And literally hundreds more...

Testing Environments: The Greatest Hits Tour ​

1. Web Browser: The Quick Preview ​

Best for: UI tweaks, layout testing, showing off to your cat

npm run web
# Opens http://localhost:19006

Pros:

• Instant feedback
• Easy screenshots
• DevTools access
• Works on any computer

Cons:

• No native features (camera, notifications)
• Different layout engine
• Not exactly how users will see it

2. iOS Simulator: The Apple Experience ​

Best for: iOS-specific testing, App Store screenshots

Requirements:

• macOS only (sorry, Windows folks)
• Xcode installed

npm run ios
# Or press 'i' in the Expo terminal

Pros:

• Exact iOS behavior
• Multiple device sizes
• iOS-specific testing
• Perfect for screenshots

Cons:

• Mac only
• Slower than real devices
• No real camera/sensors

3. Android Emulator: The Google Galaxy ​

Best for: Android testing, Play Store prep

Requirements:

• Android Studio
• A computer that can handle emulation (aka not a potato)

npm run android
# Or press 'a' in the Expo terminal

Pros:

• Works on any OS
• Multiple Android versions
• Various screen sizes
• Google Play services

Cons:

• Can be slow
• Resource hungry
• Setup can be tricky

4. Real Devices: The Ultimate Truth ​

Best for: Everything! Performance, real user experience, actual testing

Setup:

1. Download Expo Go
2. Connect to same WiFi as your computer
3. Scan QR code
4. Marvel at the magic

Pros:

• Real performance
• Actual camera/sensors
• True user experience
• Can test anywhere

Cons:

• Requires physical device
• Network dependent
• Limited debugging

Network Connectivity: When WiFi Gets Moody ​

Sometimes your phone and computer can't talk to each other. Here's how to fix it:

Solution 1: Tunnel Mode (The Nuclear Option)​

npx expo start --tunnel

Routes through Expo's servers. Slower but works everywhere.

Solution 2: LAN Mode (The Ideal World)​

npx expo start --lan

Uses your local network. Faster but pickier about network setup.

Solution 3: Localhost (The Fallback)​

npx expo start --localhost

Only works with simulators/emulators on the same machine.

Development Workflow: The Daily Grind ​

Here's how a typical development session looks:

# 1. Start the server
npm start

# 2. Open on your preferred platform
# Web for quick UI checks
# Real device for real testing
# Simulator for specific OS testing

# 3. Make changes
# Hot reload kicks in automatically

# 4. Test features
# Shake device for developer menu
# Console.log appears in terminal

# 5. Debug issues
# Press 'j' for debugger
# Press 'm' for developer menu

# 6. Repeat until perfect
# (or until deadline, whichever comes first)

Pro Testing Tips: Level Up Your Game ​

1. Test Early, Test Often​

Don't wait until the end to test on real devices. That's like only trying on your wedding dress on the wedding day — technically possible, but risky.

2. Use Multiple Devices​

Test on:

• Different screen sizes (phone, tablet)
• Different OS versions (iOS 14, 15, 16+)
• Different performance levels (new flagship, old budget phone)

3. Network Conditions Matter​

Test on:

• WiFi (fast and slow)
• 4G/5G mobile data
• Airplane mode (for offline functionality)

4. Real User Scenarios​

• Use the app while walking
• Test with sweaty fingers
• Try it in bright sunlight
• Test with one hand while drinking coffee

5. Performance Monitoring​

# Check bundle size
npx expo export --public-url https://expo.dev

# Monitor performance
# Use React DevTools
# Check for memory leaks
# Test on older devices

Debugging: When Things Go Wrong (Spoiler: They Will) ​

Common Issues and Fixes​

"Could not connect to server"

# Try tunnel mode
npx expo start --tunnel

# Check same WiFi network
# Restart Expo Go app
# Clear Expo cache

"Module not found"

# Clear node modules
rm -rf node_modules package-lock.json
npm install

# Clear Expo cache
npx expo start --clear

"Build failed"

# Check Expo compatibility
npx expo doctor

# Update dependencies
npx expo install --fix

Debug Tools Arsenal ​

1. Console logs appear in terminal
2. React DevTools for component inspection
3. Network tab for API debugging
4. Performance monitor for optimization
5. Expo DevTools for everything else

Testing Our Purchase Tracker: The Checklist ​

Here's what to test across all platforms:

Core Functionality​

• [ ] App launches without crashes
• [ ] Navigation works (Home, Scan, Profile tabs)
• [ ] Purchase cards display correctly
• [ ] "Take Photo" generates new purchases
• [ ] Purchase details show on tap
• [ ] Pull to refresh works

Platform-Specific​

• [ ] iOS: Proper safe areas, native feel
• [ ] Android: Back button behavior, material design
• [ ] Web: Responsive layout, keyboard navigation

Performance​

• [ ] Smooth animations
• [ ] Fast list scrolling
• [ ] Quick app startup
• [ ] Memory usage reasonable

Edge Cases​

• [ ] No internet connection
• [ ] Very long store names
• [ ] Large number of purchases
• [ ] Different screen orientations

The Future: Beyond Expo Go ​

As your app grows, you might need:

Custom Development Builds​

For when you need native modules not in Expo SDK:

npx expo run:ios
npx expo run:android

Production Builds​

For app store submissions:

npx expo build:ios
npx expo build:android

Over-the-Air Updates​

Push fixes without app store review:

npx expo publish

Why Expo Rocks for MVP Development ​

1. Speed: From idea to testing in minutes
2. Simplicity: Less config, more coding
3. Compatibility: Works everywhere out of the box
4. Community: Amazing docs and support
5. Free tier: Perfect for MVPs and side projects

Continue reading...

 

Join 𝕋𝕄𝕋 on Telegram
Channel PREVIEW: