Render LaTeX code in React Native Webview
npm install react-native-mathjax-webview
Render mathematical notation written in LaTeX or MathML markup in React Native Webview with auto height adjustment. This repository is forked and customized from the react-native-mathjax repository.
Thanks to Calvin Kei for building the base code.
1. yarn add react-native-mathjax-webview or npm install react-native-mathjax-webview --save
2. Install react-native-webview
`` This is an equationjavascript`
html={
"$sum_{i=0}^n i^2 = \frac{(n^2+n)(2n+1)}{6}$
}
// MathJax config option
mathJaxOptions={{
messageStyle: "none",
extensions: ["tex2jax.js"],
jax: ["input/TeX", "output/HTML-CSS"],
tex2jax: {
inlineMath: [
["$", "$"],
["\\(", "\\)"],
],
displayMath: [
["$$", "$$"],
["\\[", "\\]"],
],
processEscapes: true,
},
TeX: {
extensions: [
"AMSmath.js",
"AMSsymbols.js",
"noErrors.js",
"noUndefined.js",
],
},
}}
{...WebViewProps}
/>
If you need to subscribe the dimensions (width, height) of the webview, you can use onMessage props. See the example below:
`tsx
const handleMessage = (event: any) => {
try {
const data = JSON.parse(event.nativeEvent.data)
if (data.height && data.height > 0) {
setHeight(data.height)
}
if (data.width && data.width > 0) {
setWidth(data.width)
}
} catch (error) {
console.error('Failed to parse message:', error, 'Raw data:', event.nativeEvent.data)
}
}
height: height || 85,
width: width || Dimensions.get('window').width,
maxWidth: '100%',
backgroundColor: 'transparent',
}}
onMessage={handleMessage}
mathJaxOptions={mmlOptions}
html={htmlContent}
/>
``