React Native component to display mathematics in HTML using MathJax without WebView

A react native component used to easily display and handle mathematics (TeX or LaTeX) in html. The library does not use Web View.

Only TeX or LaTeX is converted to svg. HTML is converted to native component

Installation

#### With react-native-cli
``bash
$ yarn add react-native-mathjax-html-to-svg
`
`bash
$ yarn add react-native-svg
`
`bash
$ cd ios && pod install
`
#### With expo-cli
`bash
$ expo install react-native-mathjax-html-to-svg
`
`bash
$ expo install react-native-svg
`

Usage

Attention only accepts in-line mathematics. see
`jsx
import { MathJaxSvg } from 'react-native-mathjax-html-to-svg';
...

fontSize={16}
color="red"
fontCache={true}
>
{'$$4sen(α)cos^2(α/2)$$'}

`

Using TeX or LaTeX with html

`jsx
import { MathJaxSvg } from 'react-native-mathjax-html-to-svg';

return (
...

fontSize={16}
color="#000000"
fontCache={true}
>
{

When \\(a \\ne 0\\), there are two solutions to \\(ax^2 + bx + c = 0\\) and they are $$x = {-b \\pm \\sqrt{b^2-4ac} \\over 2a}.$$

In-line Mathematics

Finally, while display equations look good for a page of samples, the ability to mix math and text in a paragraph is also important.
This expression \\(\\sqrt{3x-1}+(1+x)^2\\) is an example of an inline equation.As you see, MathJax equations can be used this way as well, without unduly disturbing the spacing between lines.

}

...
);
`

$3

| Props | Default | Description |
| ----------------- | -------------------------- | --------------------------------------- |
| fontSize | 14 | Font size to display formula. Note that it will apply to regular text. Regular text accept inline style if html has inline style |
| color | "#000000" | Color of formula to display. Note that it will apply to regular text. Regular text accept inline style if html has inline style |
| fontCache | false | MathJax will cache font paths on an express-by-expression (each expression has its own cache within the SVG image itself), which makes the SVG self-contained, but still allows for some savings if characters are repeated |
| style | { flexDirection: 'row', flexWrap: 'wrap', alignItems: 'center', flexShrink: 1 } ` | Container style |


[comment]: <> (## Example)

[comment]: <> ([https://github.com/railsjack/demo-app-for-mathjax](https://github.com/railsjack/demo-app-for-mathjax))