CODEWITHSUNDEEP
reactjsreact-nativereact-native-webview
Prakul Gupta
Prakul Gupta

Reputation: 51

How to inject React Component inside WebView (react-native-webview)?

Is there a way to pass in a web React component to WebView directly? Something like this-

import ReactContainer from 'somewhere';
import { WebView } from "react-native-webview";

<WebView
        source={{ html: "<ReactContainer/>" }}
></WebView>

Upvotes: 5

Views: 5663

Answers (3)

Luca Fabbian
Luca Fabbian

Reputation: 215

No, there is not. React.js and React native shares the same syntax but are really different framework: they follow different rules and are build in a different way. Inside a webview, there is no react framework avaiable or runtime (unless you import React.js as a <script> tag as a website would).

However, as some other answer pointed, you can use renderToString() and it will work in some situations (it just precompile your component, it does not provide exactly what you want) - it's more a hack than a solution.

Upvotes: -1

R&#233;mi Doreau
R&#233;mi Doreau

Reputation: 252

You can render a React component to its initial HTML with renderToString() and then display it inside your WebView like so:

import { renderToString } from 'react-dom/server'
import ReactContainer from 'somewhere';
import { WebView } from "react-native-webview";

<WebView source={{ html: renderToString(<ReactContainer />) }}></WebView>;

More infos about ReactDOMServer here.

Upvotes: 7

Shahid ali
Shahid ali

Reputation: 254

if you want to load HTML directly, you can use the html property in WebView’s source property, as shown below:

<WebView
  originWhitelist={['*']}
  source={{ html: '<h1>Hello world</h1>' }}
/>

for more details of react-native-web-view you can learn from here

https://blog.logrocket.com/the-complete-guide-to-react-native-webview/

https://github.com/react-native-community/react-native-webview/blob/master/docs/Reference.md

Upvotes: -2

Related Questions