0

I am working on a project for Math-Tuition(React-native mobile app), and using wiris for setting up questions and answers. wiris sends those questions in MathML, I am converting MathML(equations, graphs etc) into JSX by using npm package react-native-mathjax.

My web team has developed same on web in vue.js, wiris also gives input felids variables to write answers, I need to do some middle calculation/re-format on those variables by using some javascript functions, Those functions are written in a external file in javascript and same file web developer(vue.js) using.

I was trying to inject js code in webview but unable to import that js functions file in react-native, Can someone suggest me better. Thanks in advance :) I am sharing code of import js file. Code is even not giviing error if i write wrong path of external js file.

import React, { Component } from 'react';

import { Text, View, StyleSheet } from 'react-native'; import { WebView } from 'react-native-webview';

export default class sampleReactApp extends Component { render() { let HTML = <html> <head> <script type="text/javascript" src="./quizzes.js"></script> </head> <body> <div id="workbookControl"></div> <div id="tableeditor" style="font-size : 50px;">I am written inside source HTML</div> <div id="msg" onclick="javascript:alert('Hi')" style="font-size : 50px;" >notify alert</div> </body> </html>; let jsCode = alert("Js");;

    return (
        <View style={{flex: 1}}>
            <WebView ref={ref => { this.webview = ref; }}
                source={{ html: HTML }}
                injectedJavaScript={jsCode}
                javaScriptEnabledAndroid={true}
                javaScriptEnabled={true}
            >
            </WebView>
        </View>
    );
}

}

Priyanka Sadh
  • 73
  • 7
  • Could you show your code for injecting js into the webview? In case there was something wrong there – Harrison Nov 01 '20 at 12:50
  • Thanks @Harrison, for your response :) I ahve edited question please check code there. You can copy paste and check. Also that alert in jsCode not working. – Priyanka Sadh Nov 02 '20 at 06:44

1 Answers1

0

If you look at the official WebView documentation, your HTML needs to be a string, enclosed in quotation marks. Also, below, for injected javascript code to work you need to pass the onMessage prop (see here: https://github.com/react-native-webview/react-native-webview/issues/1260). So simply passing an empty function will fix it. Also according to the offical docs (https://github.com/react-native-webview/react-native-webview/issues/1260), it asks you to include true; at the end to prevent silent failures. Finally, loading a static html requires you setting the originWhitelist prop in WebView to originWhitelist={['']} (https://github.com/react-native-webview/react-native-webview/blob/master/docs/Reference.md#source)

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

export default class sampleReactApp extends React.Component {
    render () {
        var HTML = `<html> <head> <script type="text/javascript" src="./quizzes.js"></script> </head> <body> <div id="workbookControl"></div> <div id="tableeditor" style="font-size : 50px;">I am written inside source HTML</div> <div id="msg" onclick="javascript:alert('Hi')" style="font-size : 50px;" >notify alert</div> </body> </html>`
        var jsCode = `alert('hello world'); true;`
        return (
            <WebView
                originWhitelist={['*']}
                source={{ html: HTML }}
                injectedJavaScript={jsCode}
                onMessage={() => {}}
                javaScriptEnabledAndroid={true}
                javaScriptEnabled={true}
            />
        )
    }
}
Harrison
  • 653
  • 3
  • 6
  • 17
  • Thanks, onMessage worked well , But still I am waiting for an answer, How can i call function written on external js file. example this function how can call :=> function hello(ddd) { alert("heiii") return "Hello"; } Or do I need to change method definition format ? – Priyanka Sadh Nov 02 '20 at 09:40
  • Is there any way I can share you js file having all functions ? So that you can suggest me a way of import and export inside javascript. Because the same file is being used in web app. – Priyanka Sadh Nov 02 '20 at 09:44
  • @Priyanka Sadh simply do `(function hello(ddd) { alert("heiii"); return "Hello"; })(); true;` – Harrison Nov 02 '20 at 09:46
  • This is for external js file, And what should I do in web-view code, to run that function hello(). Right now whatever I am trying is not getting called. – Priyanka Sadh Nov 02 '20 at 09:48
  • @Priyanka Sadh if you want to run `hello()` from react, you can simply create a `ref` to the `WebView` and using that `ref`, do `.injectJavaScript()`. Ex. `WebViewRef.injectJavaScript(`function(){ alert('Hello World!') }; true;`)` – Harrison Nov 02 '20 at 09:57
  • yes thats correct but not able to call external file function in web-view – Priyanka Sadh Nov 02 '20 at 10:39