Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

153
Views
How to display pop up tab in react native webview?

I have a web page that loads a book if the user is subscribed otherwise if the subscription is expired it loads this page :

enter image description here

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.

enter image description here

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>`;

about 4 years ago · Juan Pablo Isaza
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!