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

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>
)

CodePudding user response：

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')"
/>

CodePudding user response：

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

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