CODEWITHSUNDEEP
reactjsreact-native
Yash Kaushal
Yash Kaushal

Reputation: 123

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

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

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

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

Upvotes: 10

Views: 3403

Answers (3)

Manish Singh Chouhan
Manish Singh Chouhan

Reputation: 391

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

Upvotes: 0

Desmnd
Desmnd

Reputation: 450

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.

Upvotes: 3

OmidP
OmidP

Reputation: 71

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

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

Upvotes: 1

Related Questions