CODEWITHSUNDEEP
react-native
suman j
suman j

Reputation: 6980

How to display Math equations in React Native View

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 be bad as MathJax loading will take time for each WebView component. How do we render Math equations on React Native Views (non-WebView)?

Upvotes: 23

Views: 6600

Answers (2)

hakki
hakki

Reputation: 6527

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}
/>

Upvotes: 0

Oleksandr Cherniavenko
Oleksandr Cherniavenko

Reputation: 1575

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 )

Upvotes: 1

Related Questions