In the last post Android hybrid with cordova we discussed how to hybrid an Android App with cordova.

Now we’ll make a further step: use web framework ReactJS on web part of the hybrid App.

Create ReactJS project

First you should have Node.js installed.

Then execute npx create-react-app web under directory of your hybrid App project.

Configure Webpack

Webpack 4 may not work well. Issue: Cannot read property ‘thisCompilation’ of undefined. So we use webpack 3.11.0 instead of the newest version.

  • npm install --save-dev webpack@3.11.0 babel-core babel-jest babel-loader node-sass css-loader sass-loader style-loader

  • Create webpack.config.js under App/web

const path = require('path');

const BUILD_DIR = path.resolve(__dirname, 'www');
const APP_DIR = path.resolve(__dirname, 'src');

const config = {

   "entry": `${APP_DIR}/index.js`,
   "output": {
       "path": BUILD_DIR,
       "filename": 'bundle.js'
   "module": {
       "rules": [
               "test": /\.(js|jsx)$/,
               "exclude": /node_modules/,
               "use": {
                   "loader": "babel-loader",
                   "options": {
                       "presets": [
               "test": /\.(css|scss)$/,
               "use": [
   resolve: {
       extensions: ['.js', '.jsx'],
   devtool: 'eval'

module.exports = config;
  • Modify App/web/package.json to "react-scripts build && ./node_modules/.bin/webpack --config webpack.config.js".

Web code

  • Move App/web/src/logo.svg to App/web/src/images.

  • We will not pack images in webpack, so we can make some changes in App/web/src/App.js, remove import logo from './logo.svg';. Change <img src={logo} className="App-logo" alt="logo" /> to <img src='images/logo.svg' className="App-logo" alt="logo" />

  • We need an html page to use the ReactJS code. Just copy App/web/public/index.html to output directory App/web/www, rename it to react.html. Add a line <script type="text/javascript" src="bundle.js"></script> under <div id="root"></div>.

  • Create some tool scripts to build and copy generated files to SD card of device. Check of CordovaDroid.

Native code

  • Now we shall create a new native Activity to embed react.html. Create ReactActivity. Don’t forget add it to AndroidManifest.xml and make a new button in MainActivity to jump to ReactActivity.
public class ReactActivity extends ExtendCordovaActivity {
    public String getConfig() {
        return "react";

    public String getWebPagePath() {
        return WebPagePath.INTERNAL_STORAGE;
  • Create a new react.xml in App/src/main/res/xml which use react.html we just created.
<?xml version='1.0' encoding='utf-8'?>
<widget android-versionCode="1" id="com.jmengxy.cordovadroid" version="1.0.0" >
    <feature name="Whitelist">
        <param name="android-package" value="org.apache.cordova.whitelist.WhitelistPlugin" />
        <param name="onload" value="true" />
        A sample Apache Cordova application that responds to the deviceready event.
    <author email="" href="">
        Apache Cordova Team
    <content src="react.html" />
    <access origin="*" />
    <allow-intent href="http://*/*" />
    <allow-intent href="https://*/*" />
    <allow-intent href="tel:*" />
    <allow-intent href="sms:*" />
    <allow-intent href="mailto:*" />
    <allow-intent href="geo:*" />
    <allow-intent href="market:*" />
    <preference name="loglevel" value="DEBUG" />
  • Go to App project directory and execute python3, select build -> qa -> debug (type 1,1,1). The script starts to build ReactJS project and Native App, then upload generated web files to SD card.

  • Run App from Android Studio, click REACT button. You would get following page.

Github Repo




Android hybrid with cordova

Issue: Cannot read property ‘thisCompilation’ of undefined