Building a Real Camera App With Warp + CodeRabbit + Expo MCP | Code with Beto

Learn how to build a mobile camera application in React Native and Expo that looks great and follows best practices. Instead of coding everything manually, we use Warp, an agentic development environment that lets you generate, edit, and review code from natural language prompts.

Along the way, we integrate Expo MCP to fetch the latest SDK documentation and use the CodeRabbit CLI to review and improve our code automatically after every change. This workflow speeds up development while maintaining high code quality and learning best practices.

What's inside

Introduction to Warp as an agentic development environment
Installing and setting up Warp and CodeRabbit CLI
Creating a new Expo app project with Warp
Adding Expo MCP for up-to-date SDK documentation
Using Warp to explore and install Expo Camera
Managing permissions and configuration for camera access
Navigating and editing the project with Warp's UI and shortcuts
Benefits of CodeRabbit for automated code reviews and improvements

Introduction to Warp as an agentic development environment

Warp is not a traditional terminal or IDE. It is a native application designed for prompt-driven coding with AI agents. Instead of juggling windows and tabs, Warp offers a clean interface optimized for generating and reviewing code from natural language commands.

Warp is already used by over 700,000 engineers, including many top companies. It supports multi-agent workflows, letting you run multiple AI assistants simultaneously. This approach improves speed and reliability, helping you build production-ready apps faster.

Installing and setting up Warp and CodeRabbit CLI

To get started, you download Warp as a native app or install it via Homebrew. Once installed, you also install the CodeRabbit CLI inside Warp by running a simple command. CodeRabbit acts as a second set of eyes, reviewing your code after every major change or refactor.

CodeRabbit helps spot potential issues, suggest fixes, and teach good coding patterns you might not know. This integration ensures your code quality stays high before committing changes.

Creating a new Expo app project with Warp

Inside Warp, you navigate to your apps folder using natural language commands like "go to my apps folder." Warp detects your intent and opens the folder automatically.

You then run to scaffold a new Expo project. Warp detects the project type and SDK version, and offers to optimize for the codebase by indexing files and generating helpful markdown for faster command suggestions.

This setup includes Expo Router with tabs and dark mode support out of the box.

Adding Expo MCP for up-to-date SDK documentation

Expo MCP is a tool that provides the latest SDK documentation directly inside Warp. You add the MCP server URL from your Expo account (requires an EAS paid subscription) into Warp's configuration.

Once connected and authenticated, Warp can fetch the newest docs for any Expo module, ensuring your AI agents always have accurate and current information while coding.

If you don’t have a paid EAS account, you can still copy documentation links manually for Warp to use.

Using Warp to explore and install Expo Camera

With Expo MCP enabled, you ask Warp to "learn expo camera." Warp fetches the latest documentation about the Expo Camera module, including features like flash, zoom, and camera types.

You then open a new Warp tab and run "install expo camera." Warp uses the MCP to install the package and automatically adds necessary plugins and permissions to your app configuration.

This seamless integration means you don’t have to manually search or configure dependencies.

Managing permissions and configuration for camera access

Warp highlights that using the camera requires specific permissions in your app.json or app.config.js. It shows you exactly what permissions to add and lets you insert them directly from the interface.

This step is crucial for the app to access the device camera on iOS and Android.

Navigating and editing the project with Warp's UI and shortcuts

Warp offers a file explorer and powerful keyboard shortcuts like Shift+Cmd+E to open the explorer and Cmd+Backslash to toggle sidebars.

You can quickly open files like package.json, inspect the project structure, and edit code inline. Warp’s clean UI and agentic features help you stay focused and productive.

Benefits of CodeRabbit for automated code reviews and improvements

After every major code change, CodeRabbit reviews your code automatically. It spots issues, suggests improvements, and can apply fixes before you commit.

This feedback loop helps you learn better coding practices and maintain high-quality code without extra effort. It’s like having a mentor baked into your workflow.

Resources

CourseReact Native course

Master React Native fundamentals and build production apps with lifetime access.

Premium resourcePro membership

Get access to exclusive tools like CodeRabbit and Warp integrations.

Let's connect!