0

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>
)
coolDog
  • 476
  • 1
  • 3
  • 11

2 Answers2

4

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

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

Tafsir Ahamed
  • 930
  • 4
  • 15
2

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:

  1. 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.
  2. 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:

  1. 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')"
/>
Alex Khismatulin
  • 485
  • 2
  • 3