Skip to main content

​
Core Concepts

Before diving deep into Natively, it helps to understand the key concepts and how they work together.

​
The Natively Workflow

Natively follows a simple but powerful workflow:
1

Describe

You describe what you want in natural language through the AI chat
2

Generate

The AI generates React Native code, handles dependencies, and structures your project
3

Preview

See your changes instantly in the live mobile preview
4

Iterate

Refine your app by chatting more with the AI or editing code directly
5

Deploy

When ready, deploy to iOS App Store and Google Play Store

​
Projects

A project in Natively is your complete mobile app. Each project contains:
  • Source Code - React Native/Expo code generated by the AI
  • Assets - Images, fonts, and other media files
  • Configuration - App settings, dependencies, and build configuration
  • Chat History - Your conversation with the AI for context
  • Version History - Commits tracking all changes made

​
Project Structure

Your project follows a standard Expo project structure: 
/app                  # Screen components (file-based routing)
  ├── index.tsx       # Home screen
  ├── profile.tsx     # Profile screen
  └── (tabs)/         # Tab navigation
/components           # Reusable UI components
/utils                # Helper functions and utilities
/assets               # Images, fonts, and static files
app.json              # Expo configuration
package.json          # Dependencies

​
The AI Agent

The AI agent is the brain behind Natively. It understands your requests and generates appropriate code.

​
What the AI Can Do

Generate Screens

Create complete screens with UI components, styling, and layout

Add Features

Implement functionality like forms, navigation, and data handling

Fix Bugs

Diagnose and fix issues you describe

Refactor Code

Improve existing code structure and patterns

Create Backend

Generate API endpoints and database schemas

Integrate Services

Connect to external APIs and services

​
How the AI Works

  1. Classification - First, the AI determines if you’re asking for code changes or just asking a question
  2. Context Analysis - It reviews your existing code and chat history
  3. Code Generation - Generates or modifies code based on your request
  4. Linting & Validation - Checks for errors and fixes common issues
  5. Build & Preview - Compiles the app and updates the preview
The AI maintains context from your chat history, so you can reference previous conversations. “Make the button from earlier bigger” works because the AI remembers what button you were discussing.

​
Live Preview

The preview panel shows your app running in real-time. It’s not a simulator—it’s your actual app running in a web-based Expo environment.

​
Preview Features

  • Touch Interactions - Tap, swipe, and scroll like a real device
  • Navigation - Move between screens and test flows
  • Data Persistence - State persists during your session
  • Hot Reload - Changes appear instantly without losing state
  • Device Preview - Test on your actual phone via QR code

​
Version Control

Every change you make is tracked as a commit. This gives you:
  • History - See what changed and when
  • Rollback - Revert to any previous version if something breaks
  • Context - The AI can reference previous changes

​
Commit Messages

The AI automatically generates descriptive commit messages based on what changed: 
Added user profile screen with avatar upload
Fixed navigation bug on iOS
Implemented shopping cart with checkout flow
You can view and restore previous versions from the version history panel accessed via the sidebar.

​
Backend (Specular)

For apps that need server-side functionality, Natively uses Specular to automatically generate your backend.
Specular documentation is available at docs.specular.dev/specular

​
What Specular Provides

  • API Endpoints - RESTful APIs generated from natural language
  • Database - PostgreSQL database with automatic schema management
  • Authentication - User registration, login, and session management
  • File Storage - Upload and serve files and images
  • Serverless - No infrastructure to manage

​
When Backend is Created

The AI automatically creates backend functionality when you request:
  • User accounts and authentication
  • Saving data that persists across sessions
  • API integrations requiring server-side secrets
  • Complex data processing or AI features
// Example prompt that triggers backend creation:
"Add user authentication with email and password.
Save user preferences to their account."

​
Code Ownership

You own 100% of the code generated by Natively. There’s no vendor lock-in.

​
Export Options

  • GitHub Sync - Automatically sync to your repository
  • Download ZIP - Download complete source code
  • Local Development - Clone and run on your own machine

​
What You Get

# Complete, runnable Expo project
git clone your-repo/my-app
cd my-app
npm install
npx expo start
The exported code is standard React Native/Expo code that any developer can understand, modify, and maintain.

​
Next Steps

Now that you understand the concepts, dive into the features:

AI Chat

Master the AI chat interface

Live Preview

Get the most out of the preview

Code Editor

Edit code directly when needed

Backend

Understand backend generation