Integrate Tabris.js with existing Android Apps

Tabris.js application can be integrated into other existing Android applications. On the first impression, it can be considered complicated to use Tabris.js along with a native Android app. However, you can easily embed Tabris.js into your native app with a few steps described below.

In this article, we are going to create and integrate a simple Tabris.js app into an example Android app. The Android application contains a button that loads and renders Tabris.js components when clicking on it.

First, create a new Tabris.js project by following the guide here.

Second, create a simple example Android project and update the activity_main.xml layout file as below:

To add Tabris.js dependency to your local build, download the latest Tabris.js Android Cordova platform. Create the environment variable TABRIS_ANDROID_PLATFORM on your operating system and point it to the downloaded platform root directory.

Declare specific maven repositories for jitpack and tabris in the project build.gradle:

Add the tabris and kotlinx-coroutines-android implementations in the app build.gradle:

Append the following source codes to the MainActivity.kt class. This code loads Tabris.js sources from the specified URL or path, renders the result in the TabrisFragment, and appends the fragment to the fragment_container.

It is recommended to load the JavaScript code from the development server when developing or testing the project. However, you must provide some details in the AndroidManifest.xml file in order to sideload the Tabris.js sources successfully.

First, make sure you have ACCESS_NETWORK_STATE and INTERNET permissions:

Next, apply the usesCleartextTraffic option to allow plain text network communication (as restricted in Android 9):

Provide the replace element that prevents theme conflict during sideloading.

Now build and run your Android app as usual. Once you click the button, it should load the JavaScript code from the development server and display it.

When you create a release build, I suggest moving essential Tabris.js sources to the assets folder of the Android project and load them directly from there:

private val projectPath = "file:///android_asset/tabris-js-app"

That is all. Hope this small blog post helped you understand how to properly integrate Tabris.js with an existing Android App.

You can download the complete project from GitHub.