CODEWITHSUNDEEP
javascriptnode.jsreactjsreact-native
coolDog
coolDog

Reputation: 586

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

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

Upvotes: 0

Views: 2067

Answers (2)

Tafsir Ahamed
Tafsir Ahamed

Reputation: 956

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

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

Upvotes: 4

Alex Khismatulin
Alex Khismatulin

Reputation: 517

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

Upvotes: 2

Related Questions