I have found to make the two work and will post here for anyone else looking for the same. There maybe other methods to do this , but this is what worked for me.
So basically we will create a Cordova App using(say) :
cordova create testapp com.test.testapp testapp
This will give me a Folder Structure as so:
testapp
--hooks
--platforms
--plugins
--www
--config.xml
Now inside the testapp folder we run : create-react-app teastappReact
Which will add my react app inside testapp folder.
Your react app will have a main index.js in the /src directory.
I the index.js make sure to wrap your main logic inside a function and then call the function along with Cordova object like so:
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import './index.css';
const startApp = () => {
ReactDOM.render(
<App />,
document.getElementById('root')
);
}
if(!window.cordova) {
startApp()
} else {
document.addEventListener('deviceready', startApp, false)
}
That should do now your app will have the Cordova instance along with Device objects like navigator.camera inside your app.
Also in your react apps index.html which can be found in the public folder copy the html from the index.html that you will find in the Codova www folder. Now we can delete all files from www folder. We will later manually or via a script copy all files from react apps build folder to Cordova www folder.
So my index.html would look something like below, notice the cordova.js file thats included as a script.
<!DOCTYPE html>
<!--
Licensed to the Apache Software Foundation (ASF) under one
or more contributor license agreements. See the NOTICE file
distributed with this work for additional information
regarding copyright ownership. The ASF licenses this file
to you under the Apache License, Version 2.0 (the
"License"); you may not use this file except in compliance
with the License. You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing,
software distributed under the License is distributed on an
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, either express or implied. See the License for the
specific language governing permissions and limitations
under the License.
-->
<html>
<head>
<!--
Customize this policy to fit your own app's needs. For more guidance, see:
https://github.com/apache/cordova-plugin-whitelist/blob/master/README.md#content-security-policy
Some notes:
* gap: is required only on iOS (when using UIWebView) and is needed for JS->native communication
* https://ssl.gstatic.com is required only on Android and is needed for TalkBack to function properly
* Disables use of inline scripts in order to mitigate risk of XSS vulnerabilities. To change this:
* Enable inline JS: add 'unsafe-inline' to default-src
-->
<meta http-equiv="Content-Security-Policy" content="default-src * 'unsafe-inline' 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; img-src * data: content:;">
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
<!-- Latest compiled and minified CSS -->
<title>React App</title>
</head>
<body>
<div id="root"></div>
<script type="text/javascript" src="cordova.js"></script>
</body>
</html>
Finally in your react apps' package.json add the following line:
....
"homepage": "../www"
....
This will make sure your final build file is pointing at the right path.
we can also add the following lines in your package.json build script.
"scripts": {
"start": "react-scripts start",
***"build": "react-scripts build && robocopy .\build ..\www /MIR",***
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject",
"deploy": "npm run build&&gh-pages -d build"
}
It can be robocopy or cp-r based on the OS(Windows/Linux etc)..
We should have our Cordova app ready to be build with
cordova build android/ios.
