How to Convert Momen App to Native Mobile App?

Though Momen doesn't support the development of native apps, there are ways to convert your webs built by Momen into mobile apps for Google Play Store.

Introduction

In this comprehensive guide, we'll walk you through the process of transforming your Momen web application into a mobile app.

Purpose

This guide outlines the process of transforming a web application built with Momen into a mobile app and publishing it on the Google Play Store.

Required Dependencies

1. Momen

2. Node

3. React Native

4. Java JDK

5. Android Studio

Note: While you can use any code editor of your choice, you must install Android Studio to obtain the necessary tools and environment for compiling your Android app.

Implementation Path

1. Obtain the Momen Web Address

2. Set Up the Environment and Create a React Native Project

3. Modify App.js and Create a WebView Link to Your Web Page

Install react-native-webview.

npm install react-native-webview

Link to H5 page

/* eslint-disable react-native/no-inline-styles */
import React, {useEffect, useRef, useState} from 'react';
import {WebView, WebViewNavigation} from 'react-native-webview';
import {BackHandler} from 'react-native';

function App(): JSX.Element {

  const webViewRef = useRef<any>(null);
  const [backButtonEnabled, setBackButtonEnabled] = useState<boolean>(false);

  useEffect(() => {
   // detect back button pressed in Android
    BackHandler.addEventListener('hardwareBackPress', () => {
      if (backButtonEnabled) {
        // webview back
        webViewRef?.current?.goBack();
        return true;
      }
      // exit app
      BackHandler.exitApp();
      return false;
    });
  }, [backButtonEnabled]);

  const onNavigationStateChange = (event: WebViewNavigation) => {
    setBackButtonEnabled(event.canGoBack);
  };
  
  return (
      <WebView
        ref={webViewRef}
        source={{uri: 'The address of the Momen-generated web page obtained in the first step above'}}
        style={{flex: 1}}
        setBuiltInZoomControls={false}
        // This step is to let Android use the generated web page's own caching policy
        cacheMode="LOAD_CACHE_ELSE_NETWORK"
        onNavigationStateChange={onNavigationStateChange}
      />
  );
}

export default App;

4. Package the React Native Project to Generate an AAB

Follow the official React Native documentation to:

1. Generate an upload key

2. Set up the Gradle variables

3. Add the signature configuration to the project's Gradle configuration

4. Generate the release AAB (Android App Bundle) package

Note: Packaging may involve configuring application icons, names, and other details.

Change app name

Change app icon

5. Submit to the Google Play Store for Review and Release

If you encounter any issues during the process, feel free to join our Discord community for assistance.

About Momen

Momen is a no-code web app builder, allows users to build fully customizable web apps, marketplaces, Social Networks, AI Apps, Enterprise SaaS, and much more. You can iterate and refine your projects in real-time, ensuring a seamless creation process. Meanwhile, Momen offers powerful API integration capabilities, allowing you to connect your projects to any service you need. With Momen, you can bring your ideas to life and build remarkable digital solutions and get your web app products to market faster than ever before.