React Native & Expo

Introduction

Building mobile apps used to mean learning two completely different languages and maintaining two separate codebases—one for iOS (Swift/Objective-C) and one for Android (Kotlin/Java). React Native changed everything.

With React Native, you write your app once in JavaScript and React, and it runs natively on both platforms. Add Expo to the mix, and you've got a development experience that's fast, enjoyable, and surprisingly powerful. No Xcode headaches. No Android Studio configuration nightmares. Just code, save, and see your changes instantly.

Whether you're a web developer looking to break into mobile, or a startup founder who needs to ship fast, this guide will get you up and running.

---

Why React Native?

Let's be honest—there are plenty of cross-platform options out there. So why choose React Native?

The compelling reasons:

• One codebase, two platforms — Write once, deploy to iOS and Android
• True native performance — Not a webview; your app uses real native components
• Hot Reload — See changes instantly without rebuilding
• Massive ecosystem — Leverage the entire JavaScript/npm universe
• Strong job market — Companies love the efficiency of React Native teams

Build once, ship everywhere. That's not just a tagline—it's how thousands of apps in the App Store and Play Store were built.

Who's using it? Facebook, Instagram, Discord, Shopify, and countless startups ship React Native apps to millions of users daily.

---

What is Expo?

If React Native is the engine, Expo is the luxury upgrade package. It handles all the annoying parts of mobile development so you can focus on what matters: building your app.

What Expo gives you:

• Zero native setup — No need to install Xcode or Android Studio to get started
• Instant testing — Scan a QR code and run your app on any device
• Over-the-Air updates — Push bug fixes without app store review
• Rich SDK — Camera, maps, notifications, sensors—all pre-configured
• EAS Build — Cloud builds for when you need custom native code

Think of Expo as the difference between assembling IKEA furniture yourself versus having it delivered fully assembled. Same end result, dramatically different experience.

---

Key Expo Features

Expo Go

Download the Expo Go app on your phone, scan a QR code, and your app appears. No cables, no provisioning profiles, no waiting. It's almost magical.

Over-the-Air Updates

Found a typo in production? Fixed a bug? With Expo's OTA updates, you can push changes directly to users' devices—no app store submission required.

Managed vs Bare Workflow

• Managed — Expo handles everything. Perfect for most apps.
• Bare — Full access to native code when you need it. Eject when ready.

Built-in Modules

Expo includes production-ready APIs for:

• 📷 Camera and image picker
• 📍 Location and maps
• 🔔 Push notifications
• 🔐 Secure storage and authentication
• 📱 Device sensors (accelerometer, gyroscope)
• 🎵 Audio and video playback

---

Getting Started

Ready to build? Let's create your first app in under 5 minutes.

Create Your Project

npx create-expo-app@latest my-awesome-app
cd my-awesome-app
npx expo start

That's it. Seriously.

Run Your App

You have options:

• Your phone — Scan the QR code with Expo Go
• iOS Simulator — Press i in the terminal (Mac only)
• Android Emulator — Press a in the terminal
• Web browser — Press w for a quick preview

---

Your First Component

React Native components look familiar if you know React, with a few mobile-specific differences.

import { View, Text, StyleSheet } from 'react-native';

export default function WelcomeScreen() {
  return (
    <View style={styles.container}>
      <Text style={styles.title}>Hello, React Native!</Text>
      <Text style={styles.subtitle}>
        Your cross-platform journey starts here.
      </Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#f5f5f5',
  },
  title: {
    fontSize: 28,
    fontWeight: 'bold',
    marginBottom: 10,
  },
  subtitle: {
    fontSize: 16,
    color: '#666',
  },
});

Key differences from web React:

• No HTML elements — use View, Text, Image instead
• No CSS files — use StyleSheet.create() or inline styles
• Flexbox is the default layout (and it's column-first)
• onClick becomes onPress

---

Expo vs Bare React Native

Choosing between Managed Expo and Bare React Native? Here's a practical guide:

Choose Expo Managed When:

• ✅ You're building an MVP or prototype
• ✅ Your app uses standard features (camera, auth, payments)
• ✅ You want the fastest development experience
• ✅ You don't need custom native modules
• ✅ OTA updates are important to you

Choose Bare Workflow When:

• ✅ You need custom native code (Bluetooth, specific SDKs)
• ✅ You're integrating with existing native apps
• ✅ Performance is absolutely critical
• ✅ You need fine-grained control over the build process

Pro tip: Start with Expo Managed. You can always eject later if needed—but you rarely will.

---

Why JavaScript for Mobile?

Some developers scoff at JavaScript for mobile. Here's why they're wrong:

The advantages are real:

• Familiar territory — If you know web development, you're 70% there
• Shared code — Use the same business logic on web and mobile
• Rich ecosystem — Need a date picker? There are 50 options on npm
• Fast hiring — JavaScript developers are everywhere
• Rapid iteration — Ship features in days, not weeks

But what about performance? React Native uses a bridge to communicate with native components, and for 95% of apps, you'll never notice a difference. The apps that need pure native performance (complex games, heavy video editing) should probably be native anyway.

---

Best Practices

Build apps that your users will love:

Code Organization

• Keep components small and focused — One component, one responsibility
• Use TypeScript — Catch bugs before they reach your users
• Separate concerns — Business logic in hooks, UI in components

Performance

• Avoid unnecessary re-renders — Use React.memo() and useCallback
• Optimize images — Use proper formats and sizes
• Lazy load screens — Don't load what users don't see

User Experience

• Follow platform conventions — iOS users expect iOS patterns
• Handle loading states — Show skeletons, not spinners
• Support offline usage — Cache data when possible
• Test on real devices — Simulators lie sometimes

---

Conclusion

React Native and Expo have democratized mobile development. What once required separate teams and codebases can now be accomplished by a single developer with JavaScript skills.

Is it perfect? No. You'll occasionally hit edge cases where native would be easier. But for the vast majority of apps—from MVPs to apps serving millions—React Native delivers.

Your roadmap:

1. Set up Expo and build the tutorial app
2. Learn the core components: View, Text, Image, ScrollView, FlatList
3. Master navigation with React Navigation
4. Add state management (Context API is usually enough)
5. Ship something! The best learning happens in production.

The mobile market is massive, and now you have the tools to be part of it. What will you build?