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

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.