\hline is not showing with vertical addition(IOS)

[NounViraneath]

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...

[ShaMan123]

Your latex has an error which is easily debugged by going through the template. This is correct: $$\begin{array}{r} 735 \\ +196 \\ \hline 931 \end{array}$$

[NounViraneath]

thanks for your comments.

$$\begin{array}{r} 735 \\ +196 \\ \hline 931 \end{array}$$ with the above latex, \hline is still not showing in my ios emulator.

I am using react-native-math-view@^3.8.2 mathjax-full@^3.1.2

[ShaMan123]

Try using the fallback component on android: import MathViewFallback, { MathText } from 'react-native-math-view/src/fallback'; If the bug persists it means the bug originates from mathjax or react-native-svg.

It seems that the line has a css property attached to it by mathjax which can explain why it doesn't show. Take a look https://codesandbox.io/s/zealous-kilby-snd7u?file=/index.html and inspect the line. If you add the missing css to the defined class it shows. css isn't inlined in the svg output so it doesn't exist when parsing which explains the bug.

line.mjx-solid {
    /* color: black; */
    stroke-width: 70px;
}

[ShaMan123]

https://github.com/mathjax/MathJax-src/blob/master/ts/util/StyleList.ts https://github.com/mathjax/MathJax-src/blob/master/ts/util/Styles.ts

https://github.com/mathjax/MathJax-src/blob/eb9c51fbcdaf5b18539b9495564459d9e8353733/ts/output/common/OutputJax.ts#L461

[ShaMan123]

This is the reason: https://github.com/react-native-svg/react-native-svg/issues/260 react-native-svg doesn't support <style> element, the line doesn't show because mathjax passes it's stroke-width attribute in css. This is an issue that will need to be looked at closely. The current workaround is as follows: The svg tree is traversed (which may impact perf) and checked against the css rules, if true then the css is applied to the node before parsing. Currently only stroke-width is applied but the workaround can be applied for all css properties easily.

[ShaMan123]

fixed 3.9.1

[NounViraneath]

Thanks for the solutions! I have tried to reinstall with the latest version react-native-math-view@3.9.1 but I got mathjax-full@3.1.4 compile error

....
> mathjax-full@3.1.4 postcompile
> npm run --silent copy:mj2

node:internal/fs/utils:320
    throw err;

Error: ENOENT: no such file or directory....
path: '/node_modules/mathjax-full/ts/input/tex/mhchem/mhchem_parser.js',
dest: '/node_modules/mathjax-full/js/input/tex/mhchem/mhchem_parser.js' 

[NounViraneath]

I have tried to change innerPathToFile in scripts/compileMathjax.js. const innerPathToFile = 'input/tex/mhchem/mhchemparser/mhchemParser.js'; And, it seems to work well with the latest version. \hline is also showing on IOS.

[ShaMan123]

Thanks d700335 I have disabled the script scripts/compileMathjax.js in v3.9.2 The error that surfaces is a mathjax postinstall error. Could you remove mathjax-full and re-install react-native-math-view and see if the error persists?