How to build a fully functional mobile app with Replay AI and Expo in 2026: step-by-step

TL;DR: This guide walks you through building a fully functional mobile app using Replay AI and Expo, leveraging video analysis to generate code and accelerate development.

The year is 2026. Screenshot-to-code is ancient history. We're building UIs from video. Why? Because video captures user intent, something static images can't. Replay, powered by Gemini, lets you record your desired app behavior and instantly generate working React Native code with Expo. Let's dive in.

Understanding Behavior-Driven Reconstruction#

Traditional UI development often starts with wireframes or mockups. These are static representations that require manual translation into code. This process is time-consuming and prone to misinterpretations of the intended user experience. Replay flips this paradigm. By analyzing video recordings of user interactions, Replay understands the behavior you want to implement. This "Behavior-Driven Reconstruction" results in code that more accurately reflects the intended functionality and user flow.

Why Video Matters#

Video provides a wealth of information beyond static visuals:

• •Gestures and Interactions: Taps, swipes, scrolls – Replay interprets these actions.
• •Timing and Sequencing: The order of operations is crucial for understanding workflows.
• •State Transitions: How the UI changes in response to user actions.

This rich data allows Replay to generate more complete and functional code than screenshot-based tools.

Setting Up Your Environment#

Before we start recording and generating, let's set up our development environment. We'll be using Expo, a popular framework for building React Native apps.

Step 1: Install Expo CLI#

First, install the Expo command-line interface globally:

bash
npm install -g expo-cli

Step 2: Create a New Expo Project#

Create a new Expo project using the

command. Choose a blank template for a clean starting point:

bash
expo init MyReplayApp
cd MyReplayApp

Step 3: Start the Expo Development Server#

Start the Expo development server:

bash
expo start

This will open the Expo DevTools in your browser, allowing you to run the app on a simulator/emulator or a physical device.

Recording Your App Behavior#

Now comes the exciting part: recording the behavior you want Replay to translate into code.

Step 1: Plan Your User Flow#

Decide on a simple user flow for your app. For this example, let's create a basic "To-Do List" app where users can:

1. •Add a new task.
2. •Mark a task as complete.
3. •Delete a task.

Step 2: Record Your Screen#

Use your phone's built-in screen recording feature (or a third-party app) to record yourself interacting with a similar app or even a hand-drawn mockup. The key is to clearly demonstrate the desired behavior. Speak aloud what you are doing to help Replay understand the context. For example, say "Add new task," then type "Grocery Shopping," then tap the "Add" button.

💡 Pro Tip: Keep your recordings short and focused on a single user flow. This will improve the accuracy and speed of code generation.

Step 3: Upload Your Recording to Replay#

Navigate to the Replay platform (https://replay.build) and upload your screen recording. Replay will automatically analyze the video and begin generating code.

Generating Code with Replay#

Replay uses its AI engine to analyze your video and generate React Native code. Here's what you can expect:

Automatic Code Generation#

Replay analyzes the video and generates React Native components, including:

• •UI elements (buttons, text inputs, lists).
• •Event handlers (button presses, text input changes).
• •State management (managing the list of to-do items).
• •Navigation (if your video includes multi-page navigation).

Multi-Page Generation#

Replay excels at understanding application flow. If your video demonstrates navigation between multiple screens, Replay will generate the necessary React Navigation code.

Supabase Integration (Optional)#

If you want to persist your data, Replay can automatically integrate with Supabase. Simply provide your Supabase credentials, and Replay will generate the code to read and write data to your database.

Style Injection#

Replay analyzes the visual style of your recorded app and injects corresponding styles into your React Native components. This ensures that the generated code closely matches the look and feel of your original design.

📝 Note: While Replay strives for pixel-perfect accuracy, some manual adjustments may be necessary to fine-tune the styling.

Integrating the Generated Code into Your Expo Project#

Once Replay has finished generating the code, you can download it as a zip file.

Step 1: Extract the Code#

Extract the contents of the zip file into your Expo project directory. Pay attention to the directory structure. Replay typically organizes the code into components, screens, and utils folders.

Step 2: Import the Components#

Import the generated components into your

file (or your main application file).

typescript
import React, { useState } from 'react';
import { StyleSheet, View, Text, TextInput, Button, FlatList } from 'react-native';

// Import the generated components
import TaskItem from './components/TaskItem';
import AddTask from './components/AddTask';

export default function App() {
  const [taskList, setTaskList] = useState([]);

  const addTaskHandler = (taskTitle) => {
    setTaskList(currentTasks => [...currentTasks, { id: Math.random().toString(), value: taskTitle }]);
  };

  const removeTaskHandler = (taskId) => {
    setTaskList(currentTasks => {
      return currentTasks.filter((task) => task.id !== taskId);
    });
  };

  return (
    <View style={styles.screen}>
      <AddTask onAddTask={addTaskHandler} />
      <FlatList
        keyExtractor={(item, index) => item.id}
        data={taskList}
        renderItem={itemData => (
          <TaskItem
            id={itemData.item.id}
            onDelete={removeTaskHandler}
            title={itemData.item.value}
          />
        )}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  screen: {
    padding: 50
  }
});

Step 3: Run Your App#

Run your Expo app to see the generated UI in action:

bash
expo start

Refining and Customizing the Code#

While Replay generates a solid foundation, you'll likely need to refine and customize the code to meet your specific requirements.

Adjusting Styles#

Use React Native's styling system to adjust the appearance of your components. You can modify the generated stylesheets or add new styles as needed.

Adding Functionality#

Implement any additional functionality that wasn't captured in your video recording. This might involve adding new features, integrating with external APIs, or implementing custom logic.

Optimizing Performance#

Review the generated code for potential performance bottlenecks and optimize as necessary. This might involve memoizing components, optimizing data fetching, or using more efficient algorithms.

Replay vs. Traditional Methods & Other Tools#

Let's compare Replay to traditional development and other AI-powered UI tools.

⚠️ Warning: Replay is not a magic bullet. While it significantly accelerates development, it still requires developer expertise to refine and customize the generated code.

Addressing Common Concerns#

Code Quality#

Replay generates clean, well-structured React Native code. However, it's important to review the code and refactor as needed to ensure maintainability and scalability.

Accuracy#

The accuracy of the generated code depends on the quality of the video recording. Clear, concise recordings with well-defined user flows will produce the best results.

Customization#

Replay provides a solid foundation, but you'll likely need to customize the code to meet your specific requirements. Be prepared to spend time adjusting styles, adding functionality, and optimizing performance.

Frequently Asked Questions#

Is Replay free to use?#

Replay offers a free tier with limited usage. Paid plans are available for higher usage and access to advanced features. Check the Replay website (https://replay.build) for the latest pricing information.

How is Replay different from v0.dev?#

While both Replay and v0.dev leverage AI for code generation, they differ in their input methods and focus. v0.dev uses text prompts to generate UI components, while Replay analyzes video recordings to understand user behavior and generate complete application flows. Replay's video analysis allows for a more accurate and comprehensive understanding of the intended user experience.

Can Replay handle complex animations and transitions?#

Replay can capture basic animations and transitions. However, for more complex animations, you may need to manually implement them using React Native's Animated API.

What types of apps can I build with Replay?#

You can build a wide range of mobile apps with Replay, including e-commerce apps, social media apps, productivity apps, and more. The key is to clearly demonstrate the desired behavior in your video recordings.

Conclusion#

Replay represents a paradigm shift in mobile app development. By leveraging video analysis and AI-powered code generation, Replay dramatically accelerates the development process and allows developers to focus on the core functionality of their apps. While it's not a replacement for developer expertise, Replay is a powerful tool that can significantly improve your productivity and help you build high-quality mobile apps faster than ever before.

---

Ready to try behavior-driven code generation? Get started with Replay - transform any video into working code in seconds.