react-native-latex-js

A React Native component for rendering LaTeX content using LaTeX.js and WebView.

Features

• ✅ Render LaTeX formulas and documents in React Native
• ✅ Uses LaTeX.js for accurate LaTeX rendering
• ✅ No CDN dependency - LaTeX.js is bundled inline
• ✅ Works offline
• ✅ Supports custom styling (colors, font size, custom CSS)
• ✅ TypeScript support
• ✅ Cross-platform (iOS & Android)
• ✅ Easy to use
• ✅ Callback support for load and error events

Installation

First, install the package:

npm install react-native-latex-js

Then install the required peer dependency:

npm install react-native-webview

For iOS, run:

cd ios && pod install

Note: The package automatically bundles LaTeX.js during installation, so no internet connection is required at runtime.

Usage

Basic Example

import React from 'react';
import { View, StyleSheet } from 'react-native';
import LatexView from 'react-native-latex-js';

export default function App() {
  return (
    <View style={styles.container}>
      <LatexView 
        latex="E = mc^2" 
        fontSize={18}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
  },
});

Advanced Example

import React from 'react';
import { View, StyleSheet, ScrollView } from 'react-native';
import LatexView from 'react-native-latex-js';

export default function App() {
  const complexLatex = `
\\documentclass{article}
\\begin{document}

\\section{Introduction}
This is a LaTeX document rendered in React Native.

\\subsection{Math Examples}

Einstein's famous equation:
\\[ E = mc^2 \\]

Quadratic formula:
\\[ x = \\frac{-b \\pm \\sqrt{b^2 - 4ac}}{2a} \\]

\\subsection{Lists}
\\begin{itemize}
  \\item First item
  \\item Second item
  \\item Third item
\\end{itemize}

\\end{document}
  `;

  return (
    <ScrollView style={styles.container}>
      <LatexView 
        latex={complexLatex}
        fontSize={16}
        backgroundColor="#f5f5f5"
        textColor="#333333"
        onLoad={() => console.log('LaTeX rendered successfully')}
        onError={(error) => console.error('LaTeX error:', error)}
        customCSS={`
          .section-title {
            color: blue;
          }
        `}
      />
    </ScrollView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
});

Inline Math Example

import React from 'react';
import { View, StyleSheet } from 'react-native';
import LatexView from 'react-native-latex-js';

export default function MathFormulas() {
  return (
    <View style={styles.container}>
      <LatexView 
        latex="The integral $\\int_0^\\infty e^{-x^2} dx = \\frac{\\sqrt{\\pi}}{2}$" 
        fontSize={20}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
  },
});

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | latex | string | required | LaTeX content to render | | customCSS | string | '' | Custom CSS styles to apply | | backgroundColor | string | '#ffffff' | Background color for the WebView | | textColor | string | '#000000' | Text color | | fontSize | number | 16 | Font size in pixels | | onLoad | () => void | undefined | Callback when rendering is complete | | onError | (error: string) => void | undefined | Callback when an error occurs | | webViewProps | object | {} | Additional props to pass to WebView |

How It Works

This component:

1. Takes LaTeX content as input
2. Bundles LaTeX.js library inline (no CDN, works offline)
3. Creates an HTML page with embedded LaTeX.js code
4. Renders the HTML in a WebView
5. LaTeX.js parses and converts LaTeX to HTML/CSS
6. The result is displayed in your React Native app

Note: LaTeX.js is bundled directly into the package at build time, ensuring offline functionality and no external dependencies.

LaTeX Support

This component supports most LaTeX features provided by LaTeX.js, including:

• Math formulas (inline and display)
• Document structure (sections, subsections)
• Lists (itemize, enumerate)
• Tables
• Text formatting (bold, italic, underline)
• And more...

For full LaTeX support details, see the LaTeX.js documentation.

Limitations

• Performance may vary with very large LaTeX documents
• Some advanced LaTeX features may not be supported by LaTeX.js
• Bundle size includes LaTeX.js library (~600KB total)

TypeScript

This package is written in TypeScript and includes type definitions.

import LatexView, { LatexViewProps } from 'react-native-latex-js';

License

MIT

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

Credits

• LaTeX.js by Michael Brade
• react-native-webview

Author

Omer Ulusoy