How to display MathML equation in React Native app using MathJax? - reactjs

Question

I tried to display MathML equation in my react native app using MathJax, but it is not showing. In the code below, the equation is not displayed, only "Helloworld".
import React, {Component} from 'react';
import {Text, View} from 'react-native';
import MathJax from 'react-native-mathjax'
export default class TipsAndTricksScreen extends Component {
static navigationOptions = {
title: 'Tips And Tricks',
};
render() {
return (
<View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
<MathJax math={String.raw`<math xmlns="http://www.w3.org/1998/Math/MathML"><msqrt><mn>2</mn><mfrac bevelled="true"><mn>7</mn><mn>7</mn></mfrac></msqrt><mo>+</mo><mfrac><mn>5</mn><mn>8</mn></mfrac></math>this is just a string`} />
<Text>Helloworld</Text>
</View>
);
}
}

Answer 1

It seems quite straight forward to implement the dependency. Looking at the source code of the dependency it looks like it is just a wrapper around a Webview, so just be aware that it will probably only work if you are online.
The dependency has some default options already set for MathJax and you can pass further options using the mathJaxOptions prop. So if we pass
{
jax: ['input/MathML']
}
then it should tell MathJax that you are passing MathML as a input.
So here is a simple component that uses react-native-mathjax
import React, { Component } from 'react';
import { View, Text } from 'react-native';
import MathJax from 'react-native-mathjax';
const mmlOptions = {
jax: ['input/MathML'],
};
class MathView extends Component {
render () {
return (
<View style={{flex:1}}>
<MathJax
mathJaxOptions={mmlOptions}
html={'<math xmlns="http://www.w3.org/1998/Math/MathML"><msqrt><mn>2</mn><mfrac bevelled="true"><mn>4</mn><mn>7</mn></mfrac></msqrt><mo>+</mo><mfrac><mn>5</mn><mn>8</mn></mfrac></math> this is just a string'}
/>
</View>
);
}
}
export default MathView;
This would give you something like this
That should be enough to get you started. You can pass additional options via the mathJaxOptions prop. You just need to look at the MathJax documentation for all the different things that you can pass.
Caveat
On Android it doesn't look like the Android WebView can render MathML, there maybe a configuration that will make it work but I don't know it, however the Android WebView does render LaTex, so perhaps converting your MathML to LaTex could be a fallback option for you.

Answer 2

If you want to render MathML in React Native, you'll need some extensions and of course input and output method. After some research, I found this solution particular for MML to HTML:
<MathJax
html={`<math xmlns="http://www.w3.org/1998/Math/MathML"><msqrt><mn>2</mn><mfrac bevelled="true"><mn>7</mn><mn>7</mn></mfrac></msqrt><mo>+</mo><mfrac><mn>5</mn><mn>8</mn></mfrac></math>this is just a string`}
mathJaxOptions={{messageStyle: 'none',
extensions:
['mml2jax.js','MathMenu.js','MathZoom.js','AssistiveMML.js','a11y/accessibility-
menu.js',],
jax: ['input/MathML', 'output/CommonHTML'],
tex2jax: {
inlineMath: [['$', '$'], ['\\(', '\\)']],
displayMath: [['$$', '$$'], ['\\[', '\\]']],
processEscapes: true,},
TeX: {extensions:['AMSmath.js','AMSsymbols.js','noErrors.js','noUndefined.js'],},}} />