Install Ignite Globally

npm install -g the-ignite

The Ignite CLI provides everything you need to create, develop, and build cross-platform mobile apps using declarative .ignite syntax.

Create a New Project

ignite create my-app
cd my-app

This command creates a new Expo project with:

• Pre-configured React Navigation with bottom tabs
• Sample .ignite files in the app/(tabs) directory
• Assets (app icon, splash screen, adaptive icon) downloaded from Cloudinary
• Complete Expo setup with TypeScript support
• Dependencies: Expo, React Navigation, React Native Gesture Handler, and more

Start Development Server

ignite dev

This starts the complete development workflow:

• Compiles all .ignite files to React Native components
• Starts file watcher for automatic recompilation
• Launches Expo development server
• Provides hot reloading for instant feedback

Platform-Specific Development

ignite dev --android    # or -a
ignite dev --ios        # or -i

Edit Your App

Your app structure will look like this:

my-app/
├── app/
│   └── (tabs)/
│       ├── Home/
│       │   └── index.ignite       # Your main screen
│       ├── About/
│       │   └── index.ignite       # About screen
│       └── Developers/
│           └── index.ignite       # Developers screen
├── assets/
│   ├── icon.png                   # App icon
│   ├── adaptive-icon.png          # Android adaptive icon
│   └── splash.png                  # Splash screen image
├── .ignite/
│   ├── screens/                   # Generated React Native components
│   └── router.js                  # Generated navigation config
├── App.js                         # Main app entry point
├── app.config.js                  # Expo configuration
├── babel.config.js                 # Babel configuration
├── package.json                    # Dependencies and scripts
└── ignite.json                     # Ignite project configuration

Build for Production

ignite build --android
ignite build --ios

Your First .ignite File

Edit app/(tabs)/Home/index.ignite:

import { LinearGradient } from 'expo-linear-gradient'

screen title="Home" isTabScreen="true" tabOrder="1" tabIcon="home"

state count=0
state message="Hello World"

handleIncrement() {
  setCount(count + 1)
}

<View style="container">
  <LinearGradient colors={['#ff6b6b', '#4ecdc4']} style="gradient">
    <Text style="title">{message}</Text>
    <Text style="counter">Count: {count}</Text>
    <Button onPress="handleIncrement()">Increment</Button>
  </LinearGradient>
</View>

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    color: 'white',
    textAlign: 'center',
    marginBottom: 20,
  },
  counter: {
    fontSize: 18,
    color: 'white',
    textAlign: 'center',
    marginBottom: 20,
  },
  gradient: {
    flex: 1,
    borderRadius: 10,
    padding: 20,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

Changes are automatically compiled and hot-reloaded in your Expo app!

CLI Commands

Ignite provides a powerful command-line interface built with Commander.js for creating, developing, and building your applications.

Core Commands

What Happens During ignite create

1. Project Setup: Creates Expo project with TypeScript support
2. Directory Structure: Sets up app/(tabs) directory structure
3. Dependencies: Installs Expo, React Navigation, React Native Gesture Handler, and more
4. Assets Download: Downloads app icon, splash screen, and adaptive icon from Cloudinary
5. Screen Files: Downloads sample Home, About, and Developers .ignite files
6. Configuration: Sets up babel.config.js, app.config.js, and ignite.json
7. Main App: Creates App.js with NavigationContainer and Router

What Happens During ignite dev

1. Project Validation: Checks for ignite.json and app/ directory
2. Initial Compilation: Compiles all .ignite files to React Native components
3. File Watcher: Starts watching for changes in .ignite files
4. Router Generation: Creates navigation configuration based on file structure
5. Expo Server: Launches Expo development server
6. Platform Launch: Optionally launches Android/iOS app

Development Workflow

1. Edit .ignite files in your app/ directory
2. File watcher detects changes and triggers recompilation
3. Generated components are saved to .ignite/ directory
4. Expo hot reloads your app with changes
5. See results instantly on your device/simulator

Troubleshooting CLI Issues

• "This is not an Ignite project": Ensure you're in a directory with ignite.json
• "App directory not found": Create an app/ directory with .ignite files
• "Failed to install dependencies": Run npm install manually
• Build failures: Check Expo configuration and platform setup
• Permission errors: May need to run with sudo (not recommended) or fix npm permissions

Project Structure

When you create a new Ignite project, you get a complete Expo/React Native structure with automatic setup:

Complete Project Layout

my-app/
├── app/                            # Source .ignite files
│   └── (tabs)/                     # Tab navigation screens
│       ├── Home/
│       │   └── index.ignite        # Home screen definition
│       ├── About/
│       │   └── index.ignite        # About screen definition
│       └── Developers/
│           └── index.ignite        # Developers screen definition
├── assets/                         # App assets (downloaded from Cloudinary)
│   ├── icon.png                    # App icon (512x512)
│   ├── adaptive-icon.png           # Android adaptive icon
│   └── splash.png                  # Splash screen image
├── .ignite/                        # Generated React Native components
│   ├── screens/
│   │   ├── (tabs)/
│   │   │   ├── Home/
│   │   │   │   └── HomeIndex.js    # Generated Home component
│   │   │   ├── About/
│   │   │   │   └── AboutIndex.js   # Generated About component
│   │   │   └── Developers/
│   │   │       └── DevelopersIndex.js  # Generated Developers component
│   │   └── router.js               # Generated navigation config
├── node_modules/                   # Dependencies
├── App.js                          # Main app entry point
├── app.config.js                   # Expo configuration
├── babel.config.js                 # Babel transpilation config
├── package.json                    # Project dependencies and scripts
├── package-lock.json               # Locked dependency versions
└── ignite.json                     # Ignite project configuration

Key Directories Explained

• app/: Your source .ignite files with declarative syntax
• app/(tabs)/: Tab navigation screens (automatically detected)
• assets/: Images, icons, and other static resources
• .ignite/: Generated React Native components (auto-generated, don't edit)
• .ignite/screens/: Compiled React Native components from your .ignite files
• .ignite/router.js: Auto-generated navigation configuration

Generated package.json

Each Ignite project includes these dependencies:

{
  "dependencies": {
    "expo": "^53.0.0",
    "expo-status-bar": "~2.2.3",
    "react": "19.0.0",
    "react-dom": "19.0.0",
    "react-native": "^0.79.0",
    "react-native-gesture-handler": "~2.24.0",
    "react-native-safe-area-context": "5.4.0",
    "react-native-screens": "~4.11.1",
    "@react-navigation/native": "^6.1.9",
    "@react-navigation/stack": "^6.3.20",
    "@react-navigation/bottom-tabs": "^6.5.11",
    "@expo/vector-icons": "^14.0.2"
  },
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web"
  }
}

File Structure Conventions

• index.ignite: Main screen files in each directory
• (tabs) folder: Indicates tab navigation screens
• Component naming: Generated components follow PascalCase (HomeIndex, AboutIndex, etc.)
• Route generation: Navigation routes are auto-generated from file structure
• Tab ordering: Use tabOrder property to control tab sequence

ignite.json Configuration

{
  "name": "my-app",
  "version": "1.0.0",
  "type": "ignite-app"
}

Directory Structure Best Practices

• Keep .ignite files organized: Use descriptive folder names
• Tab screens: Place in (tabs) folder for automatic tab navigation
• Stack screens: Place outside (tabs) for stack navigation
• Don't edit .ignite/ folder: It's auto-generated and will be overwritten
• Assets organization: Keep images and icons in assets/ folder

Writing .ignite Files

Ignite uses a custom DSL (Domain Specific Language) that compiles to React Native components. Here's how to write effective .ignite files:

Basic .ignite File Structure

import { LinearGradient } from 'expo-linear-gradient'
import firebase from 'firebase'

screen title="Home" isTabScreen="true" tabOrder="1" tabIcon="home"

state user=null
state loading=false
state count=0

async handleLogin() {
  setLoading(true)
  try {
    const result = await firebase.auth().signInWithEmailAndPassword(email, password)
    setUser(result.user)
    go('/profile')
  } catch (error) {
    console.log('Login failed:', error)
  }
  setLoading(false)
}

handleIncrement() {
  setCount(count + 1)
}

<View style="container">
  <LinearGradient colors={['#ff6b6b', '#4ecdc4']} style="gradient">
    <Text style="title">Welcome {user?.name || 'Guest'}</Text>
    <Text style="counter">Count: {count}</Text>
    <Button onPress="handleIncrement()">Increment</Button>
    <Button onPress="handleLogin()" disabled={loading}>
      {loading ? 'Loading...' : 'Login'}
    </Button>
  </LinearGradient>
</View>

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    color: 'white',
    textAlign: 'center',
    marginBottom: 20,
  },
  counter: {
    fontSize: 18,
    color: 'white',
    textAlign: 'center',
    marginBottom: 20,
  },
  gradient: {
    flex: 1,
    borderRadius: 10,
    padding: 20,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

Import Statements

Ignite supports flexible import patterns:

// Default imports
import React from 'react'
import firebase from 'firebase'

// Named imports
import { View, Text, Button } from 'react-native'
import { LinearGradient } from 'expo-linear-gradient'

// Namespace imports
import * as Three from 'three'

// Simple imports (converted to default)
firebase
expo-linear-gradient

Screen Declaration

Configure screen properties:

screen title="Home" isTabScreen="true" tabOrder="1" tabIcon="home" headerShown="true"

• title: Screen title for navigation
• isTabScreen: Boolean indicating tab navigation
• tabOrder: Order in tab bar (1, 2, 3, etc.)
• tabIcon: Icon name for tab bar
• headerShown: Whether to show navigation header

State Management

Declare state with automatic type inference:

state user=null          // object type
state loading=false      // boolean type
state count=0            // number type
state name=""            // string type
state items=[]           // array type
state config={}          // object type

Function Declaration

Write functions with async support:

// Regular function
handleIncrement() {
  setCount(count + 1)
}

// Async function
async handleLogin() {
  setLoading(true)
  try {
    const result = await firebase.auth().signInWithEmailAndPassword(email, password)
    setUser(result.user)
  } catch (error) {
    console.log('Error:', error)
  }
  setLoading(false)
}

// Navigation function
goToProfile() {
  go('/profile')
}

Component Usage

Use familiar React Native components with enhanced syntax:

<View style="container">
  <Text style="title">{user?.name || 'Guest'}</Text>
  <Input 
    bind="email" 
    placeholder="Email" 
    keyboardType="email-address"
  />
  <Button 
    onPress="handleLogin()" 
    disabled={loading}
  >
    {loading ? 'Loading...' : 'Login'}
  </Button>
</View>

Styling

Include StyleSheet definitions:

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
    backgroundColor: '#f0f0f0',
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    textAlign: 'center',
  },
});

Development Workflow

1. Edit .ignite files in your app/ directory
2. Save changes - file watcher detects modifications
3. Automatic compilation generates React Native components
4. Hot reload updates your app instantly
5. See results on device/simulator in real-time

Core Features

Ignite provides a comprehensive set of features for simplified cross-platform mobile development:

🔥 Declarative .ignite Syntax

• XML-like component definitions with familiar React Native elements
• Custom DSL that compiles to optimized React Native components
• Support for complex JSX expressions in curly braces
• Automatic component mapping (Button → TouchableOpacity, Input → TextInput)

🚀 Automatic State Management

• Smart state inference from initial values
• Automatic useState hook generation with proper TypeScript types
• Support for all JavaScript types: string, number, boolean, object, array
• Automatic setter function generation (setUser, setLoading, etc.)

🧭 Built-in Navigation

• Automatic React Navigation setup with NavigationContainer
• Tab navigation support with tabOrder and tabIcon properties
• Stack navigation for non-tab screens
• Route generation based on file structure and directory names
• Navigation functions like go('/path') for easy screen transitions

📦 Package Integration

• Flexible import system supporting default, named, and namespace imports
• Seamless integration with Firebase, Expo, and third-party packages
• Simple package name imports automatically converted to default imports
• Support for complex packages like Three.js, React Native community packages

⚡ Development Experience

• Hot reloading with file watching for instant feedback
• Real-time compilation during development
• Comprehensive error handling and validation
• Generated code cleanup and optimization
• TypeScript support throughout the compilation pipeline

🛠️ CLI Tools

• Powerful command-line interface built with Commander.js
• Project scaffolding with complete Expo setup
• Asset management with Cloudinary integration
• Platform-specific development and building
• Version management and project validation

📱 Cross-Platform Support

• iOS and Android support through Expo
• Web support with Expo Web
• Platform-specific optimizations
• Consistent UI across all platforms

🎨 Styling & Assets

• StyleSheet.create integration with automatic imports
• Asset management with automatic downloading
• Support for app icons, splash screens, and adaptive icons
• Flexible styling with inline styles and stylesheet references

Component Mapping

Ignite maps your declarative components to React Native/Expo components. Example:

const COMPONENT_MAP = {
  View: 'View',
  Text: 'Text',
  Button: 'TouchableOpacity',
  Input: 'TextInput',
  // ...more
}

• Button → TouchableOpacity
• Input → TextInput
• Supports any npm or custom component

Automatic State Management

State is declared at the top of your .ignite file and automatically inferred:

state user=null
state loading=false
state count=0

Generates:

const [user, setUser] = useState(null)
const [loading, setLoading] = useState(false)
const [count, setCount] = useState(0)

• Type inference for string, number, boolean, object, array
• Smart defaults for common UI patterns

Navigation

Ignite generates navigation automatically from your .ignite files:

screen title="Home" isTabScreen="true" tabOrder="1" tabIcon="home"

• Tab and stack navigation supported
• Custom tab icons and ordering
• Screen options: titles, header visibility, etc.

Navigation actions:

onPress="go('/settings')" // → navigation.navigate('SettingsIndex')

Advanced

• Flexible Imports: Any npm package, default/named/namespace imports
• Custom Functions: Async and regular functions in .ignite
• Complex Expressions: Full JSX support in curly braces
• File System Management: Maintains directory structure, cleans up old files
• Error Handling: Comprehensive error messages and validation

import { LinearGradient } from 'expo-linear-gradient'
import firebase from 'firebase'
import * as Three from 'three'

Troubleshooting

• "This is not an Ignite project": Check for ignite.json in project root.
• "App directory not found": Ensure app/ exists with .ignite files.
• Build failures: Check EAS Build config, Expo account, and dependencies.
• See generated files in .ignite/ for debugging.
• Review Expo docs for platform-specific issues.
• Ensure all dependencies are installed with

  npm install