N
NTRN
SYSTEM ONLINE: READY FOR TRANSMUTATION

High-Precision
Transformation Engine

NTRN is a command-line utility that converts Next.js components into fully structured React Native modules. Zero runtime overhead. 100% type safety.

ntrn-cli — zsh — 80x24
➜~/projectntrn convert ./components/hero.tsx
✔Parsing AST...12ms
✔Resolving dependencies...45ms
✔Mapping DOM to Native...89ms
✨ Transmutation complete. Generated 2 files:
SOURCE (Next.js)
export default function Hero() {
  return (
    <div className="flex...">
      <h1>Hello</h1>
    </div>
  )
}
OUTPUT (React Native)
import { View, Text } from 'react-native'

export default function Hero() {
  return (
    <View style={styles.container}>
      <Text>Hello</Text>
    </View>
  )
}
➜~/project_

AST Parsing Engine

Deep static analysis understands your component structure, props, and state before writing a single line of native code.

Zero Runtime

NTRN operates entirely at build time. No wrappers, no bridges, no bloat. Just pure, idiomatic React Native code.

Style Transpiler

Automatically converts Tailwind classes and CSS modules into React Native StyleSheet objects with 99% accuracy.

SYSTEM_DOCUMENTATION_V4.1.2

Documentation Universe

Comprehensive guides for the NTRN transmutation engine. From installation to advanced AI configuration.

AI Assistant Guide

Complete ChatGPT-like CLI documentation for interactive development.

READ_DOCS

Quality Assurance

Enhanced fix verification system and automated testing protocols.

READ_DOCS

Perfect Conversion

100% working React Native examples and migration patterns.

READ_DOCS

Web API Guide

Complete web to native conversion strategies for API routes.

READ_DOCS

Shadcn Guide

Automatic component conversion for the shadcn/ui library.

READ_DOCS

Pricing Guide

Comprehensive cost analysis and token usage tracking.

READ_DOCS

System Architecture // Documentation

Understanding the transmutation pipeline. NTRN analyzes your Next.js codebase and reconstructs it for the React Native runtime using a three-stage process.

CONTENTS
01

Source Ingestion

The engine recursively scans your /app or /pages directory. It identifies React components, extracts metadata, and builds a dependency graph to understand how your application is structured.

inputsrc/components/Button.tsx
const ast = parser.parse(sourceCode);
const imports = ast.find(ImportDeclaration);
// > Found 3 imports, 2 props, 1 state variable
02

AST Transformation

This is where the magic happens. HTML elements are mapped to their Native equivalents. <div> becomes <View>, <p> becomes <Text>. Tailwind classes are compiled into StyleSheet objects.

Web DOM
<div className="p-4">
Content
</div>
Native Element
<View style={styles.box}>
Content
</View>
03

Native Synthesis

The final output is clean, human-readable React Native code. It preserves your original logic, hooks, and variable names, ensuring the generated code is maintainable and type-safe.

outputnative/components/Button.tsx
✔ System Ready
Initializing AI Core... _

From Web to Native.
Instantaneously.

Stop rewriting the same components. NTRN bridges the gap between the DOM and the Native View hierarchy, preserving your logic while adapting the UI primitives.

  • Preserves React Hooks & State
  • Intelligent Flexbox Mapping
  • Automatic Import Resolution

Ready to compile the future?

Join thousands of developers building universal apps with NTRN. Open source and free for community use.