Math view for react-native
npm install @searchmoe/react-native-math-view
A react native view used to easily display and handle math.
The library doesn't use WebView.
| MathView Example | Lists Example | MathText |
| --- | --- | --- |
| !Runner | !Lists Example |
|
npm install --save react-native-math-view OR yarn add react-native-math-view
react-native > 0.59
#### iOS:
Install react-native-svg
``bash`
$ cd ios && pod install
#### Expo
Expo doesn't support native modules.
You can use this library with react-native-svg (performance suffers a bit), see #19.
#### Errors during installation:
1. Upgrade typescriptcompileMathjax
1. If you're getting an error regarging you can disregard it as long as compiled mathjax successfully was printed to the console. If you're using yarn it's probable no logging will show.mathjax-full
1. To be sure everything is compiled properly run the following command from the node_module directory of your project:`bash`
npm run compiletypescript errors can be safely disregareded.
see also #16
`tsx
import MathView, { MathText } from 'react-native-math-view';
return (
...
/>
/>
renderError={({ error }) =>
/>
}
direction="ltr"
CellRendererComponent={
/>
...
);
`
1. Make sure to properly escape all LaTeX strings (Syntax sensitive):
This occurs because when passing math={value}, value gets evaluated as opposed to math='LaTeX'. math='LaTeX'
It is cosidered best practice to avoid using .
`diff`
+ math='x=\frac{-b\pm\sqrt{b^2-4ac}}{2a}'
/>
// OR
+ math={'x=\\frac{-b\\pm\\sqrt{b^2-4ac}}{2a}'}
/>
2. Try your LaTeX in the MathJax sandbox.setMode('SVG')
You can run from dev console in order to render svg.
yarn --production=false
cd MathExample
yarn --production=false
npm run android
`$3
Implementation:
- [ ] iOS native MathView - POC successful, need to implement native measuring. For now fallbacking to react-native-svg - [x] Android MathView - native since V2, based on Android SVGImageView. Need to implement
editable state.
Looking for Web support?
Check out react-math-view!$3
Web Math Editors -> MathLive looks very promising!
KaTeX - Math keypad that works with
React with LaTeX - using server side rendering to speed things up.