Integrate Mini apps into existing mobile native application - Passion Infinity

Integrate Mini apps into existing mobile native application

By • • 7 minutes of reading

Suppose that you have two native mobile applications on two platforms Android and iOS. It’s been several years old and has tons of code. So expanding it is challenging. This may leads to some infrastructure changes and you don’t want to do that.

In addition, for some special reasons, some features of your native application need to deeply interfere with the OS system’s native APIs to ensure the most efficient processing speed, but other parts do not need to. Thus, you still have integration with other cross-platform tools so you can share both UI and logic to save costs and time.

There are many scenarios to think about native app integrate with a platform that save costs, time and limit risks.

Today, I want to share a platform Electrode Native and how integrate into existing Native application from scratch in this topic.

Electrode Native is a mobile platform, composed of a set of tools, facilitating the integration and delivery of features written in React Native into existing non React Native iOS/Android applications.

I think Electrode Native’s documentation is quite clear so you should refer to the official documentation for more information. But for me, it’s still difficult to know how to start and take specific steps. For that reason, I won’t go too deep into the theory but I will show you step by step what it looks like.

Electrode Native will runs on Node, if your computer does not have Node installed, you should install it now. You can refer download it from Node page, it’s very easy to install.

After you have setup Node env, next you need to install electrode native so you can use the CLI commands.

npm install -g electrode-native

And you will have to active Electrode Native CLI (ern) version to develop your app, I will use latest version, it will be v0.51.1 while I am writing this article.

ern platform use latest

Now you have finished setting up the environment, let’s make a cup of coffee and we’ll go step by step in detail.

#1. Mini App

We need to know that MiniApp is a JavaScript React Native application. It is not a complete application but a part of a mobile application. Mini App can be simple or complex, have one page or many pages, But important thing to remember that it should comply with the single responsibility principle (SRP)

Suppose we will create a mini app for authentication, you should refer syntax in create-miniapp section for more information.

ern create-miniapp auth-miniapp --template react-native-template-typescript

ERN will start to create React Native skeleton template through above command. The importance thing it may create react-native and react are different versions that they are defined in manifest file. As I mentioned above, we are using v0.51.1 then you should check in manifest package to align current dependencies in package.json off mini app.

Example with ern v0.51.1 (“platformVersion”: “0.51.x” in manifest.json) are using react-native@0.68.7 and react@17.0.2, you should use same version on your mini app to avoid mistake later.

After that you can try to run your mini app on android or ios with the command:

cd <path-to>/auth-miniapp
ern run-android # or ern run-ios

If this is the first you run mini app, ern will create the Runner for you that help your mini app can run alone before you want to integrate with Native app.

You will need to add your mini app to git repository to use later. I have also created the example mini app project. You can download and run it from my repository.

#2. Cauldron

To know more about cauldron, you should check in cauldron section. But I can summarize it as a centralized document database. It helps us store all information about the client mobile application versions, native dependencies, and information about MiniApps. And with that stored information we can easily create a Container for the native app to use later.

Let try to create an cauldron via the command:

ern cauldron repo add <cauldron-alias> <cauldron-url>

Now your cauldron is activated. You can can your native app and mini app that you have created before. Let check this page to get more about the commands.

#2.1 Add Native app via below command.

ern cauldron add nativeapp <YourNative>:ios:0.0.1
ern cauldron add nativeapp <YourNative>:android:0.0.1

#2.2 Add mini app:

ern cauldron add miniapps <your-mini-app-git-repo>#<your-branch>

That’s fine. Looks back again on your <cauldron-url> and you will see cauldron.json file. Remember that we should not manually edit this file, let ern cli take care it.

I have created my cauldron repository you can check it out from here

#3. Container

A mobile application will (and can) only depend on a single container. Composition of miniapps and container customization takes place at the container generation level to tailor a container to a specific target mobile application.

As introduction, mobile native app only works with every mini apps through Container as native dependency. This section you will know how to generate a container include all your mini apps that you have created and use them in your native side.

In current your cauldron is activated, you can generate a new container via the command:

ern cauldron regen-container -v [containerVersion] --resetCache true --fullRegen

Cauldron can have multiple container version. Therefore, you need to specify [containerVersion] to ERN can picks right version to generate. For example, my cauldron have “containerVersion”: “1.0.0”

ern cauldron regen-container -v 1.0.0 --resetCache true --fullRegen

After you have a new container, you must transform the container to target platform Android or iOS and import them into your native project.

I have created step by step how to import container to native project from my cauldron repo. Let check it and practice from your side.

#4. Launching MiniApps

After you finish importing the container, launching a mini app in native side is very simple. You should check launching-miniapps document to know more information because I don’t want to rewrite the documentation I just want to show you clearly step by step how to use them.

#5. Communicate Between Mini Apps and Native App

In order for mini apps and native apps to be able to communicate with each other, Electrode native uses an electrode bridge. But to keep this simple, I want to refer to it as API. It base on Swagger schema to generate the most of code for you by using electrode bridge.

Back to auth-mini app, I have used API to pass data from mini app to native app. It is event to tell with native app that user logged success and native app can continue to handle the flow.

The below I have defined the schema in schema.json file:

{
  "swagger": "2.0",
  "info": {
    "description": "Electrode react native Auth api. ",
    "title": "Electrode Native Auth"
  },
  "produces": [
    "application/json"
  ],
  "paths": {
    "/completed": {
      "event": {
        "tags": [
          "AuthUser"
        ],
        "operationId": "AuthUserEvent",
        "description": "Fire this event when user is authenticated",
        "parameters": [
          {
            "name": "eventData",
            "in": "body",
            "description": "Return user authorized information",
            "required": true,
            "schema": {
              "$ref": "#/definitions/AuthUserEventData"
            }
          }
        ]
      }
    }
  },
  "definitions": {
    "AuthUserEventData": {
      "properties": {
        "token": {
          "type": "string",
          "description": "Token to detect user is authorized"
        },
        "userInfo": {
          "$ref": "#/definitions/UserInfoData"
        }
      },
      "required": [
        "token",
        "userInfo"
      ]
    },
    "UserInfoData": {
      "properties": {
        "username": {
          "type": "string",
          "description": "Name of User"
        },
        "phone": {
          "type": "string",
          "description": "Number phone of user"
        }
      },
      "required": [
        "username",
        "phone"
      ]
    }
  }
}

Now, we can generate API by using cli. After the command completes, you will see 3 separate folders for javascript, ios and android:

ern create-api auth-api --schemaPath <path-to>/schema.json

Then, add the newly generated code to your repo and use it by importing it into the mini app. We will edit package.json in auth mini app as follwing:

 "dependencies": {
    "auth-api": "<your-api-repository>"
  },

From auth mini app, I can emit event looks like this:

AuthUserApi.events().emitAuthUserEvent(userData)

In native app, we have to listen this event to handle somethings:

AuthUserAPI().events.addAuthUserEventEventListener { data in
   // TODO handle the event
}

Using API saves a lot of time in communication between mini app and native app by avoiding creating a lot of boilerplate code.

This is my auth-api and auth-miniapp that you can refer in your implementation.

Finally, I have created 2 Native apps, Android and iOS. They have been integrated with mini apps already. Let see the results:

All repositories used in this article:

, , , , ,

Leave a Comment

Your email address will not be published. Required fields are marked *

2 thoughts on “Integrate Mini apps into existing mobile native application”

Related Posts

Copyright© 2025 Passion Infinity

Scroll to Top