--- name: react-native-latex-math description: Use when rendering inline LaTeX math (`$...$` or `$$...$$`) inside React Native / Expo Text components, especially when math is mixed with regular text mid-sentence. Triggers include — math expressions showing as raw text in the app, KaTeX/MathJax integration questions, exam apps with chemistry/physics formulas, "how do I render LaTeX in React Native", inline equations in Bengali/Arabic/Chinese question text, dollar-sign math delimiters appearing literal in mobile UI but rendering correctly on the web frontend. --- # Rendering LaTeX Math in React Native (KaTeX in a WebView) ## TL;DR — the pattern that actually works Build a `` component that takes `value: string`. Inside: 1. **Fast path**: if the string has no `$`, return a plain RN ``. Zero WebView cost for plain content. 2. **Slow path**: render the entire string in **one** small `` containing ``-loaded KaTeX + `auto-render.min.js`. The body is the original string with HTML-escape applied **outside** the `$...$` math segments. KaTeX auto-render scans the body and replaces `$...$` inline. HTML's natural flow handles mid-sentence wrapping. 3. **Height sync**: WebView body posts `document.body.scrollHeight` back via `postMessage`; RN updates the WebView height from state. 4. **Critical script ordering**: define `renderAndReport()` in an inline ` `; } /** * HTML-escape characters outside `$...$` and `$$...$$` math segments. Math * segments must pass through untouched so KaTeX can parse them. Unmatched `$` * is treated as literal text. Without this, user content can HTML-inject. */ function escapeOutsideMath(input: string): string { let i = 0; let out = ''; while (i < input.length) { if (input[i] === '$') { const isDisplay = input[i + 1] === '$'; const open = isDisplay ? '$$' : '$'; const start = i + open.length; let j = start; let found = -1; while (j < input.length) { if (input[j] === '\\' && input[j + 1] === '$') { j += 2; continue; } if (isDisplay) { if (input[j] === '$' && input[j + 1] === '$') { found = j; break; } } else { if (input[j] === '$') { found = j; break; } } j++; } if (found === -1) { out += escapeHtml('$'); i++; } else { out += input.slice(i, found + open.length); i = found + open.length; } } else { const next = input.indexOf('$', i); const end = next === -1 ? input.length : next; out += escapeHtml(input.slice(i, end)); i = end; } } return out; } function escapeHtml(s: string): string { return s .replace(/&/g, '&') .replace(//g, '>') .replace(/"/g, '"') .replace(/'/g, '''); } ``` ## Wiring it in ```tsx // QuestionCard.tsx (or any text component that may contain math) import MathText from './MathText'; // Before: // {question.text} // After (inside a wrapper because MathText returns a WebView when math is present): ``` Apply at every text node that may contain `$`: - Question text - Each answer option - Explanation/review text - Any user-generated content with formulas ## The script ordering bug — read this first if math doesn't render **Symptom**: WebView mounts, doesn't error, KaTeX CSS is loaded, but the body shows raw `$...$` text. The math never renders. **Cause**: This pattern (broken): ```html ``` When the browser parses the first `