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

2. Then I created react-native project and placed the build folder with following architecture

3. 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

Answer 1

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

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

Answer 2

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.

Answer 3

Install

npm install react-native-react-bridge

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

Requirements

1. react 16.8+
2. react-native 0.60+

Usage

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

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

2. 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 />);

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