React Native load dynamic content onto webview - react-native

Question

Currently I am loading a html file from my android assets folder into webview.
dashboard.html file contains some scripts.
if its static it works fine.
<WebView
ref={(component) => (this.webview = component)}
style={{ height: height * 1.3 }}
javaScriptEnabled={true}
domStorageEnabled={true}
source={{uri:'file:///android_asset/graph/pages/dashboard.html'}}
startInLoadingState={true}
javaScriptEnabledAndroid={true}
mixedContentMode={'compatibility'}
/>
But I need to dynamically update a variable in my script.
How can I access scripts placed in assets folder from react-native component.

Answer 1

You can use forceUpdate();
e.g.
<webView source={{html: this.state.html}}></webView>
onTestBtnClicked() {
const html = '<div>test1</div>';
this.setState({ html });
this.forceUpdate();
}

Answer 2

You can't access and update a script file but maybe you can run your script or extra code once the WebView is loaded using the injectedJavaScript prop
Example:
const injectedJs = `
alert("My custom code will go here!");
`;
return (
<WebView
ref={(component) => (this.webview = component)}
style={{ height: height * 1.3 }}
javaScriptEnabled={true}
domStorageEnabled={true}
source={{uri:'file:///android_asset/graph/pages/dashboard.html'}}
startInLoadingState={true}
javaScriptEnabledAndroid={true}
mixedContentMode={'compatibility'}
injectedJavaScript={injectedJs}
javaScriptEnabledAndroid={true}
/>
);