Super App Showcase – micro-frontends for mobile apps

Bring micro-frontend architecture to your mobile React Native app with Re.Pack and make it a Super App.

Learn more about Super Apps here: https://www.callstack.com/super-app-development.

🚧 We are currently updating this project to support Re.Pack 5 and Module Federation 2. Additionally, we are working on a more streamlined deployment process for mini apps. Stay tuned for more updates! 🚧

---

The problem

As small apps grow, offering multiple services (payments, messaging, social network, gaming, news, etc.), maintaining them becomes challenging. The codebase can become cluttered, and the app size may deter users who only need a few services. Today, teams dealing with such a challenge can either use monorepo to help draw the boundaries between functionalities, or leverage publishing and consuming packages from npm. However, both approaches have their drawbacks. At the same time, web teams have acccess to micro-frontend architecture, which allows them to split the app into smaller, more manageable parts downloadable on demand.

The solution

This showcase demonstrates how to achieve a proper micro-frontend architecture for mobile apps with Module Federation. It simplifies setup and maintenance, allowing independent apps to be deployed separately or as part of a super app. Micro-frontends can be moved to separate repositories, enabling independent team work or external contributions. Unlike classic monorepos, this setup uses runtime dependencies, so updating a micro-frontend automatically updates all apps using it without redeployment.

The Super App

Host App	Mini Apps Interaction	Booking Standalone App

Structure

The super app contains 4 apps:

• host - the main app, which is a super app. It contains all the micro-frontends and provides a way to navigate between them.
• booking - micro-frontend for booking service. Booking exposes UpcomingAppointments screen and MainNavigator. MainNavigator is Booking app itself. UpcomingAppointments screen is a screen, which is used in the super app in its own navigation.
• shopping - micro-frontend for shopping service. Shopping exposes MainNavigator. MainNavigator is Shopping app itself.
• news - micro-frontend for news service. News exposes MainNavigator. MainNavigator is News app itself. News mini app stored in separate repository https://github.com/callstack/news-mini-app-showcase to provide the example of using remote container outside of the monorepo.
• dashboard - micro-frontend for dashboard service. Dashboard exposes MainNavigator. MainNavigator is Dashboard app itself.
• auth - module that is used by other modules to provide authentication and authorization flow and UI.

Each of the mini apps could be deployed and run as a standalone app.

How to use

Requirements

⚠️ Important: This project requires:

• Node.js version 22 or higher
• pnpm as package manager

Please refer to the official pnpm installation guide for detailed setup instructions.

After installation, it's recommended to align your pnpm version with the project:

pnpm self-update

Setup

Install dependencies for all apps:

pnpm install

iOS

In case automatic pods installation doesn't work when running iOS project, you can install manually:

pnpm pods

Running the Super App

Start DevServer for Host and Mini apps:

pnpm start

Run Super App on iOS or Android (ios | android):

pnpm run:host:<platform>

Running the Mini App as a standalone app

💡 NOTE

The "booking" and "shopping" mini-apps can't be run in standalone mode (i.e. without the host running). This is a deliberate decision of this repository to showcase the possibility and to reduce the amount of work to keep the mini-apps dependencies up-to-date.

It's up to you to decide on what kind of developer experience your super app has.

Start DevServer for a Dashboard Mini App as a standalone app:

pnpm start:standalone:dashboard

⚠️ IMPORTANT

Running the Dashboard Mini App as a standalone requires exposing auth module:

pnpm start:auth

Code Quality Scripts

Run tests for all apps:

pnpm test

Run linter for all apps:

pnpm lint

Run type check for all apps:

pnpm typecheck

Contributing

Read the contribution guidelines before contributing.

Made with ❤️ at Callstack

Super App showcase is an open source project and will always remain free to use. If you think it's cool, please star it 🌟. Callstack is a group of React and React Native geeks, contact us at [email protected] if you need any help with these or just want to say hi!