Skip to content

README.md

Latest commit

 

History

History
210 lines (164 loc) · 5.27 KB

README.md

File metadata and controls

210 lines (164 loc) · 5.27 KB

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`

npm install -g react-native-to-xml-converter

Local Installation

npm install --save-dev react-native-to-xml-converter

Using npx (No Installation Required)

npx react-native-to-xml-converter <input-file>

Usage

Basic Usage

# 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):

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 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:

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

# 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