software-mansion / software-mansion/react-native-enriched-html

[Feature request] Native LaTeX / Math Formula Support

Open
#439 4 comments 2 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

enhancement
Dominant language
C
Stars
1.4k
Forks
66
Avg merge
4d 19h
Merged PRs (30d)
11

Description

Is your feature request related to a problem? Please describe.
Currently, there is no way to render mathematical formulas or LaTeX expressions within the EnrichedTextInput. Applications like educational platforms, scientific note-taking apps, or any tool requiring math notation must rely on external WebViews or SVG generation. These workarounds often lead to performance issues, styling inconsistencies, and a poor user experience (e.g., blurry rendering, layout shifts, and lack of native editing feel).

Describe the solution you'd like
I propose adding native LaTeX rendering support to react-native-enriched. This would allow users to insert and edit mathematical formulas as first-class citizens within the editor.

Specifically, the feature should include:

  1. Inline Math: Support for formulas that appear within a line of text, delimited by a configurable character (e.g., $...$). For example: The quadratic formula is $x = \frac{-b \pm \sqrt{b^2-4ac}}{2a}$.
  2. Display (Block) Math: Support for standalone formulas on their own line, delimited by another configurable pattern (e.g., $$...$$).
  3. Native Rendering Engine: The core requirement is that rendering must be native (using libraries like SwiftMath for iOS and AndroidMath for Android), not a WebView. This ensures high performance, sharp rendering at all scales, and correct line height calculation within the text flow.
  4. Style Detection & Toggling: Similar to existing inline styles, the editor should be able to detect if the cursor is inside a math block and potentially provide a toggleMath method on the ref. This would allow creating a button to wrap selected text or the current block in math delimiters.
  5. Standalone Math Component (Optional but Highly Desirable) : As discussed in a related conversation, it would be incredibly powerful to also export the underlying native renderer as a separate component (e.g., or ). This would allow developers to use the same high-quality, native math rendering outside the editor, for example, in flashcards, question prompts, or rendered notes.

Describe alternatives you've considered

  • WebView-based renderers: Suffer from performance overhead, communication bridge latency, and often don't feel integrated with the native text.
  • SVG generation: Requires server-side processing or heavy client-side libraries, is not editable, and can be slow to generate and render.

Additional context
This feature is frequently requested in the React Native ecosystem, as highlighted in a recent discussion here.

  • Implementing this natively would make react-native-enriched a definitive solution for rich text editing in React Native, surpassing many existing libraries.
  • I would be happy to help test this feature or provide feedback on a potential API design.

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by tracing the EnrichedTextInput implementation and its existing inline-style and ref APIs, then review the proposed SwiftMath and AndroidMath integration points. Define the scope for configurable inline and display delimiters, cursor detection and toggling, native rendering, and the optional standalone MathView or LaTeX component. Done means formulas render and support the requested editing behavior natively on iOS and Android.

Written by the indexing model from the issue text.

Assessment

Tech stack
latex, react-native
Domain
mobile
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Quiet
Clarity
Needs clarification
Newbie friendliness
28/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.