RaTeX

A lightweight React Native LaTeX parser and renderer that converts LaTeX math strings into native, responsive components. No WebViews, no custom fonts -- just pure React Native View and Text elements.

Why RaTeX?

Most LaTeX rendering solutions for React Native rely on WebViews or MathJax embeds, which are slow to load, hard to style, and break the native feel of your app. RaTeX takes a different approach: it parses LaTeX into an AST and renders it using standard React Native primitives, giving you fast, inline math that looks and feels native.

Features

• Native rendering with View and Text components (no WebView)
• Fractions, square roots, nth roots
• Superscripts and subscripts (including combined)
• Summation, product, and integral operators with upper/lower limits
• Matrices with parentheses, brackets, or plain delimiters
• Auto-scaling delimiters (\left, \right)
• Full Greek alphabet (lowercase, uppercase, and variants)
• 100+ LaTeX symbol mappings (operators, relations, arrows, set theory, logic)
• Accent marks (\hat, \bar, \vec, \tilde, \dot, \ddot)
• Inline \text{} blocks with natural word wrapping
• Responsive font scaling -- all dimensions proportional to a single fontSize prop
• Memoized rendering for performance
• Full TypeScript support with exported types

Installation

npm install ratex-parser
# or
yarn add ratex-parser

Peer Dependencies

RaTeX requires react and react-native, which you should already have in any React Native project.

{
  "react": "*",
  "react-native": "*"
}

No additional setup or linking is required.

Quick Start

import RaTeX from 'ratex-parser';

export default function App() {
  return (
    <RaTeX latex="\frac{-b \pm \sqrt{b^2 - 4ac}}{2a}" fontSize={20} />
  );
}

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | latex | string | required | The LaTeX string to render | | fontSize | number | 16 | Base font size in pixels. All internal dimensions scale from this value. | | color | string | '#000' | Color for text and lines (fraction bars, radical signs, etc.) | | style | ViewStyle | undefined | Optional style applied to the outer container View |

Usage Examples

Basic Math

<RaTeX latex="x^2 + y^2 = z^2" />

Fractions

<RaTeX latex="\frac{x^2 + 3}{x + 1}" fontSize={24} />

Fractions can be nested:

<RaTeX latex="\frac{1}{1 + \frac{1}{1 + \frac{1}{x}}}" />

Square Roots

// Simple square root
<RaTeX latex="\sqrt{x^2 + y^2}" />

// Nth root
<RaTeX latex="\sqrt[3]{27}" />

Superscripts and Subscripts

<RaTeX latex="x_i^2 + y_j^2" />

Summation, Products, and Integrals

<RaTeX latex="\sum_{i=1}^{n} i^2" />
<RaTeX latex="\prod_{i=1}^{n} x_i" />
<RaTeX latex="\int_{0}^{\infty} e^{-x} dx" />

Matrices

// With parentheses
<RaTeX latex="\begin{pmatrix} a & b \\ c & d \end{pmatrix}" />

// With square brackets
<RaTeX latex="\begin{bmatrix} 1 & 0 \\ 0 & 1 \end{bmatrix}" />

// Plain (no delimiters)
<RaTeX latex="\begin{matrix} a & b \\ c & d \end{matrix}" />

Auto-Scaling Delimiters

<RaTeX latex="\left( \frac{a}{b} \right)" />
<RaTeX latex="\left[ \sum_{i=1}^{n} x_i \right]" />
<RaTeX latex="\left\{ x \in \mathbb{R} \right\}" />

Greek Letters

<RaTeX latex="\alpha + \beta = \gamma" />
<RaTeX latex="\Delta x \cdot \Delta p \geq \frac{\hbar}{2}" />

Accents

<RaTeX latex="\hat{x} + \bar{y} + \vec{v}" />
<RaTeX latex="\tilde{n} \dot{x} \ddot{x}" />

Mixed Text and Math

<RaTeX latex="\text{The area is } A = \pi r^2" />

Styling

<RaTeX
  latex="E = mc^2"
  fontSize={32}
  color="#2563eb"
  style={{ padding: 16, backgroundColor: '#f0f9ff', borderRadius: 8 }}
/>

Supported LaTeX Commands

Structures

| Command | Description | |---------|-------------| | \frac{num}{den} | Fraction | | \sqrt{x} | Square root | | \sqrt[n]{x} | Nth root | | \sum_{lower}^{upper} | Summation | | \prod_{lower}^{upper} | Product | | \int_{lower}^{upper} | Integral | | \oint_{lower}^{upper} | Contour integral | | x^{sup} | Superscript | | x_{sub} | Subscript | | \text{...} | Text mode | | \left( \right) | Auto-scaling delimiters | | \begin{matrix} | Plain matrix | | \begin{pmatrix} | Parenthesized matrix | | \begin{bmatrix} | Bracketed matrix |

Greek Letters

Lowercase: \alpha \beta \gamma \delta \epsilon \zeta \eta \theta \iota \kappa \lambda \mu \nu \xi \pi \rho \sigma \tau \upsilon \phi \chi \psi \omega

Variants: \varepsilon \vartheta \varpi \varrho \varsigma \varphi

Uppercase: \Gamma \Delta \Theta \Lambda \Xi \Pi \Sigma \Upsilon \Phi \Psi \Omega

Operators and Relations

| Category | Commands | |----------|----------| | Binary operators | \times \div \pm \mp \cdot \ast \star | | Relations | \leq \geq \neq \approx \equiv \sim \propto | | Arrows | \rightarrow \leftarrow \Rightarrow \Leftarrow \leftrightarrow | | Set theory | \in \notin \subset \cup \cap | | Logic/calculus | \forall \exists \nabla \partial \infty |

Accents

\hat{x} \bar{x} \vec{x} \tilde{x} \dot{x} \ddot{x}

Spacing

| Command | Size | Description | |---------|------|-------------| | \, | 3 units | Thin space | | \> | 4 units | Medium-thick space | | \; | 5 units | Medium space | | \! | -3 units | Negative thin space | | \quad | 18 units | Quad space | | \qquad | 36 units | Double quad space |

Escaped Characters

\{ \} \_ \^ \\ \# \$ \% \& \~

Advanced: Using the Parser Directly

RaTeX also exports the tokenize and parse functions if you need to work with the AST directly:

import { tokenize, parse } from 'ratex-parser';

const tokens = tokenize('\\frac{1}{2}');
const ast = parse(tokens);
console.log(JSON.stringify(ast, null, 2));

This can be useful for syntax validation, custom rendering, or building tools on top of the parser.

How It Works

RaTeX uses a 4-stage pipeline:

LaTeX String --> Tokenize --> Parse --> Segment --> Render

1. Tokenize -- The lexer scans the LaTeX string and produces a stream of typed tokens (commands, braces, characters, etc.)
2. Parse -- A recursive descent parser builds an AST from the token stream, creating typed nodes for each LaTeX construct (FracNode, SqrtNode, etc.)
3. Segment -- The layout engine classifies nodes as inline (text, symbols, accents) or block (fractions, matrices, roots) and groups consecutive inline nodes for efficient rendering with natural word wrapping
4. Render -- A central dispatcher maps each AST node type to a specialized React Native component, recursively rendering the full expression tree

All dimensions (script sizes, fraction bar thickness, operator sizing, padding) scale proportionally from the fontSize prop, so expressions look correct at any size.

TypeScript

RaTeX is written in TypeScript and ships with full type declarations. The following types are exported:

import type { RaTeXProps } from 'ratex-parser';

License

MIT