Invariant Violation: WebView has been removed from React Native.

[Danial-Qureshi]

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

[gshoanganh]

I have same this problem

[gshoanganh]

Hi you, This version of "MathJax" is an old version. RN has changed the webview library's path, the WebView is no longer directly accessible from React-Native, so you need to go to mathjax's library in

"node_modules/react-native-mathjax/"

step 1: open file "index.js" step 2: delete WebView (line:2) step 3: add line: import {WebView} from 'react-native-webview'; good luck.

[gshoanganh]

This is what is should change: file index.js:

import React from 'react'; 
import { WebView } from 'react-native-webview';

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 MathJax extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            height: 100
        };
    }

    handleMessage(message) {
        this.setState({
            height: Number(message.nativeEvent.data)
        });
    }

    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});

                MathJax.Hub.Queue(function() {
                    var height = document.documentElement.scrollHeight;

                    window.postMessage(String(height));
                });
            </script>

            <script type="text/javascript" async
            src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/latest.js?config=TeX-MML-AM_CHTML">
          </script>
            ${content}

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

    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 <WebView
            originWhitelist={['*']}
            scrollEnabled={false}
            onMessage={this.handleMessage.bind(this)}
            source={{ html }}
            {...props} 
        /> 
    }
}

export default MathJax;

[alanko0202]

Would the author publish a new version about this?

[Danial-Qureshi]

thanks man