Tengo una página web que carga un libro si el usuario está suscrito; de lo contrario, si la suscripción caduca, carga esta página:

Cargo la página en una variable antes de renderizar para que la experiencia del usuario se desarrolle sin problemas y luego agrego la variable al HTML de la vista web. la carga funciona bien, pero cuando hago clic en los siguientes botones no sucede nada y quiero tener la misma interacción que en la web. ¿Cómo puedo lograr eso usando reaccionar webview nativo?

aquí está el código de la vista web:

 <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} />

y así es como obtengo el 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>`;