I have a web page that loads a book if the user is subscribed otherwise if the subscription is expired it loads this page :
I load the page in a variable before rendering to make the user Experience go smoothly and then I append the variable to the HTML of webview. the load works fine but when I click the following buttons nothing happens and I want to have the same interaction as on the web. how can I achieve that using react native webview.
here s the webview code:
<WebView
key={this.state.value}
ref={webview => this.setState({WebViewRef:webview})}
javaScriptEnabled={true}
domStorageEnabled={true}
scalesPageToFit={false}
onLoadEnd={
this.setState({
visibleBack:false
})
}
automaticallyAdjustContentInsets={false}
source={{ html:htmlString,}} style={{height : this.state.webViewHeight, width: this.state.notSubbedHeight== 1 ? Dimensions.get('window').width-20 :Dimensions.get('window').width-40, justifyContent:'center' ,alignItems:'center',marginTop:20}}
key={this.state.key}
injectedJavaScript={jsBeforeLoad}
onMessage= {this.onMessage}
scrollEnabled={false}
/>
and here is how I get the htmlString
getProductsummary = async (product) => {
this.setState({ loading: true });
const username = await AsyncStorage.getItem('username');
if(username !== undefined){
fetch(Config.backendAPI+`/cleanbook_mobile.php?idbook=${product.id}&username=${username}`)
.then((response) =>{
return response.text();
}
).then((result)=>{
let resp = result;
if (resp == null || resp == "") {
resp = "<div style=\"font-family :Georgia\" >" + Languages.SummaryVide + "</div>";
}
if(resp.includes("paypal-button-container-P")){
this.setState({notSubbedHeight:1})
}
this.setState({ summary: resp, loading: false });
}).catch((error) => console.log(error));
}else{
this.setState({
notSubbed: 1,
})
}
};
var htmlString = `<div id="summaryDiv"> ${this.state.summary} </div>`;