How to use WebView to show React jsx file

Question

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'}
      />
    );
}
}

score 1 · Accepted Answer · edited Oct 11 '19 at 21:58

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([])}}
    />
  );
 }
}

thanks for give me the answer. I will try your solution now. — Kakata Kyun, Oct 07 '19 at 03:10
I have tried but I can't do correctly. Please describe clearly with my Update info. Thank you very much @Jiml — Kakata Kyun, Oct 07 '19 at 06:26

How to use WebView to show React jsx file

1 Answers1