How to render a portion of html using webview in react native

Question

I don't know if webview by react-native supports this functionality but can I pick and render a specific div and not the whole webpage

For example if a html site contains this segment:

<html>
  <head>
    <title>Href Attribute Example</title>
  </head>
  <body>
    <h1>Href Attribute Example</h1>
    <p>
      <a href="https://www.theExample.com">The example page</a> shows you how and where you can contribute to solutions.
    </p>
  </body>
</html>

But I only want to render this segment on the webview

    <h1>Href Attribute Example</h1>
    <p>
      <a href="https://www.theExample.com">The example page</a> shows you how and where you can contribute to solutions.
    </p>

How would I plug it in to be rendered here:

return(
<View>
 <WebView source={{ uri: 'https://www.theExample.com' }} />;
</View>
)

Tafsir Ahamed · Accepted Answer · 2022-04-16 15:09:07Z

4

Are you trying to achieve something like this: Render html using webview

Also have a look into this: React native custom html render

edited Apr 16, 2022 at 15:09

answered Apr 16, 2022 at 14:59

Tafsir Ahamed

9566 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Alex Khismatulin · Accepted Answer · 2022-04-16 15:04:03Z

This functionality is not something you get out of the box. But there are some options definitely.

Here are the options I see if you control the source code of the page:

Create a different entry point or build where unneeded content is stripped out. No dark magic at all, but might be problematic for big apps.
Pass a query parameter that indicates that your app is in a web view mode(https://www.theExample.com?container=true). Then you check the presence of the query parameter in the app and show/hide what you need based on that condition.

Here are the options I see if don't you control the source code of the page:

Execute JavaScript that removes from page everything you don't want to show by passing injectedJavaScript:

<WebView
  source={{ uri: 'https://www.theExample.com' }}
  injectedJavaScript="window.alert('You can manipulate the DOM here')"
/>

Collectives™ on Stack Overflow

How to render a portion of html using webview in react native

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related