Import .js File As Text And Use It Inside WebView InjectedJavaScript In React-native Expo

I have a file content.js that includes some JavaScript code that I want to inject inside a WebView using injectedJavaScript. I tried: fetch('./content.js').then((result) =>

Solution 1:

Since expo is using webpack you can customize it. Webpack has a loaders section you might be interested in. And the loader you need is called raw-loader. So when you require some file, webpack runs this file against the chain of loaders it has in config. And by default all .js files are bundled into index.js that gets executed when you run your app. Instead you need the content of the file that raw-loader exactly does. It will insert something like

module.contentScript = function() { return "console.log('Hello world!')"}

instead of:

module.contentScript = function() { console.log('Hello World'}}

So you need:

npm install raw-loader --save-dev

and inside your code:

require('raw-loader!./content.js');