How to Build a React Native App with AI: A Habit Tracker Walkthrough

habit-tracker/

├── package.json # Expo SDK 51, RN 0.73, deps declared

├── app.json # Expo config with correct bundle IDs

├── tsconfig.json # Strict mode, path aliases configured

├── babel.config.js # Expo preset

├── app/

│ ├── _layout.tsx # Root layout with tab navigator

│ ├── (tabs)/

│ │ ├── _layout.tsx # Tab bar with icons and labels

│ │ ├── index.tsx # Today tab - main screen

│ │ ├── habits.tsx # Habit management tab

│ │ ├── stats.tsx # Statistics tab

│ │ └── profile.tsx # Profile tab

├── components/

│ ├── HabitCard.tsx # Swipeable habit card with checkbox

│ ├── ProgressRing.tsx # SVG progress circle for streaks

│ ├── CategoryBadge.tsx # Pill badge for habit categories

│ ├── EmptyState.tsx # Shared empty state component

│ └── StatBar.tsx # Horizontal bar chart for stats

├── hooks/

│ ├── useHabits.ts # Main data hook with AsyncStorage

│ └── useStats.ts # Derived statistics calculations

├── types/

│ └── habit.ts # TypeScript interfaces for Habit, Log, Stats

├── constants/

│ ├── theme.ts # Colors, spacing, font sizes, shadows

│ └── sampleData.ts # 5 pre-seeded realistic habits

└── utils/

└── dateUtils.ts # Date formatting and streak calculation

19 files. TypeScript throughout. Proper separation of concerns - hooks, types, constants, and utilities are all in their own directories. This is the architecture a mid-level React Native developer would produce. The agent didn't just write code; it made architecture decisions.

A Look at the Generated Code

export type HabitCategory = "health" | "productivity" | "mindfulness" | "fitness";

export type HabitFrequency = "daily" | "weekly";

export interface Habit {

id: string;

name: string;

category: HabitCategory;

frequency: HabitFrequency;

createdAt: string;

color: string;

}

export interface HabitLog {

habitId: string;

completedAt: string; // ISO date string

date: string; // YYYY-MM-DD for lookup

}

export interface HabitStats {

habitId: string;

currentStreak: number;

longestStreak: number;

completionRate: number; // 0-1

totalCompletions: number;

}

import AsyncStorage from "@react-native-async-storage/async-storage";

import { useState, useEffect, useCallback } from "react";

import { Habit, HabitLog } from "@/types/habit";

import { sampleHabits } from "@/constants/sampleData";

const HABITS_KEY = "@habits";

const LOGS_KEY = "@habit_logs";

export function useHabits() {

const [habits, setHabits] = useState([]);

const [logs, setLogs] = useState([]);

const [loading, setLoading] = useState(true);

useEffect(() => {

loadData();

}, []);

async function loadData() {

try {

const [habitsJson, logsJson] = await Promise.all([

AsyncStorage.getItem(HABITS_KEY),

AsyncStorage.getItem(LOGS_KEY),

]);

setHabits(habitsJson ? JSON.parse(habitsJson) : sampleHabits);

setLogs(logsJson ? JSON.parse(logsJson) : []);

} finally {

setLoading(false);

}

}

const toggleHabit = useCallback(async (habitId: string, date: string) => {

const existingLog = logs.find(

(l) => l.habitId === habitId && l.date === date

);

const newLogs = existingLog

? logs.filter((l) => !(l.habitId === habitId && l.date === date))

: [...logs, { habitId, completedAt: new Date().toISOString(), date }];

setLogs(newLogs);

await AsyncStorage.setItem(LOGS_KEY, JSON.stringify(newLogs));

}, [logs]);

// addHabit, deleteHabit implementations follow...

return { habits, logs, loading, toggleHabit };

}

Running the Output

Download the zip, extract it, then:

# Navigate into the project

cd habit-tracker

# Install dependencies

npm install

# Start the Expo dev server

npx expo start

You'll see a QR code in the terminal. Scan it with the Expo Go app on your phone (iOS or Android) and the app loads over your local network. No Xcode, no Android Studio, no simulators required for the initial preview.

If you want to run in a simulator:

# iOS simulator (Mac only, requires Xcode)

npx expo start --ios

# Android emulator (requires Android Studio)

npx expo start --android

The app runs. First-party navigation, real AsyncStorage persistence, working stats calculations. Not a mockup.

Iterating with Chat

After the first generation, I sent three follow-up messages to refine:

Each iteration took 30-60 seconds and the agent updated only the affected files, preserving everything else.

Common Mistakes to Avoid

I've watched enough people use AI app builders to know where things go wrong. Here are the patterns I see repeatedly:

Bad: *"Build me a habit tracker app"*

This gets you a generic result. The agent makes all the decisions - navigation structure, color scheme, data model, screen count. Some of those decisions will be wrong for your specific needs.

Good: Specify screens, colors, data shape, and the one feature that makes your app different from every other habit tracker. The more context you provide, the more the output matches what you actually wanted.

Bad: *"Build me a habit tracker with social features where users can follow each other, see friends' habits, send encouragement, create habit challenges together, and compete on leaderboards"*

When you cram 6 major features into one prompt, you get a shallow version of all of them. The agent doesn't know which features matter most to you, so it spreads effort evenly across all of them.

Good: Start with the core - the single most important thing the app does. Get that working first. Then add features one at a time through chat iterations.

The first generation is the starting point, not the deliverable. Every professional who uses these tools iterates 3-8 times before they're satisfied. Plan for it. Reserve time for iteration.

What You Own

This is worth saying directly: the code you download belongs to you. There's no licensing restriction, no "built with iBuildYourApp" watermark requirement, no SDK you're locked into. It's plain React Native code that runs with Expo. Any React Native developer can read it, modify it, and extend it.