Skip to main content

​
Code Editor

While the AI handles most coding tasks, you have full access to view and edit the generated code directly.

​
Accessing the Editor

The code editor is available in Triple Panel layout:
  1. Click the layout toggle in the header
  2. Select the three-panel layout
  3. The editor appears in the middle panel

​
File Browser

The left sidebar of the editor shows your project files: 
📁 app/              # Screens and navigation
📁 components/       # Reusable UI components
📁 utils/           # Helper functions
📁 assets/          # Images and fonts
📄 app.json         # App configuration
📄 package.json     # Dependencies
Click any file to open it in the editor.

​
Editor Features

​
Syntax Highlighting

Full TypeScript/React Native syntax highlighting with:
  • JSX component highlighting
  • TypeScript type annotations
  • Import/export statements
  • String and number literals

​
File Tabs

Open multiple files in tabs for easy switching between related files. Use Ctrl/Cmd + F to search within the current file.

​
When to Edit Manually

The AI handles most tasks, but manual editing is useful for:

Quick Fixes

Minor typos or small value changes are faster to fix directly

Learning

Read the code to understand how the AI implemented features

Fine-tuning

Adjust specific values like colors, spacing, or timing

Debugging

Add console.log statements to diagnose issues

​
Common Manual Edits

​
Adjusting Styles

// Change padding from 16 to 24
const styles = StyleSheet.create({
  container: {
    padding: 24, // was 16
  },
});

​
Fixing Text

// Fix a typo in the UI
<Text>Submit Application</Text> // was "Sumbit"

​
Tweaking Animations

// Make animation faster
Animated.timing(fadeAnim, {
  toValue: 1,
  duration: 200, // was 500
  useNativeDriver: true,
}).start();

​
Adding Debug Logs

const handleSubmit = () => {
  console.log('Form data:', formData); // Debug line
  submitForm(formData);
};

​
Saving Changes

After editing code manually:
  1. The file is auto-saved
  2. A build triggers automatically
  3. Preview updates with your changes
Manual edits are tracked in version history just like AI changes.

​
Working with AI and Manual Edits

You can combine AI prompts with manual edits:
  1. AI generates feature - “Add a settings screen”
  2. You fine-tune - Adjust spacing, fix typos
  3. AI adds more - “Add dark mode toggle to settings”
The AI sees your manual changes and works with them.
Tell the AI about manual changes: “I adjusted the header padding manually. Now add a search bar below it.”

​
Understanding the Code Structure

​
App Directory (Expo Router)

Natively uses Expo Router for file-based routing: 
app/
├── index.tsx        # Home screen (/)
├── profile.tsx      # Profile screen (/profile)
├── settings.tsx     # Settings screen (/settings)
├── (tabs)/          # Tab navigator group
│   ├── _layout.tsx  # Tab configuration
│   ├── home.tsx     # Home tab
│   └── search.tsx   # Search tab
└── product/
    └── [id].tsx     # Dynamic route (/product/123)

​
Components

Reusable UI components live in /components: 
// components/Button.tsx
export function Button({ title, onPress }) {
  return (
    <TouchableOpacity onPress={onPress}>
      <Text>{title}</Text>
    </TouchableOpacity>
  );
}

​
Utils

Helper functions and API calls in /utils: 
// utils/api.ts
export async function fetchProducts() {
  const response = await fetch('/api/products');
  return response.json();
}

​
Common Patterns

import { router } from 'expo-router';

// Navigate to a screen
router.push('/profile');

// Navigate with parameters
router.push({
  pathname: '/product/[id]',
  params: { id: '123' }
});

// Go back
router.back();

​
State Management

import { useState, useEffect } from 'react';

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

useEffect(() => {
  fetchItems().then(data => {
    setItems(data);
    setLoading(false);
  });
}, []);

​
API Calls

import Constants from 'expo-constants';

const backendUrl = Constants.expoConfig?.extra?.backendUrl;

const response = await fetch(`${backendUrl}/api/products`);
const data = await response.json();

​
Best Practices

For adding features or refactoring, describe it to the AI. Manual editing is best for small tweaks.
Always verify your manual changes work in the preview before moving on.
Match the existing code style when making manual edits.
The AI auto-generates commit messages, but your manual edits are tracked too.

​
Exporting Code

To work on the code locally:
  1. Connect your GitHub repository
  2. Code syncs automatically
  3. Clone locally: git clone your-repo
  4. Install: npm install
  5. Run: npx expo start

GitHub Integration

Learn more about syncing with GitHub

​
Next Steps

Backend Features

Understanding backend code generation

Deployment

Build and deploy your app