ShaMan123/react-native-math-view

how to contribute/help

Opened this issue · 7 comments

vladp commented

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?

ShaMan123 commented

Hi,
Thanks for reaching out.
I appreciate it!

Roadmap

My goal for this library is to support both rendering and editing of math. Rendering is supported but editing is not.
Once editing is supported I would like to have a native math keyboard component available in this library with customization options (characters, order of characters, pages, etc...).
Another high priority issue is supporting flexWrap or auto line breaking.

There are 2 ways to go about this:

  1. Migrating the native modules to more suitable renderers instead of svg renderers. Editing will be much easier to support and hopefully line breaking as well. In addition the use of mathjax in js could be removed (lesser js, better performance). Unfortunately both libraries are old and seem to be unmaintained.
    1. android - needs investigation, seems to support editing, doesn't seem to support auto line breaking.
    2. iOS - supports editing, has a built-in keyboard but doesn't seem to support auto line breaking.
  2. Implementing mathjax macro (I don't have a clue regarding this) or MML markup. My approach would be to send the svg data to native (this is how the code works on android) with additional macro/mml data. The additional data could be used to determine the position and size of math characters in the rendered svg component, thus enabling:
    1. fine-grained touch support which in turn will support editing.
    2. Mathjax V3 have on their roadmap the break-line feature OR Native measuring function for react to use for the ShadowNode which in turn will support auto line breaking.
      The problem with this approach is that there's a lot of calculations being done by mathjax before rendering the math component, meaning performance suffers and that I don't think AndroidSVG supports what's needed for this approach to work. See MathJax-src#358 issue and BigBadaboom#184.
  3. Using canvas NOT GOOD ENOUGH:
    1. Say the math is rendered to svg in native and not displayed.
    2. After layout it is measured.
    3. Using canvas we draw the svg in rects that fit the screen and break lines with calculations.
    4. Caveats:

      • Breaking on a character or a command
        ... sin(... might result in

          ....             s
 in(...
      Breaking on character can be avoided by doing a color check on the end of the rect (which may result in a performance drop but sounds pretty solid). This approach can be performant using canvas caching techniques.
      • Won't resolve editing

Unfortunately there isn't sufficient documentation to determine the best approach. I tend to the first.
Both are major and require work.

Look here https://github.com/ShaMan123/react-native-math-view#followup for ideas and research.

  • 👍3
vladp commented

Thank you for the follow up.
I was thinking: if we take
http://hevea.inria.fr/
make it usable as a package on mobile (either via reasonml or by figuring out how to generate a loadable .so)

Then get the resulting HTML and display it via RN's View.

Would that be a plausible path?

ShaMan123 commented

Sorry for the delay..
I don't see an advantage of using what you suggested. Parsing to html will require parsing/rendering from html, which is undesirable. MathJax handles parsing by it's self.
Could you explain why you think this is useful?
Regarding web support I guess it'll be rather simple. There are a few libraries supporting react if I'm not mistaken. We can wrap them or something.

vladp commented

With regards to: "> Parsing to html will require parsing/rendering from html, which is undesirable. MathJax handles parsing by it's self."

Right,

my thought (and that was perhaps wrong), that if it is possible to parse to HTML direct, then the result it can be rendered by React-native components.
Like
https://github.com/archriss/react-native-render-html
or by
https://github.com/iamacup/react-native-markdown-display
And, therefore, it would let us eliminate mathjax as well.

I might have been thinking wrong direction here, so not insisting.

ShaMan123 commented

The main motivation of this library is to handle math expressions WITHOUT a WebView.
This eliminates react-native-render-html. Regarding react-native-markdown-display I don't know.
Mathjax has a node based parser, react-native-markdown-display must have some kind of parser too. In addition, it will need Mathjax to parse the math into html and then it will handle parsing html into native views. Will it be faster than Mathjax alone? I think not. But your'e welcome to try.

vladp commented

react-native-markdown-display does not use webview. I am certain.
yes, it uses parser (and relies on markdown-it), then for each parsed section it
basically implements a block using RN

https://github.com/iamacup/react-native-markdown-display/blob/master/src/lib/renderRules.js

I should not have brought up react-native-render-html. Sorry for getting you to look at something non workeable. I thought I looked at its package.json .. but missed the "react-native-webview": "*"

With regards to latex to html parsing
I was going with a thought http://hevea.inria.fr/ doing the parsing, rather than mathjax

But again, it seems like what I was thinking is not the direction that would not be solving any problems.
So will table the hevea idea.

I think translating that from ocaml to js (using bucklescript) , or figuring if it can be compiled into a native library is problematic too.

ShaMan123 commented

updated second comment