How to run React JS build in React-Native Webview?

Question

I created complete offline ReactJS web application and I want to run it from android application from Web View using React-Native.

I followed the following procedure to do so:
1. I created a compiled ReactJS web application got the build using the following command:

npm run build

Then I created react-native project and placed the build folder with following architecture
I updated App.js with the following content:

import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View, WebView} from 'react-native';
import {roscon} from "./build/index.html";

type Props = {};
export default class App extends Component<Props> {
  render() {
    return (
      <View style={{height: 300, width: 300,overflow:'hidden' }}>
          <WebView
            source={{uri: roscon}}
            scalesPageToFit={true}
            domStorageEnabled={true}
            javaScriptEnabled={true}
            startInLoadingState={true}
          />
      </View>
    );
  }
}

After running this code I expected it to run my ReactJS Web application, instead I got white screen.

Can you please tell what can be the causing issues and how i can make my ReactJS Web App run on react-native?

Note: I was able to run generated build folder using npm command

serve -s build

But I still can't figure out how to port it to react-native project as WebView

Possible duplicate of [(React Native) Load local HTML file into WebView](https://stackoverflow.com/questions/42851296/react-native-load-local-html-file-into-webview) — Arnaud Christ, May 14 '19 at 12:43
You should be able to use the chrome dev-tools to inspect the webview in your react-native app. Can you try and show us any errors that might show up? — JensV, May 15 '19 at 08:07
Hi, @JensV , I am replying late, But i got that issue solved. I also commented how i achieved that. — Desmnd, May 17 '19 at 05:06

score 3 · Accepted Answer · answered May 17 '19 at 05:05

After research and testing, I found a solution. The main issue i found was the compiled build folder is rendered as static html. And it needed a server to serve pages.

So, I followed this link for getting build project to get it up and running Then, integrating it with nodejs Android Project Samples to get my build folder running in android as a Webview.

Note: I also tried react-snapshot and react-snap but they didn't gave satisfactory results.

score 1 · Answer 2 · answered May 15 '19 at 08:37

1

Try to require the html file correctly and pass it in to source prop in this way:

 <WebView
    source={require('./build/index.html')}
 />

answered May 15 '19 at 08:37

OmidP

61
2
6

Tried. It rendered the vanilla html code, So it didn't worked. – Desmnd May 16 '19 at 12:17

score 0 · Answer 3 · answered Aug 12 '22 at 10:06

Install

npm install react-native-react-bridge

These are used to render React app in WebView npm install react-dom react-native-webview

Requirements

react 16.8+
react-native 0.60+

Usage

Fix metro.config.js to use babelTransformer from this library.

         module.exports = { 
 transformer: {
  babelTransformerPath: 
 require.resolve('react-native-react- >. 
   .bridge/lib/plugin'),
       ...
    },
 };

Make entry file for React app. web.js

import React, { useState } from "react"; import { webViewRender, emit, useSubscribe, } from "react-native-react-bridge/lib/web";

const Root = () => {
  const [data, setData] = useState("");
  // useSubscribe hook receives message from React Native
  useSubscribe((message) => {
    if (message.type === "success") {
      setData(message.data);
    }
  });
  return (
    <div>
      <div>{data}</div>
      <button
        onClick={() => {
          // emit sends message to React Native
          //   type: event name
          //   data: some data which will be serialized by JSON.stringify
          emit({ type: "hello", data: 123 });
        }}
      />
    </div>
  );
};

// This statement is detected by babelTransformer as an entry point
// All dependencies are resolved, compressed and stringified into one file
export default webViewRender(<Root />);

Use the entry file in your React Native app with WebView.

import React from "react";
import WebView from "react-native-webview";
import { useBridge } from "react-native-react-bridge";
import webApp from "./WebApp";

const App = () => {
  // useBridge hook create props for WebView and handle communication
  // 1st argument is the source code of React app
  // 2nd argument is callback to receive message from React
  const { ref, source, onMessage, emit } = useBridge(webApp, (message) => {
    // emit sends message to React
    //   type: event name
    //   data: some data which will be serialized by JSON.stringify
    if (message.type === "hello" && message.data === 123) {
      emit({ type: "success", data: "succeeded!" });
    }
  });

  return (
    <WebView
      // ref, source and onMessage must be passed to react-native-webview
      ref={ref}
      source={source}
      onMessage={onMessage}
    />
  );
};

How to run React JS build in React-Native Webview?

3 Answers3