Include external JavaScript file in the WebView of React Native App

Question

I'm trying to include an external JavaScript file inside a WebView of my React Native project. The file I wish to include is a third party library not available on npm written in plain JavaScript (No ES5 or higher). I need a solution for injecting my JS file in the WebView of the React Native project without importing it or making it an npm module.

I have tried the following methods but nothing works as for now:

I have tried to load the script like this: Insert script tag
I have tried to load the script dynamically in injectedJavaScript following the answer here: Link JS file from a JS file

This is my external AppGeneral.js:

function AppGeneral(){
     alert("Ok");
}
var app = new AppGeneral();

This is my index.ios.js file:

export default class sampleReactApp extends Component {
  render() {

    let HTML = `
    <html>
      <head>
        <script type="text/javascript" src="js/AppGeneral.js"></script>
      </head>
      <body>
        <div id="workbookControl"></div>
            <div id="tableeditor">editor goes here</div>
            <div id="msg" onclick="this.innerHTML='&nbsp;';"></div>
      </body>
    </html>
    `;

     let jsCode = `
     alert("Js");
    `;
    return (
        <View style={styles.container}>
            <WebView
                style={styles.webView}
                ref="myWebView"
                source={{ html: HTML }}
                injectedJavaScript={jsCode}
                javaScriptEnabledAndroid={true}
            >
            </WebView>
        </View>
    );
  }

}

@MartinCup My JS file is a JS Spreadsheet engine. Converting the entire library into a module and then using it in the import statement would not be the optimal solution. Therefore, I wanted to include this file as it is done in a cordova based app i.e in the webview. Kindly suggest the best approach. — Manu Gupta
– Manu Gupta, Commented Nov 25, 2016 at 7:32

laurent · Accepted Answer · 2019-03-05 18:20:20Z

8

The only way to load JavaScript in a RN WebView is using the injectedJavaScript property, and this can only take a plain string (not a file path). In my case, I've done it this way:

First generate a file that contains your JS file converted to a plain string:

const fs = require('fs-extra');
const filePath = '/path/to/your/lib.js';
const js = await fs.readFile(filePath, 'utf-8');
const json = 'module.exports = ' + JSON.stringify(js) + ';';
await fs.writeFile('/my-rn-app/external-lib.js', json);

And make sure "/my-rn-app/external-lib.js" is somewhere where it can be imported in React Native.

Then simply import the file and inject it in the WebView:

const myJsLib = require('external-lib.js');
const webView = <WebView injectedJavaScript={myJsLib} .....

This is not a particularly pretty solution but it works well.

answered Mar 5, 2019 at 18:20

laurent

91.2k83 gold badges310 silver badges445 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Community · Accepted Answer · 2017-05-23 12:18:35Z

4

Maybe you can try bundling your JS file as an asset and then refer to the file as you would in a 'native' WebView. Have a look at this answer for Android and this ones for iOS, [1] and [2].

edited May 23, 2017 at 12:18

CommunityBot

11 silver badge

answered Nov 24, 2016 at 21:32

martinarroyo

9,7713 gold badges42 silver badges79 bronze badges

1 Comment

JFAP Over a year ago

I, as well, think this is the solution

Rémy Ntshaykolo · Accepted Answer · 2023-08-13 12:14:38Z

0

I ended up pasting the js source code around <script> my js code ... <script/> tags

answered Aug 13, 2023 at 12:14

Rémy Ntshaykolo

6391 gold badge8 silver badges16 bronze badges

Collectives™ on Stack Overflow

Include external JavaScript file in the WebView of React Native App

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related