react-native-to-xml-converter 0.0.1

package/README.md

@@ -0,0 +1,210 @@
+# React Native to XML Converter
+
+A powerful CLI tool that converts React Native components to Android XML layouts. This tool parses your React Native JSX/TSX files and generates corresponding Android XML layout files, making it easy to port React Native components to native Android.
+
+## Features
+
+- 🔄 **Automatic Conversion**: Converts React Native components to Android XML
+- 🎨 **Style Mapping**: Maps React Native styles to Android attributes
+- 📦 **Component Support**: Supports common RN components (View, Text, ScrollView, etc.)
+- 🚀 **CLI Tool**: Easy-to-use command-line interface
+- 📁 **Organized Output**: Generates XML files in a dedicated `xml/` folder
+- ✨ **TypeScript Support**: Written in TypeScript with full type definitions
+
+## Installation
+
+### Global Installation`
+```bash
+npm install -g react-native-to-xml-converter
+```
+
+### Local Installation
+```bash
+npm install --save-dev react-native-to-xml-converter
+```
+
+### Using npx (No Installation Required)
+```bash
+npx react-native-to-xml-converter <input-file>
+```
+
+## Usage
+
+### Basic Usage
+```bash
+# Using installed package
+rn-to-xml example.ts
+
+# Using npx
+npx rn-to-xml example.ts
+```
+
+The converted XML file will be saved in the `xml/` folder in your current directory.
+
+### Example
+
+**Input (example.ts):**
+```tsx
+import { View, Text } from 'react-native';
+
+export default function Example() {
+  return (
+    <View style={{ padding: 20, backgroundColor: '#f0f0f0' }}>
+      <Text style={{ fontSize: 18, color: '#333' }}>Hello World</Text>
+      <View style={{ marginTop: 10 }}>
+        <Text>This is a test component</Text>
+      </View>
+    </View>
+  );
+}
+```
+
+**Output (xml/example.xml):**
+```xml
+<?xml version="1.0" encoding="utf-8"?>
+<LinearLayout
+    xmlns:android="http://schemas.android.com/apk/res/android"
+    android:id="@+id/view_1"
+    android:layout_width="wrap_content"
+    android:layout_height="wrap_content"
+    android:orientation="vertical"
+    android:background="#f0f0f0"
+    android:padding="20dp">
+    <TextView
+        android:id="@+id/text_2"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:text="Hello World"
+        android:textColor="#333"
+        android:textSize="18sp"/>
+    <LinearLayout
+        android:id="@+id/view_3"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:orientation="vertical"
+        android:layout_marginTop="10dp">
+        <TextView
+            android:id="@+id/text_4"
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            android:text="This is a test component"/>
+    </LinearLayout>
+</LinearLayout>
+```
+
+## Supported Components
+
+| React Native | Android XML |
+|-------------|-------------|
+| `View` | `LinearLayout` |
+| `Text` | `TextView` |
+| `Image` | `ImageView` |
+| `ScrollView` | `ScrollView` |
+| `TextInput` | `EditText` |
+| `Button` | `Button` |
+| `TouchableOpacity` | `FrameLayout` |
+| `FlatList` | `RecyclerView` |
+
+## Supported Styles
+
+### Layout Properties
+- `padding`, `paddingTop`, `paddingBottom`, `paddingLeft`, `paddingRight`
+- `paddingHorizontal`, `paddingVertical`
+- `margin`, `marginTop`, `marginBottom`, `marginLeft`, `marginRight`
+- `marginHorizontal`, `marginVertical`
+- `width`, `height`
+
+### View Properties
+- `backgroundColor`
+- `flexDirection` (determines layout orientation)
+- `alignItems`, `justifyContent` (converted to gravity)
+
+### Text Properties
+- `fontSize`
+- `color`
+- `fontWeight`
+- `textAlign`
+
+## Programmatic API
+
+You can also use this package programmatically in your Node.js scripts:
+
+```typescript
+import { convertRNToXML } from 'react-native-to-xml-converter';
+
+const code = `
+import { View, Text } from 'react-native';
+
+export default function App() {
+  return (
+    <View style={{ padding: 20 }}>
+      <Text>Hello World</Text>
+    </View>
+  );
+}
+`;
+
+const xml = convertRNToXML(code);
+console.log(xml);
+```
+
+## Development
+
+### Building from Source
+
+```bash
+# Clone the repository
+git clone https://github.com/Adhidevudayakumar/react-native-to-xml-converter.git
+cd react-native-to-xml-converter
+
+# Install dependencies
+npm install
+
+# Build the project
+npm run build
+
+# Link locally for testing
+npm link
+
+# Test the CLI
+npx rn-to-xml example.ts
+```
+
+### Project Structure
+
+```
+├── src/
+│   ├── cli/           # CLI entry point
+│   ├── parser/        # AST parsing logic
+│   ├── transformer/   # Component and style mappers
+│   ├── generators/    # XML generation
+│   ├── utils/         # Helper utilities
+│   └── index.ts       # Public API
+├── dist/              # Compiled output
+├── xml/               # Generated XML files (created on first run)
+└── package.json
+```
+
+## Limitations
+
+- Only supports inline styles (not StyleSheet.create references yet)
+- Some complex React Native components may not have direct Android equivalents
+- Nested Text components are flattened to single TextView
+- Custom components are treated as View by default
+
+## Contributing
+
+Contributions are welcome! Please feel free to submit a Pull Request.
+
+## License
+
+ISC
+
+## Author
+
+Adhidev Udayakumar
+
+## Links
+
+- [GitHub Repository](https://github.com/Adhidevudayakumar/react-native-to-xml-converter)
+- [Report Issues](https://github.com/Adhidevudayakumar/react-native-to-xml-converter/issues)

package/dist/cli/index.d.ts

@@ -0,0 +1,2 @@
+#!/usr/bin/env node
+export {};

package/dist/cli/index.js

@@ -0,0 +1,100 @@
+#!/usr/bin/env node
+"use strict";
+// CLI entry point
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+const fs = __importStar(require("fs"));
+const path = __importStar(require("path"));
+const index_1 = require("../index");
+/**
+ * Main CLI function
+ */
+function main() {
+    const args = process.argv.slice(2);
+    // Check if file path is provided
+    if (args.length === 0) {
+        console.error('❌ Error: No input file specified');
+        console.log('\nUsage: npx rn-to-xml <input-file.ts|tsx>');
+        console.log('Example: npx rn-to-xml example.ts');
+        process.exit(1);
+    }
+    const inputFile = args[0];
+    const absolutePath = path.resolve(process.cwd(), inputFile);
+    // Check if file exists
+    if (!fs.existsSync(absolutePath)) {
+        console.error(`❌ Error: File not found: ${inputFile}`);
+        process.exit(1);
+    }
+    // Read input file
+    let code;
+    try {
+        code = fs.readFileSync(absolutePath, 'utf-8');
+    }
+    catch (error) {
+        console.error(`❌ Error reading file: ${error.message}`);
+        process.exit(1);
+    }
+    // Convert to XML
+    let xml;
+    try {
+        console.log('🔄 Converting React Native to XML...');
+        xml = (0, index_1.convertRNToXML)(code);
+    }
+    catch (error) {
+        console.error(`❌ Conversion failed: ${error.message}`);
+        process.exit(1);
+    }
+    // Create output directory
+    const outputDir = path.join(process.cwd(), 'xml');
+    if (!fs.existsSync(outputDir)) {
+        fs.mkdirSync(outputDir, { recursive: true });
+    }
+    // Generate output filename
+    const inputBaseName = path.basename(inputFile, path.extname(inputFile));
+    const outputFile = path.join(outputDir, `${inputBaseName}.xml`);
+    // Write output file
+    try {
+        fs.writeFileSync(outputFile, xml, 'utf-8');
+    }
+    catch (error) {
+        console.error(`❌ Error writing output file: ${error.message}`);
+        process.exit(1);
+    }
+    // Success message
+    console.log('✅ Conversion successful!');
+    console.log(`📁 Output saved to: ${path.relative(process.cwd(), outputFile)}`);
+}
+// Run CLI
+main();

package/dist/generators/xmlGenerator.d.ts

@@ -0,0 +1,9 @@
+import { XMLNode } from '../parser/astTypes';
+/**
+ * Generates XML string from XML tree
+ */
+export declare function generateXml(root: XMLNode): string;
+/**
+ * Formats generated XML for better readability
+ */
+export declare function formatGeneratedXml(xml: string): string;

package/dist/generators/xmlGenerator.js

@@ -0,0 +1,90 @@
+"use strict";
+// Converts tree → XML string
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.generateXml = generateXml;
+exports.formatGeneratedXml = formatGeneratedXml;
+const helpers_1 = require("../utils/helpers");
+/**
+ * Generates XML string from XML tree
+ */
+function generateXml(root) {
+    const xmlDeclaration = '<?xml version="1.0" encoding="utf-8"?>';
+    const rootElement = generateElement(root, 0);
+    return `${xmlDeclaration}\n${rootElement}`;
+}
+/**
+ * Generates XML element recursively
+ */
+function generateElement(node, depth) {
+    const indent = '    '.repeat(depth);
+    const childIndent = '    '.repeat(depth + 1);
+    // Prepare attributes
+    const attributes = { ...node.attributes };
+    if (depth === 0) {
+        attributes['xmlns:android'] = 'http://schemas.android.com/apk/res/android';
+    }
+    // precise attribute order
+    const getAttrOrder = (key) => {
+        if (key === 'xmlns:android')
+            return 0;
+        if (key === 'android:id')
+            return 1;
+        if (key === 'android:layout_width')
+            return 2;
+        if (key === 'android:layout_height')
+            return 3;
+        if (key === 'android:orientation')
+            return 4;
+        return 10;
+    };
+    // Build attribute string with sorting
+    const attrString = Object.entries(attributes)
+        .sort((a, b) => {
+        const orderA = getAttrOrder(a[0]);
+        const orderB = getAttrOrder(b[0]);
+        if (orderA !== orderB)
+            return orderA - orderB;
+        return a[0].localeCompare(b[0]);
+    })
+        .map(([key, value]) => `${key}="${(0, helpers_1.escapeXml)(value)}"`)
+        .join('\n' + indent + '    ');
+    // Decide whether to self-close
+    const hasChildren = node.children.length > 0;
+    // textContent might still be present for some elements if we didn't move it to attribute
+    const hasText = !!node.textContent;
+    // Opening tag
+    let xml = `${indent}<${node.tag}`;
+    if (attrString) {
+        xml += `\n${indent}    ${attrString}`;
+    }
+    if (!hasChildren && !hasText) {
+        xml += '/>';
+        return xml;
+    }
+    xml += '>';
+    // Text content
+    if (hasText) {
+        xml += `\n${childIndent}${(0, helpers_1.escapeXml)(node.textContent)}`;
+    }
+    // Children
+    if (hasChildren) {
+        xml += '\n';
+        for (const child of node.children) {
+            xml += generateElement(child, depth + 1) + '\n';
+        }
+        xml += indent;
+    }
+    else if (hasText) {
+        xml += '\n' + indent;
+    }
+    // Closing tag
+    xml += `</${node.tag}>`;
+    return xml;
+}
+/**
+ * Formats generated XML for better readability
+ */
+function formatGeneratedXml(xml) {
+    // The XML is already formatted by generateElement
+    return xml;
+}

package/dist/index.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Converts React Native code to Android XML layout
+ * @param code - React Native component code (JSX/TSX)
+ * @returns Android XML layout string
+ */
+export declare function convertRNToXML(code: string): string;
+export type { XMLNode, ConvertedStyles, ComponentMapping } from './parser/astTypes';
+export type { ParsedRNTree } from './parser/parseRN';

package/dist/index.js

@@ -0,0 +1,29 @@
+"use strict";
+// Main public API entry
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.convertRNToXML = convertRNToXML;
+const parseRN_1 = require("./parser/parseRN");
+const layoutBuilder_1 = require("./transformer/layoutBuilder");
+const xmlGenerator_1 = require("./generators/xmlGenerator");
+const helpers_1 = require("./utils/helpers");
+/**
+ * Converts React Native code to Android XML layout
+ * @param code - React Native component code (JSX/TSX)
+ * @returns Android XML layout string
+ */
+function convertRNToXML(code) {
+    try {
+        // Reset ID counter for each conversion
+        (0, helpers_1.resetIdCounter)();
+        // Parse React Native code
+        const { rootJSXElement } = (0, parseRN_1.parseRN)(code);
+        // Build XML tree
+        const xmlTree = (0, layoutBuilder_1.buildXmlTree)(rootJSXElement);
+        // Generate XML string
+        const xml = (0, xmlGenerator_1.generateXml)(xmlTree);
+        return xml;
+    }
+    catch (error) {
+        throw new Error(`Conversion failed: ${error.message}`);
+    }
+}

package/dist/parser/astTypes.d.ts

@@ -0,0 +1,35 @@
+/**
+ * Represents an XML node in the Android layout tree
+ */
+export interface XMLNode {
+    /** Tag name (e.g., 'LinearLayout', 'TextView') */
+    tag: string;
+    /** XML attributes (e.g., { 'android:layout_width': 'match_parent' }) */
+    attributes: Record<string, string>;
+    /** Child nodes */
+    children: XMLNode[];
+    /** Text content (for TextView, etc.) */
+    textContent?: string;
+}
+/**
+ * Represents converted React Native styles
+ */
+export interface ConvertedStyles {
+    /** Layout-related attributes */
+    layout: Record<string, string>;
+    /** View-specific attributes */
+    view: Record<string, string>;
+    /** Text-specific attributes */
+    text: Record<string, string>;
+}
+/**
+ * React Native component mapping
+ */
+export interface ComponentMapping {
+    /** React Native component name */
+    rnComponent: string;
+    /** Android XML tag */
+    xmlTag: string;
+    /** Whether it can have children */
+    canHaveChildren: boolean;
+}

package/dist/parser/astTypes.js

@@ -0,0 +1,3 @@
+"use strict";
+// AST type definitions
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/parser/parseRN.d.ts

@@ -0,0 +1,6 @@
+import * as t from "@babel/types";
+export interface ParsedRNTree {
+    ast: t.File;
+    rootJSXElement: t.JSXElement;
+}
+export declare function parseRN(code: string): ParsedRNTree;

package/dist/parser/parseRN.js

@@ -0,0 +1,72 @@
+"use strict";
+// Uses Babel / TS AST to parse RN code
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.parseRN = parseRN;
+const parser_1 = require("@babel/parser");
+const traverse_1 = __importDefault(require("@babel/traverse"));
+const t = __importStar(require("@babel/types"));
+function parseRN(code) {
+    try {
+        // Parse code into AST
+        const ast = (0, parser_1.parse)(code, {
+            sourceType: "module",
+            plugins: ["jsx", "typescript"],
+        });
+        let rootJSXElement = null;
+        // Traverse AST to find first returned JSX element
+        (0, traverse_1.default)(ast, {
+            ReturnStatement(path) {
+                const arg = path.node.argument;
+                if (t.isJSXElement(arg)) {
+                    rootJSXElement = arg;
+                    path.stop();
+                }
+            },
+        });
+        // If no JSX root found, throw explicit error
+        if (!rootJSXElement) {
+            throw new Error("No root JSX element found. Make sure your component returns JSX.");
+        }
+        return { ast, rootJSXElement };
+    }
+    catch (err) {
+        // Re-throw with clean message for CLI / caller
+        throw new Error(`RN Parser Error: ${err.message}`);
+    }
+}

package/dist/transformer/layoutBuilder.d.ts

@@ -0,0 +1,6 @@
+import * as t from '@babel/types';
+import { XMLNode } from '../parser/astTypes';
+/**
+ * Builds an XML tree from a JSX element
+ */
+export declare function buildXmlTree(jsxElement: t.JSXElement): XMLNode;

package/dist/transformer/layoutBuilder.js

@@ -0,0 +1,200 @@
+"use strict";
+// Builds final XML tree
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.buildXmlTree = buildXmlTree;
+const t = __importStar(require("@babel/types"));
+const rnNodeMapper_1 = require("./rnNodeMapper");
+const styleMapper_1 = require("./styleMapper");
+const helpers_1 = require("../utils/helpers");
+/**
+ * Builds an XML tree from a JSX element
+ */
+function buildXmlTree(jsxElement) {
+    const elementName = getElementName(jsxElement.openingElement);
+    const xmlTag = (0, rnNodeMapper_1.mapComponentToXml)(elementName);
+    // Extract attributes and styles
+    const { attributes, styles } = extractAttributes(jsxElement.openingElement);
+    // Map styles to Android attributes
+    const convertedStyles = (0, styleMapper_1.mapStyles)(styles);
+    // Merge all attributes
+    const allAttributes = {
+        ...attributes,
+        ...convertedStyles.layout,
+        ...convertedStyles.view,
+        ...convertedStyles.text,
+    };
+    // Add default layout attributes if not present
+    if (!allAttributes['android:layout_width']) {
+        allAttributes['android:layout_width'] = 'wrap_content';
+    }
+    if (!allAttributes['android:layout_height']) {
+        allAttributes['android:layout_height'] = 'wrap_content';
+    }
+    // Add orientation for layouts
+    if (xmlTag === 'LinearLayout' && !allAttributes['android:orientation']) {
+        const orientation = (0, rnNodeMapper_1.getOrientation)(styles?.flexDirection);
+        allAttributes['android:orientation'] = orientation;
+    }
+    // Generate ID
+    allAttributes['android:id'] = (0, helpers_1.generateId)(elementName.toLowerCase());
+    // Build children and extract text content
+    const children = [];
+    let textContent;
+    // Always process children to extract text content
+    for (const child of jsxElement.children) {
+        if (t.isJSXElement(child)) {
+            // Only add as child if the component can have children
+            if ((0, rnNodeMapper_1.canHaveChildren)(elementName)) {
+                children.push(buildXmlTree(child));
+            }
+        }
+        else if (t.isJSXText(child)) {
+            const text = child.value.trim();
+            if (text) {
+                textContent = text;
+            }
+        }
+        else if (t.isJSXExpressionContainer(child)) {
+            // Handle expressions like {variable}
+            if (t.isStringLiteral(child.expression)) {
+                textContent = child.expression.value;
+            }
+            else {
+                // For other expressions, use placeholder
+                textContent = '{expression}';
+            }
+        }
+    }
+    // Move text content to attribute for TextView and Button
+    if (textContent && (xmlTag === 'TextView' || xmlTag === 'Button')) {
+        allAttributes['android:text'] = textContent;
+        textContent = undefined;
+    }
+    return {
+        tag: xmlTag,
+        attributes: allAttributes,
+        children,
+        textContent,
+    };
+}
+/**
+ * Gets the element name from JSX opening element
+ */
+function getElementName(openingElement) {
+    const name = openingElement.name;
+    if (t.isJSXIdentifier(name)) {
+        return name.name;
+    }
+    return 'View';
+}
+/**
+ * Extracts attributes and styles from JSX opening element
+ */
+function extractAttributes(openingElement) {
+    const attributes = {};
+    let styles = {};
+    for (const attr of openingElement.attributes) {
+        if (t.isJSXAttribute(attr)) {
+            const attrName = t.isJSXIdentifier(attr.name) ? attr.name.name : '';
+            if (attrName === 'style') {
+                styles = extractStyleValue(attr.value);
+            }
+            else if (attrName === 'testID') {
+                // Map testID to contentDescription
+                const value = extractAttributeValue(attr.value);
+                if (value) {
+                    attributes['android:contentDescription'] = value;
+                }
+            }
+            else {
+                // Other attributes - map directly
+                const value = extractAttributeValue(attr.value);
+                if (value) {
+                    attributes[attrName] = value;
+                }
+            }
+        }
+    }
+    return { attributes, styles };
+}
+/**
+ * Extracts the value from JSX attribute value
+ */
+function extractAttributeValue(value) {
+    if (t.isStringLiteral(value)) {
+        return value.value;
+    }
+    if (t.isJSXExpressionContainer(value)) {
+        if (t.isStringLiteral(value.expression)) {
+            return value.expression.value;
+        }
+        if (t.isNumericLiteral(value.expression)) {
+            return value.expression.value.toString();
+        }
+        if (t.isBooleanLiteral(value.expression)) {
+            return value.expression.value.toString();
+        }
+    }
+    return null;
+}
+/**
+ * Extracts style object from JSX attribute value
+ */
+function extractStyleValue(value) {
+    if (t.isJSXExpressionContainer(value)) {
+        if (t.isObjectExpression(value.expression)) {
+            // Parse inline style object
+            const styleObj = {};
+            for (const prop of value.expression.properties) {
+                if (t.isObjectProperty(prop)) {
+                    const key = t.isIdentifier(prop.key) ? prop.key.name : '';
+                    let val;
+                    if (t.isNumericLiteral(prop.value)) {
+                        val = prop.value.value;
+                    }
+                    else if (t.isStringLiteral(prop.value)) {
+                        val = prop.value.value;
+                    }
+                    if (key && val !== undefined) {
+                        styleObj[key] = val;
+                    }
+                }
+            }
+            return styleObj;
+        }
+    }
+    return {};
+}

package/dist/transformer/rnNodeMapper.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Maps a React Native component name to an Android XML tag
+ */
+export declare function mapComponentToXml(componentName: string): string;
+/**
+ * Checks if a component can have children
+ */
+export declare function canHaveChildren(componentName: string): boolean;
+/**
+ * Determines the orientation for a layout based on flexDirection
+ */
+export declare function getOrientation(flexDirection?: string): string;

package/dist/transformer/rnNodeMapper.js

@@ -0,0 +1,48 @@
+"use strict";
+// Maps RN components → XML nodes
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.mapComponentToXml = mapComponentToXml;
+exports.canHaveChildren = canHaveChildren;
+exports.getOrientation = getOrientation;
+/**
+ * Component mapping table
+ */
+const COMPONENT_MAP = [
+    { rnComponent: 'View', xmlTag: 'LinearLayout', canHaveChildren: true },
+    { rnComponent: 'Text', xmlTag: 'TextView', canHaveChildren: false },
+    { rnComponent: 'Image', xmlTag: 'ImageView', canHaveChildren: false },
+    { rnComponent: 'ScrollView', xmlTag: 'ScrollView', canHaveChildren: true },
+    { rnComponent: 'FlatList', xmlTag: 'RecyclerView', canHaveChildren: false },
+    { rnComponent: 'TextInput', xmlTag: 'EditText', canHaveChildren: false },
+    { rnComponent: 'Button', xmlTag: 'Button', canHaveChildren: false },
+    { rnComponent: 'TouchableOpacity', xmlTag: 'FrameLayout', canHaveChildren: true },
+    { rnComponent: 'TouchableHighlight', xmlTag: 'FrameLayout', canHaveChildren: true },
+    { rnComponent: 'Pressable', xmlTag: 'FrameLayout', canHaveChildren: true },
+    { rnComponent: 'SafeAreaView', xmlTag: 'LinearLayout', canHaveChildren: true },
+];
+/**
+ * Maps a React Native component name to an Android XML tag
+ */
+function mapComponentToXml(componentName) {
+    const mapping = COMPONENT_MAP.find(m => m.rnComponent === componentName);
+    return mapping?.xmlTag || 'View';
+}
+/**
+ * Checks if a component can have children
+ */
+function canHaveChildren(componentName) {
+    const mapping = COMPONENT_MAP.find(m => m.rnComponent === componentName);
+    return mapping?.canHaveChildren ?? true;
+}
+/**
+ * Determines the orientation for a layout based on flexDirection
+ */
+function getOrientation(flexDirection) {
+    if (!flexDirection || flexDirection === 'column') {
+        return 'vertical';
+    }
+    if (flexDirection === 'row') {
+        return 'horizontal';
+    }
+    return 'vertical';
+}

package/dist/transformer/styleMapper.d.ts

@@ -0,0 +1,9 @@
+import { ConvertedStyles } from '../parser/astTypes';
+/**
+ * Maps React Native style properties to Android XML attributes
+ */
+export declare function mapStyles(style: any): ConvertedStyles;
+/**
+ * Extracts inline styles from JSX element
+ */
+export declare function extractInlineStyles(styleValue: any): any;

package/dist/transformer/styleMapper.js

@@ -0,0 +1,151 @@
+"use strict";
+// Converts RN styles → Android attrs
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.mapStyles = mapStyles;
+exports.extractInlineStyles = extractInlineStyles;
+const helpers_1 = require("../utils/helpers");
+/**
+ * Maps React Native style properties to Android XML attributes
+ */
+function mapStyles(style) {
+    const result = {
+        layout: {},
+        view: {},
+        text: {},
+    };
+    if (!style || typeof style !== 'object') {
+        return result;
+    }
+    // Layout properties
+    if (style.padding !== undefined) {
+        result.layout['android:padding'] = (0, helpers_1.toDp)(style.padding);
+    }
+    if (style.paddingTop !== undefined) {
+        result.layout['android:paddingTop'] = (0, helpers_1.toDp)(style.paddingTop);
+    }
+    if (style.paddingBottom !== undefined) {
+        result.layout['android:paddingBottom'] = (0, helpers_1.toDp)(style.paddingBottom);
+    }
+    if (style.paddingLeft !== undefined) {
+        result.layout['android:paddingLeft'] = (0, helpers_1.toDp)(style.paddingLeft);
+    }
+    if (style.paddingRight !== undefined) {
+        result.layout['android:paddingRight'] = (0, helpers_1.toDp)(style.paddingRight);
+    }
+    if (style.paddingHorizontal !== undefined) {
+        result.layout['android:paddingLeft'] = (0, helpers_1.toDp)(style.paddingHorizontal);
+        result.layout['android:paddingRight'] = (0, helpers_1.toDp)(style.paddingHorizontal);
+    }
+    if (style.paddingVertical !== undefined) {
+        result.layout['android:paddingTop'] = (0, helpers_1.toDp)(style.paddingVertical);
+        result.layout['android:paddingBottom'] = (0, helpers_1.toDp)(style.paddingVertical);
+    }
+    if (style.margin !== undefined) {
+        result.layout['android:layout_margin'] = (0, helpers_1.toDp)(style.margin);
+    }
+    if (style.marginTop !== undefined) {
+        result.layout['android:layout_marginTop'] = (0, helpers_1.toDp)(style.marginTop);
+    }
+    if (style.marginBottom !== undefined) {
+        result.layout['android:layout_marginBottom'] = (0, helpers_1.toDp)(style.marginBottom);
+    }
+    if (style.marginLeft !== undefined) {
+        result.layout['android:layout_marginLeft'] = (0, helpers_1.toDp)(style.marginLeft);
+    }
+    if (style.marginRight !== undefined) {
+        result.layout['android:layout_marginRight'] = (0, helpers_1.toDp)(style.marginRight);
+    }
+    if (style.marginHorizontal !== undefined) {
+        result.layout['android:layout_marginLeft'] = (0, helpers_1.toDp)(style.marginHorizontal);
+        result.layout['android:layout_marginRight'] = (0, helpers_1.toDp)(style.marginHorizontal);
+    }
+    if (style.marginVertical !== undefined) {
+        result.layout['android:layout_marginTop'] = (0, helpers_1.toDp)(style.marginVertical);
+        result.layout['android:layout_marginBottom'] = (0, helpers_1.toDp)(style.marginVertical);
+    }
+    // Width and Height
+    if (style.width !== undefined) {
+        if (style.width === '100%') {
+            result.layout['android:layout_width'] = 'match_parent';
+        }
+        else {
+            result.layout['android:layout_width'] = (0, helpers_1.toDp)(style.width);
+        }
+    }
+    if (style.height !== undefined) {
+        if (style.height === '100%') {
+            result.layout['android:layout_height'] = 'match_parent';
+        }
+        else {
+            result.layout['android:layout_height'] = (0, helpers_1.toDp)(style.height);
+        }
+    }
+    // View properties
+    if (style.backgroundColor !== undefined) {
+        result.view['android:background'] = (0, helpers_1.convertColor)(style.backgroundColor);
+    }
+    // Text properties
+    if (style.fontSize !== undefined) {
+        result.text['android:textSize'] = (0, helpers_1.toSp)(style.fontSize);
+    }
+    if (style.color !== undefined) {
+        result.text['android:textColor'] = (0, helpers_1.convertColor)(style.color);
+    }
+    if (style.fontWeight !== undefined) {
+        if (style.fontWeight === 'bold' || parseInt(style.fontWeight) >= 600) {
+            result.text['android:textStyle'] = 'bold';
+        }
+    }
+    if (style.textAlign !== undefined) {
+        const alignment = {
+            'left': 'left',
+            'center': 'center',
+            'right': 'right',
+            'justify': 'justify',
+        };
+        result.text['android:textAlignment'] = alignment[style.textAlign] || 'left';
+    }
+    // Flex properties (basic support)
+    if (style.flexDirection !== undefined) {
+        // This will be handled at the layout level in layoutBuilder
+    }
+    if (style.alignItems !== undefined) {
+        const gravity = {
+            'flex-start': 'start',
+            'flex-end': 'end',
+            'center': 'center',
+            'stretch': 'fill',
+        };
+        result.view['android:gravity'] = gravity[style.alignItems] || 'start';
+    }
+    if (style.justifyContent !== undefined) {
+        const gravity = {
+            'flex-start': 'start',
+            'flex-end': 'end',
+            'center': 'center',
+            'space-between': 'space_between',
+            'space-around': 'space_around',
+        };
+        const currentGravity = result.view['android:gravity'] || '';
+        const justifyGravity = gravity[style.justifyContent] || 'start';
+        result.view['android:gravity'] = currentGravity
+            ? `${currentGravity}|${justifyGravity}`
+            : justifyGravity;
+    }
+    return result;
+}
+/**
+ * Extracts inline styles from JSX element
+ */
+function extractInlineStyles(styleValue) {
+    if (!styleValue) {
+        return {};
+    }
+    // Handle object expression (inline styles)
+    if (typeof styleValue === 'object') {
+        return styleValue;
+    }
+    // For now, we'll just return empty object for other cases
+    // In a full implementation, you'd resolve StyleSheet.create references
+    return {};
+}

package/dist/utils/helpers.d.ts

@@ -0,0 +1,29 @@
+/**
+ * Converts camelCase to snake_case
+ */
+export declare function camelToSnakeCase(str: string): string;
+/**
+ * Converts a numeric value to Android dp units
+ */
+export declare function toDp(value: number | string): string;
+/**
+ * Converts a numeric value to Android sp units (for text)
+ */
+export declare function toSp(value: number | string): string;
+export declare function generateId(prefix?: string): string;
+/**
+ * Resets the ID counter (useful for testing)
+ */
+export declare function resetIdCounter(): void;
+/**
+ * Converts hex color to Android color format
+ */
+export declare function convertColor(color: string): string;
+/**
+ * Escapes special XML characters in text content
+ */
+export declare function escapeXml(text: string): string;
+/**
+ * Formats XML with proper indentation
+ */
+export declare function formatXml(xml: string, indentLevel?: number): string;

package/dist/utils/helpers.js

@@ -0,0 +1,88 @@
+"use strict";
+// Utility helper functions
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.camelToSnakeCase = camelToSnakeCase;
+exports.toDp = toDp;
+exports.toSp = toSp;
+exports.generateId = generateId;
+exports.resetIdCounter = resetIdCounter;
+exports.convertColor = convertColor;
+exports.escapeXml = escapeXml;
+exports.formatXml = formatXml;
+/**
+ * Converts camelCase to snake_case
+ */
+function camelToSnakeCase(str) {
+    return str.replace(/[A-Z]/g, (letter) => `_${letter.toLowerCase()}`);
+}
+/**
+ * Converts a numeric value to Android dp units
+ */
+function toDp(value) {
+    if (typeof value === 'string') {
+        return value; // Already a string, assume it's formatted
+    }
+    return `${value}dp`;
+}
+/**
+ * Converts a numeric value to Android sp units (for text)
+ */
+function toSp(value) {
+    if (typeof value === 'string') {
+        return value;
+    }
+    return `${value}sp`;
+}
+/**
+ * Generates a unique Android view ID
+ */
+let idCounter = 0;
+function generateId(prefix = 'view') {
+    return `@+id/${prefix}_${++idCounter}`;
+}
+/**
+ * Resets the ID counter (useful for testing)
+ */
+function resetIdCounter() {
+    idCounter = 0;
+}
+/**
+ * Converts hex color to Android color format
+ */
+function convertColor(color) {
+    // If it's already a hex color, ensure it has # prefix
+    if (color.startsWith('#')) {
+        return color;
+    }
+    // Handle named colors (basic support)
+    const namedColors = {
+        'black': '#000000',
+        'white': '#FFFFFF',
+        'red': '#FF0000',
+        'green': '#00FF00',
+        'blue': '#0000FF',
+        'transparent': '#00000000',
+    };
+    return namedColors[color.toLowerCase()] || color;
+}
+/**
+ * Escapes special XML characters in text content
+ */
+function escapeXml(text) {
+    return text
+        .replace(/&/g, '&')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+        .replace(/"/g, '&quot;')
+        .replace(/'/g, '&apos;');
+}
+/**
+ * Formats XML with proper indentation
+ */
+function formatXml(xml, indentLevel = 0) {
+    const indent = '  '.repeat(indentLevel);
+    return xml
+        .split('\n')
+        .map(line => line.trim() ? indent + line : '')
+        .join('\n');
+}

package/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "react-native-to-xml-converter",
+  "version": "0.0.1",
+  "description": "A converter from react native to xml code",
+  "keywords": [
+    "react-native",
+    "xml",
+    "converter",
+    "android",
+    "development",
+    "hybrid"
+  ],
+  "homepage": "https://github.com/Adhidevudayakumar/react-native-to-xml-converter#readme",
+  "bugs": {
+    "url": "https://github.com/Adhidevudayakumar/react-native-to-xml-converter/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Adhidevudayakumar/react-native-to-xml-converter.git"
+  },
+  "license": "ISC",
+  "author": "Adhidev Udayakumar",
+  "main": "dist/index.js",
+  "bin": {
+    "rn-to-xml": "dist/cli/index.js"
+  },
+  "scripts": {
+    "build": "tsc",
+    "dev": "ts-node src/cli/index.ts",
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "prepublishOnly": "npm run build"
+  },
+  "devDependencies": {
+    "@types/babel__traverse": "^7.28.0",
+    "@types/node": "^20.0.0",
+    "ts-node": "^10.9.2",
+    "tsup": "^8.5.1",
+    "typescript": "^5.9.3"
+  },
+  "dependencies": {
+    "@babel/parser": "^7.28.6",
+    "@babel/traverse": "^7.28.6",
+    "@babel/types": "^7.28.6",
+    "fs": "^0.0.1-security",
+    "open": "^11.0.0"
+  }
+}