I have a website that displays content based on user subscription status. If the subscription is active, a book is loaded; otherwise, if it's expired, a specific page is shown:
https://i.sstatic.net/HLv0B.png
To enhance user experience, I preload the content in a variable before rendering and then append it to the webview HTML. Everything loads correctly, but when I interact with certain buttons, nothing happens. I want the same functionality as on the web. How can I achieve this using React Native Webview?
https://i.sstatic.net/iPJcJ.jpg
Here is the code snippet for the webview:
<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 retrieve 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>`;