Math Symbols For React Native

In Jan 2018, At Ideaboard Technologies.

As an ed-tech startup, we wanted to improve the learning experience of every student in India. we started to build a mobile application so it could be easily accessible to any student.

IdeaBoard App (react native)

Having time as a primary constraint and also because of our previous experience with react we went with react native over android.


Math symbols are a important part of a educational content based applications. Similarly we too had to solve this particular problem. Saving data in TeX (\alpha) format and converting to MathML ( θ ) in views is a widely used solution for handling math.

After quite some research we ended up with two libraries that support this type of conversion on client applications

  1. MathJax
  2. KaTeX

But sadly neither of these are directly supported on react native. So we had to indirectly use WebView for rendering using these libraries.

MathView is one library you can look into that has both these engines integrated into them.

MathJax

It is beautiful and is also intelligent in the way it renders those symbols.

In short, it is aware of its surrounding and careful in placing each symbol at the ideal place. But because of which it has to do more processing and eventually at a slower pace. Also the library is quite heavy itself in terms of size.

KaTeX

KaTeX was built by Khan Academy to overcome the drawbacks of MathJax which was the speed at which it was rendering.

Unlike MathJax, basic symbols need not always be so beautiful and analysed before placing each one in position. It just has look good and solve the problem of having symbols which KaTeX is so good at doing. Check this rendering speed comparison MathJax vs KaTeX.

It is really fast as you could see almost 10x and also smaller in size. But it does not really support all symbols. A few symbols aren’t available yet.


Luckily both of them support inline rendering.

Common Problems

setWebViewClient(new WebViewClient() {
@Override
public void onPageFinished(WebView view, String url) {
loadUrl("var boundary = document.body.getBoundingClientRect();
javascript:MyApp.resize(boundary.height)");
super.onPageFinished(view, url);
}
});
this.addJavascriptInterface(this, "MyApp");@JavascriptInterface
public void resize(final float height) {
runOnUiThread(new Runnable() {
@Override
public void run() {
setLayoutParams(
new LinearLayout.LayoutParams(
getResources().getDisplayMetrics().widthPixels,
(int) (height *
getResources().getDisplayMetrics().density)
));
WritableMap event = Arguments.createMap();
event.putString("message", height + "");
ReactContext reactContext = (ReactContext)getContext();
reactContext.getJSModule(RCTEventEmitter.class)
.receiveEvent(getId(), "sizeChange", event);
}
});
}

Conclusion

With MathJax3, solving server side rendering things could get even more interesting. But still looking for a direct support from one of these libraries on react native instead of the WebView solution.

Age of Awareness

Stories providing creative, innovative, and sustainable changes to the education system

Gautham Thiyagarajan

Written by

Technical Lead — Ideaboard Technologies

Age of Awareness

Stories providing creative, innovative, and sustainable changes to the education system

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade