How to display Math equations in React Native View

Question

How to render Math equations in React Native Views? For web applications, we can use LaTex or MathJax solutions. But React Native renders native components. Using WebView will b

Answer 1

MathJax let you use render SVG so you may try to generate SVG and then render it inside of React Native ( I am pretty sure that it won't work out of the box, but at least it is a way )

Answer 2

There is a library for MathJax in React Native. Library does not work properly sometimes, but you should try it. https://github.com/calvinkei/react-native-mathjax#readme

Usage

<MathJax
  // HTML content with MathJax support
  html={'$\sum_{i=0}^n i^2 = \frac{(n^2+n)(2n+1)}{6}$<br><p>This is an equation</p>'}
  // 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']
    }
  }}
  {...WebView props}
/>