📦 Blend RN - Just chop, prepare and serve the code.

Blend RN is a custom DSL-based React Native project generator. It allows developers to declare app layouts, screens, navigation structure, API endpoints, and data models using a simple, readable grammar, and then automatically generates React Native boilerplate code.

📖 Grammar Overview

Blend RN supports three grammar types:

1. .rnbasic – for app layout/navigation
2. .api – for defining API endpoints
3. .data – for defining data models

📑 .rnbasic Example

layout Auth type(Stack) {
  page LandingScreen
  page SplashScreen
}

📚 .rnbasic Grammar Explanation

| Keyword | Description | Example | |:----------|:------------------------------------------------|:--------------------------------| | layout | Defines a navigation layout (Stack, Drawer, Tab) | layout Auth type(Stack) | | page | Defines a screen/page inside a layout | page SplashScreen | | type | Specifies the navigation type for a layout | type(Stack), type(Drawer) |

📌 Supported Navigation Types:

• Stack
• Drawer
• Tab

You can nest layouts and pages to build multi-level navigation structures.

🌐 .api Example

module User

section Auth {
  api login(POST) "/login" {
    input(email: string, password: string)
    output(string)
  }

  api logout(POST) "/logout" {
    authenticated
    output(string)
  }
}

📚 .api Grammar Highlights

| Keyword | Description | |------------------|--------------------------------------------| | module | Declares an API module | | section | Groups related APIs | | api | Declares an API with method and path | | authenticated | Marks API as needing auth token | | input | Defines expected request payload fields | | output | Defines expected response structure |

✅ You can use types, optional fields (?), arrays ([]), and relational mappings (TypeA -> TypeB).

🗃️ .data Example

module UserData

data User(id: string, name: string, email: string)
data Profile(userId: string -> User, bio: string?)

📚 .data Grammar Highlights

| Keyword | Description | |-----------|----------------------------------------| | module | Declares a data module | | data | Defines a data structure | | -> | Declares a reference/relation type | | ? | Makes a field optional | | [] | Declares an array of a type |

🛠️ Blend RN CLI Commands

Blend RN provides a simple CLI interface to process grammar files and generate your app’s codebase.

1️⃣ blend-rn chop

Purpose:
Parses the grammar files (.rnbasic, .api, .data) and converts them into intermediate JSON representations.

Usage:

blend-rn chop

2️⃣ blend-rn prepare

Purpose:
Reads the intermediate JSON files generated by chop and creates the necessary React Native components, API services, data types, and navigation structure.

Usage:

blend-rn prepare

3️⃣ blend-rn serve

Purpose:
Starts the React Native Metro bundler and runs the application on the configured emulator or connected device.

Usage:

blend-rn serve

📂 Example Workflow

Example Files:

📁 project/app.rnbasic

layout Auth type(Stack) {
  page LandingScreen
  page SplashScreen
}

📁 project/spec/api/user.api

module User

section Auth {
  api login(POST) "/login" {
    input(email: string, password: string)
    output(string)
  }
}

📁 project/spec/data/user.data

module UserData

data User(id: string, name: string, email: string)

Run the commands:

blend-rn chop
blend-rn prepare
blend-rn serve

✅ This will:

• Parse the grammar files
• Generate screens and layout components
• Generate API services and types
• Build a working React Native app

📦 Project Structure (After prepare)

src-gen/
 └── router/
     └── config/
         └── LayoutConfig.tsx
 └── redux/
     ├── ApiModuleSection/
         └── ApiSection/     
             └── Api/     
                  └── action.ts/     
                  └── slice.ts/     
                  └── selector.ts/     
                  └── data.ts/     
 └── data/
     └── data.ts

📞 Support

For issues, improvements, or suggestions — feel free to raise a ticket or contact the project maintainer.

📃 License

This project is licensed under the MIT License.