CODEWITHSUNDEEP
reactjsreact-nativewebviewjsx
Kakata Kyun
Kakata Kyun

Reputation: 714

How to use WebView to show React jsx file

I can't see any support to React jsx local file. How can I use them in WebView ? Can someone help me . I'm using in this case like this: <WebView source={{ uri: isAndroid ? 'file:///android_asset/android_asset/index.jsx' : 'index.jsx' }} allowUniversalAccessFromFileURLs={true} onShouldStartLoadWithRequest={request => { return true }} useWebKit={false} /> UPDATE

I tried for hours but I can't find the way how to import React file to Javascript. this is my react file like: index.jsx 

import * as React from 'react';`
export class TVChartContainer extends React.PureComponent {

    componentDidMount(){ // Do something}
    render(){
    return (
      <div
        id={this.props.containerId}
        className={'TVChartContainer'}
      />
    );
}
}

Upvotes: 2

Views: 6487

Answers (1)

Jiml
Jiml

Reputation: 397

You need to get HTML string. In WEB React you can render JSX by ReactDom but in ReactNative you can't do it. The easiest way is generating html string according to your jsx and data. You can put everthing there. I show you several examples.

class MyInlineWeb extends Component {

componentDidMount(){ // Do something}

 renderHtmlAndroid = (data) => {
   return `<div>
            <style>
              .block {}
            </style>
            <div class="block">${data}<div>
           <div>`
 }

 renderHtmliOs = (data) => {
   return `<!DOCTYPE html>
           <html>
             <head>
              <title>Title</title>
              <meta charset="UTF-8" />
             </head>
             <body>
              <div id="app">${data}</div>
             </body>
            </html>`
 }

 render() {
     return (
    <WebView
     originWhitelist={['*']}
     source={{html: isAndroid ? this.renderHtmlAndroid([]) : this.renderHtmliOs([])}}
    />
  );
 }
}

Upvotes: 1

Related Questions