React Native Math LaTeX

A powerful and lightweight React Native component to render complex LaTeX, MathML, and HTML content seamlessly using KaTeX and WebView.

This package is the React Native counterpart to @caporeista/math-latex. It allows you to display beautifully typeset mathematical formulas mixed with standard HTML directly in your React Native applications.

Features

• Render LaTeX and HTML: Mix mathematical formulas ($E=mc^2$) and HTML tags (<p>Hello</p>) in a single string.
• Powered by KaTeX: Utilizes the fast and popular KaTeX library for high-quality math rendering.
• WebView Based: Uses react-native-webview to reliably render complex web content inside your native app.
• Simple API: A single component with a straightforward API.

Installation

This package has peer dependencies, which you need to install in your project:

yarn add @caporeista/reactnative-math-latex react-native-webview
# or
npm install @caporeista/reactnative-math-latex react-native-webview

Usage

Import the component and wrap your content string with it.

import React from 'react';
import { SafeAreaView, StyleSheet } from 'react-native';
import ReactNativeMathLatex from '@caporeista/reactnative-math-latex';

const App = () => {
  const content = `
    This component can render inline math like $x^2 + y^2 = z^2$. 
    <p>It also supports block math:</p>
    $$\frac{-b \pm \sqrt{b^2-4ac}}{2a}$$
    And of course, <b>any HTML</b> tags you need.
  `;

  return (
    <SafeAreaView style={styles.container}>
      <ReactNativeMathLatex>
        {content}
      </ReactNativeMathLatex>
    </SafeAreaView>
  );
};

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

export default App;

How It Works

The component parses the input string, renders the mathematical parts using KaTeX, and combines everything into a single HTML document. This document is then displayed inside a WebView, ensuring consistent and reliable rendering across platforms.

Support

If you find this project helpful, consider supporting me with a coffee!