React Native component for rendering mathematical expressions in HTML using the power of MathJax without WebView

An essential React Native component for rendering mathematical expressions in HTML using the power of MathJax. Harness the capabilities of MathJax effortlessly. Supercharge your app with effortless MathJax functionality, all without the need for react-native-webview.

With this component, you can convert TeX or LaTeX equations to SVG and HTML to native components effortlessly.

Installation

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

Usage


Please note that this component only accepts in-line mathematics. Learn more
`jsx
import { MathJaxSvg } from 'react-native-mathjax-text-svg';
...

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

`


Using TeX or LaTeX with html


`jsx
import { MathJaxSvg } from 'react-native-mathjax-text-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 | The font size for displaying the formula. Note that it will also apply to regular text. Regular text can accept inline styles if HTML has inline styles. |
| color | "#000000" | The color of the formula to display. Note that it will also apply to regular text. Regular text can accept inline styles if HTML has inline styles. |
| fontCache | false | MathJax will cache font paths on an expression-by-expression basis (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))