I have browsed through the React guide, and for someone starting a new Cordova/Onsen UI/React project from a clean slate, does the guide assume that the project is setup in any particular way or following certain convention?

I have looked through other React tutorials or quick start, and observe several possible variants.

• Build/packaging system: Some recommend Webpack, others using Browserify and some others using other combinations of preferred tools.
• Project directory/folder structure: some prefer to put their source files in a different directory other than {project-root}/src.
• JSX Transpiling: Some recommend doing in-browser transpiling of JSX using Babel for development/testing, while others recommend setting up the project to use Node.js transpiling (done within Webpack or Browserify build/bundling process?) for optimal performance in production mode.

It seems to me that there is no standard React app project layout we can assume since many things are configurable to an individual developer’s personal preferences.

It would be good if you can state the assumptions or prerequisites (if any exist) on how the React project is laid out for your guide. Thanks!

So I have a little time today, and I did a little experiment. My objective is to try if there’s a hack or workaround to get Onsen 2 to work on an old Android WebView (based off Chrome 30) on KitKat 4.4.2 by using polyfills.

For the impatient ones, I am only halfway successful. So you can stop reading now.

Using the navigator template (with AngularJS) as a test project, I grabbed the following polyfills from WebCOmponents and Babel:

<script src="lib/babel-polyfill/dist/polyfill.js"></script>
<script src="lib/webcomponents/webcomponents-lite.js"></script>
<script src="lib/webcomponents/custom-elements.min.js"></script>
<script>
window.addEventListener('WebComponentsReady', function() {
console.log("WebComponentsReady");
    
    var head = document.getElementsByTagName('head')[0];
    
    var e = document.createElement('script');
    e.src = 'components/loader.js';
    head.appendChild(e);
    
    e = document.createElement('script');
    e.src = 'lib/angular/angular.min.js';
    head.appendChild(e);
    
    e = document.createElement('script');
    e.src = 'lib/onsenui/js/onsenui.min.js';
    head.appendChild(e);
    
    e = document.createElement('script');
    e.src = 'lib/onsenui/js/angular-onsenui.min.js';
    head.appendChild(e);

    // *** Still having problem trying to run ons.bootstrap(). ***
    // *** WebView complains 'ons' and 'angular' are undefined. ***
    ons.bootstrap()
      .controller('AppController', function() {
        this.pushes = 0;
        this.pops = 0;
      });
    ons.ready(function() {
        console.log("Onsen UI is ready!");
    });
});
</script>

ons and angular are reported as null. Wonder if there’s a way to wait/listen for some sort of event before trying to call ons.bootstrap().

As you can see, it manages to render the navbar and button nicely with material design. But angularjs data binding isn’t working and the bootstrap doesn’t work yet.

Will try again if I have any newer ideas.

@khemry Yes, I am using Onsen UI 2 already.

Previously, Onsen UI 1 projects may be able to support Android below 4.4.4 without a newer WebView. That’s the good part.

Currently when using Onsen 2, I have to use Crosswalk for older devices.

@khemry

{
    "plugins": [
        "mobi.monaca.plugins.Monaca"
    ],
    "framework_version": "3.5",
    "xcode_version": "7",
    "cordova_version": "6.2",
    "plugin_settings": [],
    "external_plugins": [
        "cordova-plugin-console@1.0.7",
        "cordova-plugin-whitelist@1.2.2",
        "cordova-plugin-splashscreen@3.2.2",
        "cordova-custom-config@2.0.3"
    ]
}

Anyway, this morning I totally replaced my Onsen UI (2.2.4 that came with the project template?) with the latest 2.4.2 and the error seems to have gone away.

Before that, I was patching the old Onsen UI 2.2.4 with .js and .css files one-by-one from unpkg.com CDN. And then it might have become sort of broken anyway.

@khemry I am not using Monaca Cloud at all. Nor have I registered any user account. I am just including Onsen UI in my project, so I don’t know why it is trying to contact Monaca Cloud ondeviceready.

Perhaps I manually edited <project_dir>\.monaca\project_info.json directory and it thinks I am using Monaca Cloud?

I am getting the following error.

Class not found(anonymous function) @ loader.js:503

Did some tracing and the error is Onsen’s www/components/loader.js.

  // Get device id
  document.addEventListener("deviceready", function() {

    cordova.exec(function(result) {
        monaca.cloud.deviceId = new String(result.deviceId);
        monaca.cloud.url = new String(result.url);
        monaca.cloud.backendId = new String(result.backendId);
        monaca.cloud.apiKey = new String(result.apiKey);

        // execute and clear postQueue
        for (var i = 0; i < monaca.cloud.postQueue.length; i++) {
          monaca.cloud._doPost.apply(monaca.cloud, monaca.cloud.postQueue[i]);
        }
        monaca.cloud.postQueue = [];
      }, function(error) {
        console.error(error); // <--- ERROR HERE
      },

      "Monaca",
      "getRuntimeConfiguration", []
    );

  }, false);

Not sure what this does. Should this be a concern?

It looks like it is trying to authenticate to Monaca Cloud with a device ID, backend ID and API key for a registered Monaca Cloud user.

How does the splash screen knows what color to use as the surrounding padding border area that is not covered by the Splash screen PNG image itself?

When placed in a portrait mode, it is obvious that the top and bottom empty screen space was filled in somehow using a color matching the edges of the original PNG image, which is centered nicely vertically and horizontally.

Thus, are there some details to take note of when creating the splash screen image in order for this color fill magic to work? I suppose number 1 is to ensure the images are of the exact same dimensions as those sample PNG for different resolutions.

@Fran-Diox said:

@wetfeet init and show are page events, not tab events.

I checked the reference and ons-tabbar has these attributes. I thought the events are specific to the ons-tabbar component itself.

I believe similarly ons-page also has the ons-init, ons-show, ons-hide attribute. source

You are getting those events 3 times at least, once per page inside tabbar. I think you want to do that on init event of the tabbar’s parent page. Also, check that the event is fired by that page, not a child page (there is an example here, line 5 of JS).

OK. Anyway, what is the easiest way to show a busy loading popup like the one below? Use ons-modal? I haven’t been able to easily create the white div box and spinning circle icon.