shaman123 / react-native-math-view Goto Github PK

When trying to draw cases with latex like
$\begin{cases}-5x+45>0\\\3x+4>0\end{cases}$

I see the message:
LaTex parsing Error, Object {
"id": "EnvMissingEnd",
"math": "\begin{cases}",
"message": "Missing \end{cases}",
}

https://www.mathjax.org/#demo works normally and README.md links to "MathJax Supported LaTeX Commands" that includes \begin{cases}.

Do you have plans to support \begin{cases} ?

I have big question, it is rendering in one line. How do i wrap it such that it comes on the next line

Describe the bug
Once I want to get the mathematical formula of the text below in "To Reproduce", the application throws an error with this message: "Unrecognized font Family 'serif'"

To Reproduce
<MathText
value={"$\text{Côté}^2$"}
direction="ltr"
CellRendererComponent={}
/>
Expected behavior
get correctly the mathematical formula without error

Everything worked fine, and it suddenly stopped worked.
I deleted all files related to my project, removed and reinstalled math view, and I kept getting this error

This is the file I'm using
`import React from 'react';
import {View, Text} from 'react-native';
import MathView from 'react-native-math-view';

const App = () => {
return (

Hello


);
};
export default App;
`

This is the error I get...

Invariant Violation: requireNativeComponent: "RNMathView" was not found in the UIManager.

This error is located at:
in RNMathView (at MathBaseView.tsx:31)
in Unknown (at MathView.tsx:17)
in Unknown (at App.js:9)
in RCTView (at View.js:32)
in View (at App.js:7)
in App (at renderApplication.js:50)
in RCTView (at View.js:32)
in View (at AppContainer.js:92)
in RCTView (at View.js:32)
in View (at AppContainer.js:119)
in AppContainer (at renderApplication.js:43)
in mathapp(RootComponent) (at renderApplication.js:60)
ERROR Invariant Violation: requireNativeComponent: "RNMathView" was not found in the UIManager.

This error is located at:
in RNMathView (at MathBaseView.tsx:31)
in Unknown (at MathView.tsx:17)
in Unknown (at App.js:9)
in RCTView (at View.js:32)
in View (at App.js:7)
in App (at renderApplication.js:50)
in RCTView (at View.js:32)
in View (at AppContainer.js:92)
in RCTView (at View.js:32)
in View (at AppContainer.js:119)
in AppContainer (at renderApplication.js:43)
in mathapp(RootComponent) (at renderApplication.js:60)

[UPDATE ]

Now I've created a new project, hoping to just migrate files, and I'm getting that it's missing mathjax...!

Platform: iOS

I just rendered the example from readme:

import React from 'react';
import { SafeAreaView, StyleSheet } from 'react-native';
import MathView from 'react-native-math-view';

const App: React.FC<{}> = () => {
  return (
    <SafeAreaView style={styles.container}>
      <MathView math={'x=\\frac{-b\\pm\\sqrt{b^2-4ac}}{2a}'} />
    </SafeAreaView>
  );
};

export default App;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
});

But the problem is that the resulted math expression is too small. Is it possible to somehow make it bigger?:

[Thu Jun 10 2021 14:41:09.605] WARN Require cycle: node_modules/mathjax-full/js/input/tex/TexParser.js -> node_modules/mathjax-full/js/input/tex/ParseUtil.js -> node_modules/mathjax-full/js/input/tex/TexParser.js

Require cycles are allowed, but can result in uninitialized values. Consider refactoring to remove the need for a cycle.
[Thu Jun 10 2021 14:41:09.606] WARN Require cycle: node_modules/mathjax-full/js/output/svg.js -> node_modules/mathjax-full/js/output/svg/WrapperFactory.js -> node_modules/mathjax-full/js/output/svg/Wrappers.js -> node_modules/mathjax-full/js/output/svg/Wrapper.js -> node_modules/mathjax-full/js/output/svg.js

Require cycles are allowed, but can result in uninitialized values. Consider refactoring to remove the need for a cycle.
[Thu Jun 10 2021 14:41:09.606] WARN Require cycle: node_modules/react-native-math-view/src/fallback/index.tsx -> node_modules/react-native-math-view/src/MathText.tsx -> node_modules/react-native-math-view/src/MathView/index.ios.ts -> node_modules/react-native-math-view/src/fallback/index.tsx

need to find a way to revive it without reloading the page

null is not an object (evaluating '_UIManager$getViewMan.Constant)

from line:13-> react-native-math-view/src/android/MathView.tsx

Platform: Android
"react-native-math-view": "^3.4.3",

<MathView
      style={{ex: 50, em:50}}
      color='white'
      math={'x=\\frac{-b\\pm\\sqrt{b^2-4ac}}{2a}'}
   />

just like this

<MathView
math={'\triangle ABC'}
style={{fontSize: 12, color: 'red'}}
/>
cant change size

I just rendered some math content:

import React from 'react';
import { SafeAreaView, View, Text, StyleSheet } from 'react-native';
import MathView from 'react-native-math-view';

const math = 'x=\\frac{-b\\pm\\sqrt{b^2-4ac}}{2a}';

const App: React.FC<{}> = () => {
  return (
    <SafeAreaView style={styles.container}>
      <View style={styles.mathBox}>
        <Text style={{ fontSize: 24, marginRight: 7 }}>Let</Text>
        <MathView config={{ ex: 12 }} math={math} />
      </View>
    </SafeAreaView>
  );
};

export default App;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    marginHorizontal: 5,
    justifyContent: 'center',
  },
  mathBox: {
    flexDirection: 'row',
    alignItems: 'flex-end',
    flexWrap: 'wrap',
  },
});

It looks really good:

Then, I made the MathView content longer (I modified only the const math):

const math = 'x=\\frac{-b\\pm\\sqrt{b^2-4ac}}{2a}+\\frac{1}{2}+\\frac{2}{3}+\\frac{3}{4}+\\frac{4}{5}+\\frac{5}{6}';

Now, this is what I get:

As you can see, the 'Let' text was automatically moved on a separate line (because of flexWrap: 'wrap'), but the math expression is not fully visible (\\frac{5}{6} is not visible at the end).

So, is it possible to configure MathView such that automatically shows on multiple lines the math expressions which does not fit in a single line? I would like to get some math expressions from a server and just render them, but some of them may not fit in a single line on the screen, so it would be very useful if MathView could automatically split long expressions into multiple lines.

I'm having an issue when I have a dark background, how can I set the a different color? (other than black)

Thanks!

While importing MathText and Mathview, im getting the error in the picture. There is no error in install. How can I fix this?

Bug reports are filed via the Bug report template.

config props works for MathView but not working for MathText

    <MathText
      value={props.math}
      config={{ ex: 50, em: 50 }}
      onError={e => console.log('ERROR!', e)}
      direction="ltr"
    />

This doesn't show big font.

And where can I see all the props?

Hi,

I am trying to embed math equations in between text. I am unable to do this as the font size automatically changes and all the text gets printed in one line making the question unreadable. I am not sure where I am going wrong. Here is an example of the same.
In the first line, I have written this within the MathView tag

'\text{This text does not wrap. This text does not wrap. This text does not wrap} \dfrac{1}{2}'
'\text{This text does not wrap} \dfrac{1}{2}'

Hello!
What I observed is that 'MathView' always render math in inline mode. Is it possible to render somehow the math also in non-inline mode?

Example (inside MathJax):

As you can see, in inline mode the n->infinity is passed to the right of lim, but I would like to keep it below lim, like in non-inline mode. Is it possible?

I am trying to do something like this with react-native-math-view.
$$\begin{array}{r} 735 \\\ +196 \\\ \hline 931 \end{array}$$

But \hline is not showing on my IOS emulator.

And, It's fine with Android device...

Hello,

I am using Bmatrix and the curly braces are being broken to 3 pieces when adding 4 lines

Tested on iOS 10

Is there a way to fix this?

Thank you in advance

Once I type Chinese, I'll jump out of the prompt,
unrecognized font family 'serif'

help...

Hello,

My app does not render the LaTeX code, although it shows the component:

This is the corresponding code:

import React from 'react';
import { StyleSheet, Text, View, ScrollView} from 'react-native';
import MathView from 'react-native-math-view';
import MathViewFallback from 'react-native-math-view/src/fallback';

const math = 'x=\\frac{-b\\pm\\sqrt{b^2-4ac}}{2a}';

export default function RankingScreen({navigation}) {
  return (
    <View style={styles.container}>
        <MathView math={math} config={{ ex: 50 }} style={{backgroundColor: 'red'}}/>
        <Text>Hello world</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'column',
    backgroundColor: '#555',
    justifyContent: 'center',
    alignContent: "center",
  },
});

I already tried setting different versions of "react-native-svg". Currently I'm using "react-native-svg": "^12.0.1" since all the others give me errors.

(Note: I'm using React Native 0.61.4).

Any ideas?

Thanks in advance.

I get this error on iOS:

Failed to install with "npm install --save react-native-math-view"

npx: installed 1 in 2.895s
error TS5023: Unknown compiler option 'downlevelIteration'.
error TS5023: Unknown compiler option 'lib'.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] compile: npx tsc
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] compile script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm WARN Local package.json exists, but node_modules missing, did you mean to install?

npm ERR! A complete log of this run can be found in:
npm ERR! /Users/admin/.npm/_logs/2019-11-18T02_56_23_447Z-debug.log
fs.js:114
throw err;
^

Error: ENOENT: no such file or directory, copyfile '/Users/admin/myMathProject/node_modules/mathjax-full/ts/input/tex/mhchem/mhchem_parser.js' -> '/Users/admin/myMathProject/node_modules/mathjax-full/js/input/tex/mhchem/mhchem_parser.js'
at Object.copyFileSync (fs.js:1728:3)
at Object. (/Users/admin/myMathProject/node_modules/react-native-math-view/scripts/compileMathjax.js:22:4)
at Module._compile (internal/modules/cjs/loader.js:778:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)
at Module.load (internal/modules/cjs/loader.js:653:32)
at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
at Function.Module._load (internal/modules/cjs/loader.js:585:3)
at Function.Module.runMain (internal/modules/cjs/loader.js:831:12)
at startup (internal/bootstrap/node.js:283:19)
at bootstrapNodeJSCore (internal/bootstrap/node.js:622:3)

Error: [email protected] postinstall: node ./scripts/compileMathjax && tsc
Exit status 1
at EventEmitter. (/usr/local/lib/node_modules/npm/node_modules/npm-
lifecycle/index.js:301:16)
at EventEmitter.emit (events.js:198:13)
at ChildProcess. (/usr/local/lib/node_modules/npm/node_modules/npm-
lifecycle/lib/spawn.js:55:14)
at ChildProcess.emit (events.js:198:13)
at maybeClose (internal/child_process.js:982:16)
at Process.ChildProcess._handle.onexit (internal/child_process.js:259:5)
pkgid [email protected]

Setting inline: false seems to add a margin in front of the formula. Alignment to flex-start does not work properly anymore. Do you have any idea how to fix it?

How to change the font size?

<MathView
      color='white'
      style={{ fontSize:20}}
      math={'x=\\frac{-b\\pm\\sqrt{b^2-4ac}}{2a}'}
/>

Hi ShaMan,

In Andriod running perfectly

In Ios Getting below error:

error Could not find the following native modules: react-native-math-view, RNSVG. Did you forget to run "pod install"?

On running Pod install
cd ios && pod install

Getting Below Error:

Detected React Native module pods for RNSVG and react-native-math-view
Analyzing dependencies
[!] The react-native-math-view pod failed to validate due to 2 errors:
- ERROR | license: Sample license type.
- ERROR | description: The description is empty.

Any Help!!!!!!!

Thanks,
Kings

i get the following error when i run it on android device,
Invariant Violation: requireNativeComponent: "RNMathView" was not found in the UIManager
I'm using expo can you help me to fix this issue ?

add prop textStyle?

Is it possible to use MathML html as input instead of Latex?

I tried converting Ckeditor exported MathML to Latex with tool such as 'mathml-to-latex' package but in some scenarios the produced Latex is flawed so I can't reliably use it.

I need to render MathML html in react-native without webview. Is there a way to do it with this package?

I'd be so grateful if it's somehow possible in a reliable way. Thank you!

Hello,
your project is the only one that attempts to render math without WebView.
So this is pretty unique and significant.

I would like to contribute (I can do react-native-android or react-native-web).

Do you think you could write up a couple of issues with 'help needed' tag so that myself and, I hope, others, can contribute?

Inline or standalone math formulas are displayed different in the library compared to MathJax and LaTeX:

The attached file contains an example.

You can test the correct LaTeX behavior on:
"https://www.mathjax.org/#demo: "
using
“$\sum_{n=0}^\infty$ $$\sum_{n=0}^\infty$$”

I would be surprised if you could not set this parameter when generating the SVG? Please excuse me for drilling so much. If I am completely wrong, please let me know.

Unrecognized font family 'serif'

+[RCTFont updateFont:withFamily:size:weight:style:variant:scaleMultiplier:]
RCTFont.mm:314
-[RNSVGGlyphContext getGlyphFont]

When starting the sample app, the following error of an unknown environment occurs when loading "MathSectionList.tsx":

https://github.com/react-native-community/cli/blob/master/docs/configuration.md#migration-guide

see this.style in render

Sometimes, when LaTeX is not correct I'm getting a black bar in place. I want to show an error message like Error loading LaTeX or something. Is there a prop for that?

Thank you for the awesome library btw.

Hello!
As I understand, on android, this library uses native rendering based on Android SVGImageView. This means that the rendering on android should be faster than on iOS (because iOS uses react-native-svg yet).

But...
My experience is that the rendering on iOS is faster than on android. I render some math expressions inside a custom keyboard, and what I experience is that on iOS the expressions are rendered faster than on android. Please see the videos below.

iOS (simulator, running 13.3):
https://vimeo.com/417277032

Android (Samsung S5 device, running android 6):
https://vimeo.com/417276432

Maybe rendering is slower on android because I use an enough old device, however I think that the difference is too much between android & iOS, considering also that android should be faster than the iOS (not inverse).

So my question is: what could cause this difference in rendering time?

Thank you!

Maybe one day if I have time, passion, need, desire I will setup a tests.

• https://github.com/marketplace/actions/android-emulator-runner

Hello, thank you very much for the effort for this package. I still have problems to display LaTeX in a nice and consistent way in an app. On Android the following code is displayed with very big differences in size:

import MathView from 'react-native-math-view';
...
return (
            <View>
                <MathView
                    math={'x=\\frac{-b\\pm\\sqrt{b^2-4ac}}{2a}'}
                />
                <MathView
                    math='p_1 = p_2 - p_3'
                />
            </View>
        );

With mathjax-node I can easily create SVG strings. Is there a reason not to do this and to rely on line breaks and formatting of mathjax? Text and formulas are automatically wrapped at a given width (which we know from out react native app and also using Flex-View). This would make it very easy to mix text (via \text{}) and formulas.

Unfortunately I can't display these SVG strings via react-native-svg. It works in Safari, Chrome or even in online SVG viewers (https://www.rapidtables.com/web/tools/svg-viewer-editor.html), but not in React Native. Do you have a hint what I am doing wrong with the following code?

import {SvgXml} from 'react-native-svg';
...

const svg = `<svg xmlns:xlink="http://www.w3.org/1999/xlink" width="12.336ex" height="2.843ex" style="vertical-align: -0.505ex;" viewBox="0 -1006.6 5311.2 1223.9" role="img" focusable="false" xmlns="http://www.w3.org/2000/svg" aria-labelledby="MathJax-SVG-1-Title"><title id="MathJax-SVG-1-Title">a^2 + b^2 = c^2</title><defs aria-hidden="true"><path stroke-width="1" id="E1-MJMATHI-61" d="M33 157Q33 258 109 349T280 441Q331 441 370 392Q386 422 416 422Q429 422 439 414T449 394Q449 381 412 234T374 68Q374 43 381 35T402 26Q411 27 422 35Q443 55 463 131Q469 151 473 152Q475 153 483 153H487Q506 153 506 144Q506 138 501 117T481 63T449 13Q436 0 417 -8Q409 -10 393 -10Q359 -10 336 5T306 36L300 51Q299 52 296 50Q294 48 292 46Q233 -10 172 -10Q117 -10 75 30T33 157ZM351 328Q351 334 346 350T323 385T277 405Q242 405 210 374T160 293Q131 214 119 129Q119 126 119 118T118 106Q118 61 136 44T179 26Q217 26 254 59T298 110Q300 114 325 217T351 328Z"></path><path stroke-width="1" id="E1-MJMAIN-32" d="M109 429Q82 429 66 447T50 491Q50 562 103 614T235 666Q326 666 387 610T449 465Q449 422 429 383T381 315T301 241Q265 210 201 149L142 93L218 92Q375 92 385 97Q392 99 409 186V189H449V186Q448 183 436 95T421 3V0H50V19V31Q50 38 56 46T86 81Q115 113 136 137Q145 147 170 174T204 211T233 244T261 278T284 308T305 340T320 369T333 401T340 431T343 464Q343 527 309 573T212 619Q179 619 154 602T119 569T109 550Q109 549 114 549Q132 549 151 535T170 489Q170 464 154 447T109 429Z"></path><path stroke-width="1" id="E1-MJMAIN-2B" d="M56 237T56 250T70 270H369V420L370 570Q380 583 389 583Q402 583 409 568V270H707Q722 262 722 250T707 230H409V-68Q401 -82 391 -82H389H387Q375 -82 369 -68V230H70Q56 237 56 250Z"></path><path stroke-width="1" id="E1-MJMATHI-62" d="M73 647Q73 657 77 670T89 683Q90 683 161 688T234 694Q246 694 246 685T212 542Q204 508 195 472T180 418L176 399Q176 396 182 402Q231 442 283 442Q345 442 383 396T422 280Q422 169 343 79T173 -11Q123 -11 82 27T40 150V159Q40 180 48 217T97 414Q147 611 147 623T109 637Q104 637 101 637H96Q86 637 83 637T76 640T73 647ZM336 325V331Q336 405 275 405Q258 405 240 397T207 376T181 352T163 330L157 322L136 236Q114 150 114 114Q114 66 138 42Q154 26 178 26Q211 26 245 58Q270 81 285 114T318 219Q336 291 336 325Z"></path><path stroke-width="1" id="E1-MJMAIN-3D" d="M56 347Q56 360 70 367H707Q722 359 722 347Q722 336 708 328L390 327H72Q56 332 56 347ZM56 153Q56 168 72 173H708Q722 163 722 153Q722 140 707 133H70Q56 140 56 153Z"></path><path stroke-width="1" id="E1-MJMATHI-63" d="M34 159Q34 268 120 355T306 442Q362 442 394 418T427 355Q427 326 408 306T360 285Q341 285 330 295T319 325T330 359T352 380T366 386H367Q367 388 361 392T340 400T306 404Q276 404 249 390Q228 381 206 359Q162 315 142 235T121 119Q121 73 147 50Q169 26 205 26H209Q321 26 394 111Q403 121 406 121Q410 121 419 112T429 98T420 83T391 55T346 25T282 0T202 -11Q127 -11 81 37T34 159Z"></path></defs><g stroke="currentColor" fill="currentColor" stroke-width="0" transform="matrix(1 0 0 -1 0 0)" aria-hidden="true"><use xlink:href="#E1-MJMATHI-61" x="0" y="0"></use><use transform="scale(0.707)" xlink:href="#E1-MJMAIN-32" x="748" y="583"></use><use xlink:href="#E1-MJMAIN-2B" x="1205" y="0"></use><g transform="translate(2206,0)"><use xlink:href="#E1-MJMATHI-62" x="0" y="0"></use><use transform="scale(0.707)" xlink:href="#E1-MJMAIN-32" x="607" y="583"></use></g><use xlink:href="#E1-MJMAIN-3D" x="3367" y="0"></use><g transform="translate(4423,0)"><use xlink:href="#E1-MJMATHI-63" x="0" y="0"></use><use transform="scale(0.707)" xlink:href="#E1-MJMAIN-32" x="613" y="583"></use></g></g></svg>`;

....
return (
            <SafeAreaView style={{flex: 1}}>
                <View>
                    <SvgXml xml={svg} width="100%" height="100%"/>
                </View>
            </SafeAreaView>
        );

Thank you very much, unfortunately I don't have much time to participate in development at the moment, but I'm happy to test libraries.

Andreas

For some unknown reason the error isn't rendered though it is handled correctly.

prop mathEngine set to MATHJAX doesn't work

I am trying to use MathView within an Expo Project (Expo SDK 36.0). The output is on Android.

I suspect this is because RNMathView java package does not get linked but I am not sure.

Please help!

If an unexpected input comes along, like '\sqrt{x-1}+\frac{1}{\sqrt{(x-2)}^2^}' - (at the end it has an exponent ^ without anything after it) - it causes the app to crash with 'Missing open brace for superscript. If you meant to render a collection of children, use an array instead'.

Is there a way to prevent those crashes and fallback to rendering the raw latex or at least to keep the app running and show an error message but not crash?

I'm using MathView to render LaTeX exported from https://cortexjs.io/mathlive/demo/. It works well for the most part but some symbols are not rendering (see screenshot). They appear in the same way in the www.mathjax.org/#demo - red, without proper rendering.
Example troublesome latex would be: \exponentialE\imaginaryI\pi - it renders well in cortexjs but doesn't in react-native-math-view

Is there a way to render those symbols properly? Or to add them to the library myself and instruct the library how to render them, if needed?

Also, a latex with coloring exported from cortejx like so: \colorbox{#fff1c2}{[ \textcolor{#63b215}{x+42\operatorname{sign}(\placeholder{⬚})} ]}
It results in an error - '[' is only supported in math mode. If I wrap the whole latex with '$' for math mode - it results in another error - '#' macro is not supported in math mode.

Currently I do: replaceAll(String.raw\[, '$') and for the other symbols that don't render like \exponentialE -> e before passing the latex to the mathview which works but seems like a bad workaround.

In conclusion - is there a good way to safely and reliably render the output from https://cortexjs.io/mathlive/demo/ in react-native-math-view without using workarounds like find and replace?

.

90% instead of Dimensions.get('window').width - 50
This will boost performance and make some code block redundant

Description
Package react-native-math-view contains invalid configuration: "dependency.assets" is not allowed. Please verify it's properly linked using "react-native config" command and contact the package maintainers about this.

To Reproduce
Add a reference inside package.json to a project pointing to latest RN version and run for iOS. The warn message will appear in the output terminal

Expected behavior
No warning is shown