Packing js file to be inserted into React Native's WebView - react-native

Question

I am creating a webview in a react native script, such as
<WebView source="https://www.google.com" />
However, I would like to inject a whole bunch of javascripts into the webview. The scripts to be included is located at let's say additionalScripts.js (which may import a whole bunch of dependencies such as jquery etc.
So intuitive I am trying to do
import additionalScripts from './additionalScripts.js'
<WebView source="https://www.google.com" injectedJavaScript={additionalScripts} />
Firstly it does not work.
Secondly, how do it make sure that the additionalScripts imported has been properly 'webpacked' and 'uglified' ?
Thanks

Answer 1

The problem is that injectedJavaScript needs a string, but the import actually executes the JS file and exports the result as an object.
To load the file as text, you can try something like React Native FS module, I learned about it from this answer.
// ...
import RNFS from require('react-native-fs');
// ...
class MyComponent extends Component {
constructor() {
super();
this.state = {
additionalScripts: null
};
}
componentDidMount() {
RNFS.readFile('./additionalScripts.js', 'utf8')
.then((contents) => {
this.setState({
additionalScripts: contents
});
});
}
render() {
if(!this.state.additionalScripts) {
return null;
}
return <WebView
source="https://www.google.com"
injectedJavaScript={additionalScripts} />;
}
}