software-mansion / software-mansion/react-native-enriched-html
[Feature request] Native LaTeX / Math Formula Support
Nobody has claimed this yet.
- 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:
- 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}$.
- Display (Block) Math: Support for standalone formulas on their own line, delimited by another configurable pattern (e.g., $$...$$).
- 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.
- 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.
- 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
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- 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