Chapter 2: The Expo Ecosystem¶
Now that we’ve explored why mobile development feels different from the web and how React Native bridges JavaScript with native UI, it’s time to look closely at Expo. For many developers, Expo is the real gateway into the mobile world. It removes much of the friction of setting up iOS and Android environments and provides an ecosystem of tools, services, and SDKs that accelerate development. In this chapter, we’ll explore the Expo SDK, understand the role of Metro bundler, and clarify the differences between Expo Go, Dev Client, and Production builds.
Expo SDK and Prebuilt Modules¶
What is the Expo SDK?¶
The Expo SDK is a curated set of prebuilt modules that handle common mobile needs—camera access, image picking, push notifications, location tracking, secure storage, sensors, haptics, and more. Instead of manually linking native dependencies or writing Objective-C/Java code, developers can simply install and import these modules.
Example:
```tsx
import * as ImagePicker from 'expo-image-picker';
const result = await ImagePicker.launchCameraAsync({ mediaTypes: ImagePicker.MediaTypeOptions.Images, allowsEditing: true, }); ````
This single call abstracts away the complexity of interacting with native camera APIs. The Expo SDK is especially powerful for rapid prototyping, where speed of iteration matters more than fine-grained customization.
Benefits of the SDK¶
- Consistency – Works across iOS and Android without needing two separate implementations.
- Faster Development – Common features like notifications or permissions are a single import away.
- Community Trust – Maintained and tested by Expo, reducing the chances of version conflicts.
Metro Bundler Explained¶
What is Metro?¶
Under the hood, React Native apps (Expo or not) are powered by Metro, a JavaScript bundler. Metro watches your files, compiles modern JavaScript/TypeScript, and sends updates to your app in real time. It’s what makes features like Fast Refresh possible.
Think of Metro as the “Webpack of React Native,” optimized for mobile. It serves code over a development server (often at localhost:8081
), which your device or simulator connects to.
Developer Workflow with Metro¶
- Change your code → Metro recompiles.
- Metro pushes the update to your app without a full rebuild.
- Errors appear instantly in red error screens, helping you debug faster.
Without Metro, iteration in mobile would be painfully slow—rebuilding and reinstalling the app for every change.
Expo Go vs. Dev Client vs. Production¶
One of the most common questions new developers face: “Should I run this in Expo Go, build a Dev Client, or create a Production build?” Each has its role.
Expo Go¶
- What it is: A sandbox app (downloadable from App Store/Play Store) that runs your project via QR code.
- Best for: Early development, prototyping, or demoing apps quickly.
- Limitations: Can only use Expo SDK modules; custom native code isn’t supported.
Dev Client¶
- What it is: A custom build of your app with the Expo runtime, plus any extra native modules you need.
- Best for: Testing features not available in Expo Go (e.g., third-party native packages).
- Setup: Built using EAS Build and installed on your device.
Production Build¶
- What it is: The final packaged app submitted to the App Store or Play Store.
- Best for: Distributing apps to real users.
- Differences: No debugging overlays, optimized for performance, and bundled with release keys.
Conclusion: Choosing the Right Tool¶
Expo isn’t just a convenience layer—it’s an ecosystem designed to streamline your journey from idea to production-ready app. The SDK modules let you move quickly, Metro powers your development feedback loop, and the choice between Expo Go, Dev Client, and Production builds ensures you always have the right tool for the stage of development you’re in.
With this understanding of Expo’s ecosystem, you’re now ready to scaffold your very first React Native project in Part II, starting with create-expo-app
.