calvinkei / react-native-mathjax Goto Github PK

I am using 'react-native-mathjax' for rendering math equations. When I add double \ in place of single \ and four \ in place of double \ in the equation, it renders the equation. how this problem can be solved?

import React, { Component } from 'react';
import { View, Text } from 'react-native';
import MathJax from 'react-native-mathjax';

function Test() {
        return (
               <View>
                 <MathJax
                    html={<p><span class="math-tex">\(\begin{bmatrix} 2 &1 \\[0.3em] 3&4\\[0.3em] \end{bmatrix}\)</span></p>} 
                   // not render
              />
               </View>
 );
}
export default Test;

If MathJax needs to load any components (like its output jax the first time it is used), that is done asynchronously, so the page will be displayed in the meantime until the component is loaded.

I'm using the lib to show my html content from DB. I have math formulas and images from url, too. These images are coming from url and the first time they load the height is too small.
If access the same image again, then it works.

Any suggestion? The images are coming from amazon s3.

I use the Expo project and when applying this demo there doesn't work or display anything!

-Expo version: 39.0
-run on the android platform.

I need to change the font size and the font family of the content rendered through the library (content rendered other than latex). Found a way to change the scale of the math content but tried a lot and couldn't find a way to change the stylings of the other content rendered through the library. Can someone help me?

is there any way to pre-render the data with mathjax, so that user won't see the loading of mathjax content?

It can now be installed and imported from 'react-native-webview' instead of 'react-native'. See 'https://github.com/react-native-community/react-native-webview'.

var html = "\frac{52}{16}\ +\sqrt[2]{296}+a_2\ -\left(267\right)\ =\ x"

<MathJax
// HTML content with MathJax support
html={html}
// MathJax config option
mathJaxOptions={{
messageStyle: 'none',
extensions: [ 'tex2jax.js' ],
jax: [ 'input/TeX', 'output/HTML-CSS' ],
tex2jax: {
inlineMath: [ ['$','$'], ['\(','\)'] ],
displayMath: [ ['$$','$$'], ['\[','\]'] ],
processEscapes: true,
},
TeX: {
extensions: ['AMSmath.js','AMSsymbols.js','noErrors.js','noUndefined.js']
}
}}
{...WebView props}
/>

hi i am using this module
but the latext equations are not shopwing up as required
please help me how to dipaly these equatioons

I am using mathjax with my react-native quiz application. But it is taking too much time in loading the question with all four options and downgrading the performance of application.
I tried putting loader when webview loads but loader stays only untill the webview loads and rending of mathematical questions still takes more time to display.
Any way by which we can reduce the rendering time or put a loader/activity indicator on rending too?

Hi there,

apparently all webviews that use HTML in the source are broken as of Chrome 72 (see react-native-webview/react-native-webview#298).

This also happens with the RN WebView itself (not the new one from RN community). Any ideas of workarounds for this?

Hi there!

What would it take to use this library offline? Right now it needs to call the MathJax.js script remotely.

Thanks,
Fred

I have just used the code that you put here as an example and it shows nothing! I checked on both iOS, android, simulators and real devices! Any idea?
My react native version is 57.

auto height adjustment of webview is not working in this library, any suggestions?

You can see Mathjax loading screenshot at below link
https://drive.google.com/file/d/1A3EqrZVlnhkWyOSFGkEtTWjvNrXkHX-k/view?usp=sharing

Is any way to hide??

Hi there,

Thanks again for the great package!

I'm having some trouble to use this package on Android (works pretty well in iOS!).

First, if I just add react-native-mathjax to my package.json and run npm or yarn, I get:

/Users/........../android/app/src/main/java/com/brothertongue/MainApplication.java:17: error: package com.dscj.autoheightwebview does not exist
import com.dscj.autoheightwebview.AutoHeightWebViewPackage;
^
/Users/.........../android/app/src/main/java/com/brothertongue/MainApplication.java:39: error: cannot find symbol
new AutoHeightWebViewPackage(),
^
symbol: class AutoHeightWebViewPackage

I think this was caused by the lack of the AutoHeightWebViewPackage. I added the package react-native-autoheight-webview. by hand in my package.json file, but I think it's not loading the fork. Instead, it is loading the package that has the error mentioned in the description of the mathjax package, because when I push to Android (emulator and device), I see that some areas with components never stop growing.

Any help on now I should use the fork? What I can tell is that neither npm nor yarn are loading the tarball from github, or at least it does not appear in the node_modules/ of my app.

Thanks!

unable to open url

this library is taking almost 15 seconds time to render the HTML equations. I tried with the example given in the documentation. Please help in reducing this time to a minimum.

I pass data like <p><math xmlns=\"http://www.w3.org/1998/Math/MathML\"><mfenced close=\"]\" open=\"[\"><mtable><mtr><mtd><mn>0</mn></mtd><mtd><mn>0</mn></mtd><mtd><mn>0</mn></mtd></mtr><mtr><mtd><mn>0</mn></mtd><mtd><mn>0</mn></mtd><mtd><mn>0</mn></mtd></mtr><mtr><mtd><mn>0</mn></mtd><mtd><mn>1</mn></mtd><mtd><mn>0</mn></mtd></mtr></mtable></mfenced></math></p>

it will working fine in iOS but in android it will take as a string.

Android shows : 000000010

Actual result is :

not working in single back slash like mathjax website/ ck editor formula not working. Can it change double to single back slash

07-27 01:40:41.366 12798 12798 E AndroidRuntime: java.lang.RuntimeException: Result has already been set!
07-27 01:40:41.366 12798 12798 E AndroidRuntime: at com.facebook.react.common.futures.SimpleSettableFuture.checkNotSet(SimpleSettableFuture.java:118)
07-27 01:40:41.366 12798 12798 E AndroidRuntime: at com.facebook.react.common.futures.SimpleSettableFuture.setException(SimpleSettableFuture.java:42)
07-27 01:40:41.366 12798 12798 E AndroidRuntime: at com.facebook.react.devsupport.DevSupportManagerImpl$23.onFailure(DevSupportManagerImpl.java:953)
07-27 01:40:41.366 12798 12798 E AndroidRuntime: at com.facebook.react.devsupport.WebsocketJavaScriptExecutor$1.onFailure(WebsocketJavaScriptExecutor.java:83)
07-27 01:40:41.366 12798 12798 E AndroidRuntime: at com.facebook.react.devsupport.WebsocketJavaScriptExecutor$3.run(WebsocketJavaScriptExecutor.java:142)
07-27 01:40:41.366 12798 12798 E AndroidRuntime: at android.os.Handler.handleCallback(Handler.java:938)
07-27 01:40:41.366 12798 12798 E AndroidRuntime: at android.os.Handler.dispatchMessage(Handler.java:99)
07-27 01:40:41.366 12798 12798 E AndroidRuntime: at android.os.Looper.loopOnce(Looper.java:201)
07-27 01:40:41.366 12798 12798 E AndroidRuntime: at android.os.Looper.loop(Looper.java:288)
07-27 01:40:41.366 12798 12798 E AndroidRuntime: at android.app.ActivityThread.main(ActivityThread.java:7839)
07-27 01:40:41.366 12798 12798 E AndroidRuntime: at java.lang.reflect.Method.invoke(Native Method)
07-27 01:40:41.366 12798 12798 E AndroidRuntime: at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:548)
07-27 01:40:41.366 12798 12798 E AndroidRuntime: at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:1003)07-27 04:19:01.339 18920 18920 D AndroidRuntime: >>>>>> START com.android.internal.os.RuntimeInit uid 10110 <<<<<<

Hi there,

I'm having an encoding issue on Android, see the picture below:

Left is Android, where the text is dumped with some weird characters. It works nicely on iOS though. Any ideas of what could be causing this?

Thanks,
Fred

When i try react-native link react-native-mathjax i am getting the fallowing response in command line.

"rnpm-install info Platform 'ios' module react-native-mathjax is already linked "

Tried "react-native link react-native-mathjax android" this command also but getting the same response.

Fallowing are the verions used.
react-native-cli: 2.0.1
react-native: 0.56.0

Hi i tried using the demo code thats given here. The result is the screen keeps updating itself until only one view is visible. Rest will be moved out of the screen.

The recorded video link is attached here.
https://drive.google.com/open?id=19TMIZq0X7KAP3ilrMBs-UE7y_nadY5N9

I am getting errors while installing react-native-mathjax using npm.

npm ERR! fetch failed https://github.com/calcal12/react-native-autoheight-webview/tarball/master
npm WARN retry will retry, error on last attempt: Error: fetch failed with status code 404
npm ERR! fetch failed https://github.com/calcal12/react-native-autoheight-webview/tarball/master
npm WARN retry will retry, error on last attempt: Error: fetch failed with status code 404
npm ERR! fetch failed https://github.com/calcal12/react-native-autoheight-webview/tarball/master
npm ERR! fetch failed with status code 404

How can i stop copy paste in react-native-mathjax?

How to change color of formula? I've tried almost everything

how i can display a html file that is in the assets? like "file:///android_asset/test.html"
this is posible with react native webview, but i dont know how to do with this library.
or how i can render the react native web view component and wrap in this react-native-mathjax component?

Did this library support latex??

var html = "\frac{52}{16}\ +\sqrt[2]{296}+a_2\ -\left(267\right)\ =\ x"

<MathJax
  // HTML content with MathJax support
  html={html}
  // MathJax config option
  mathJaxOptions={{
    messageStyle: 'none',
    extensions: [ 'tex2jax.js' ],
    jax: [ 'input/TeX', 'output/HTML-CSS' ],
    tex2jax: {
      inlineMath: [ ['$','$'], ['\\(','\\)'] ],
      displayMath: [ ['$$','$$'], ['\\[','\\]'] ],
      processEscapes: true,
    },
    TeX: {
      extensions: ['AMSmath.js','AMSsymbols.js','noErrors.js','noUndefined.js']
    }
  }}
  {...WebView props}
/>

I have following dependency -
"react": "16.3.1",
"react-native": "~0.55.2",

I have installed the above plugin via npm and linked to my project. Once I try running my project (ios), I am seeing that the project name is changed to Demo and then the whole build is failing.

My project runs fine once I remove and unlink Mathjax. Help me know what steps needs to be followed

long equations horizontal scroll is not working
i have tried css overflow-x : scroll and overflow-x : auto both.

Originally posted by @amansaxenalapa11 in #25 (comment)

I tried to modify the index.js file of this library by adding the scalesPageToFit={true} property to the WebView like here (I know that scalesPageToFit is true by default, but it didn't work, so I thought that it may work if I set it manually):

But it didn't work. It still does not scale the webview content:

I would like that the loaded page to look like this (without scaling it manually):

So my question is: how could be achievied this behaviour?
I also tried to change the default WebView to react-native-yunpeng-webview WebView, but not worked.