A react native view used to easily display and handle math. The library doesn’t use WebView
.
Launch Test | Example App |
---|---|
npm install --save react-native-math-view
OR yarn add react-native-math-view
react-native
> 0.59
Install react-native-svg
$ cd ios && pod install
Expo doesn’t support native modules. You can use this library with react-native-svg
(performance suffers a bit), see #19.
Upgrade typescript
If you’re getting an error regarging compileMathjax
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.
To be sure everything is compiled properly run the following command from the mathjax-full
node_module
directory of your project:
npm run compile
typescript
errors can be safely disregareded.
see also #16
import MathView from 'react-native-math-view';
return (
...
<MathView
math={'x=\\frac{-b\\pm\\sqrt{b^2-4ac}}{2a}'}
/>
<MathView
math='\cos\left(x\right)=\frac{b}{c}'
/>
...
);
LaTeX
strings (Syntax sensitive):This occurs because when passing math={value}
, value
gets evaluated as opposed to math='LaTeX'
.
It is cosidered best practice to avoid using math='LaTeX'
.
<MathView
- math='x=\\frac{-b\\pm\\sqrt{b^2-4ac}}{2a}'
+ math='x=\frac{-b\pm\sqrt{b^2-4ac}}{2a}'
/>
// OR
<MathView
- math={'x=\frac{-b\pm\sqrt{b^2-4ac}}{2a}'}
+ math={'x=\\frac{-b\\pm\\sqrt{b^2-4ac}}{2a}'}
/>
LaTeX
in the MathJax
sandbox.setMode('SVG')
from dev console in order to render svg.From the project’s directory run:
yarn --production=false
cd MathExample
yarn --production=false
npm run android
iOS native MathView - POC successful, need to implement native measuring. For now fallbacking to react-native-svg
Android MathView - native since V2, based on Android SVGImageView. Need to implement editable
state.
KaTeX - Math keypad that works with <WebView>
. See this
React with LaTeX - using server side rendering to speed things up.
Author: ShaMan123
GitHub: https://github.com/ShaMan123/react-native-math-view
#react-native #react #mobile-apps