Fix resizing

[mrded]

Remove View component, to fix dynamic resizing.

[calvinkei]

can you also provide a working example and put it on demo? i can't make it work properly without wrapping it with a View

[mrded]

Do you mind if I update react-native version? I cannot make demo project run on existing version.

[mrded]

I managed to run a demo on react-native v0.57.1 and all is working as expected.

I can still update a demo project to the latest react-native, I'll do it as a separate PR.

[calvinkei]

this is not auto height, all mathjax webviews are having the same height expected behaviour is each equation will only take up the height it needs

[mrded]

I see. Let me fix it.

[mrded]

Sorry, I've refreshed the app and it rendered differently :) Can you try to run it yourself with updated react-native? https://github.com/calvinkei/react-native-mathjax/pull/16

[tunm1228]

Math Processing Error

[gshoanganh]

Sorry, I've refreshed the app and it rendered differently :) Can you try to run it yourself with updated react-native? #16

I see. Let me fix it.

You can try this my code.

import React, { Component, createRef } from 'react';
import AutoHeightWebView from 'react-native-autoheight-webview'
import { Dimensions } from 'react-native'

const defaultOptions = {
    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']
    }
};

class GsMath extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
           // height: 1
        };
    } 
    wrapMathjax(content) {
        const options = JSON.stringify(
            Object.assign({}, defaultOptions, this.props.mathJaxOptions)
        );

        return `
            <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
            <script type="text/x-mathjax-config">
                MathJax.Hub.Config(${options}); 
            </script>

            <script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/MathJax.js"></script>

            ${content}
        `;
    }
    render() {
        const html = this.wrapMathjax(this.props.html);

        // Create new props without `props.html` field. Since it's deprecated.
        const props = Object.assign({}, this.props, { html: undefined });

        return (
            <AutoHeightWebView
            { ...this.props}
                //style={{ width: Dimensions.get('window').width - 15, marginTop: 35, ...this.props.style }}
                //customScript={`document.body.style.background = 'lightyellow';`}
                customStyle={`
                  * {
                    font-family: 'Times New Roman';
                  }
                  p {
                    font-size: 16px;
                  }
                  html, body {margin: 0; height: 100%; overflow: hidden}
                `}
                //onSizeUpdated={({ size => console.log(size.height) })},
                files={[{
                    href: 'cssfileaddress',
                    type: 'text/css',
                    rel: 'stylesheet'
                }]}
                source={{ html: html}}
                scalesPageToFit={true}
                viewportContent={'width=device-width, user-scalable=no'}
            /*
            other react-native-webview props
            */
            />);
    }
}

export default GsMath;