Building a React Native SDK Inside a Super App with 800K Daily Users

Contents
The Challenge: Why Traditional Approaches Fall ShortThe Solution: Module Federation with Re.PackArchitecture Overview for 800K Daily UsersKey ComponentsImplementing Module FederationOffline-First StrategyPerformance Optimization for ScaleSecurity ConsiderationsAlternative Approach: NPM PackagesTools & EcosystemKey TakeawaysRecommended Workflow
Super apps—single platforms hosting multiple services like payments, messaging, and e-commerce—are transforming mobile experiences. Companies like Grab, Gojek, and MyJio have popularized this model, allowing users to access dozens of services without switching apps.

When building a React Native super app serving 800,000 daily active users, the architecture must prioritize scalability, independent module deployment, and offline-first capabilities. Here’s how to build it.

The Challenge: Why Traditional Approaches Fall Short
As apps grow from offering one service to many, the codebase becomes cluttered, app size balloons, and teams struggle to collaborate. Traditional approaches—monorepos or publishing packages to npm—have drawbacks:

Monorepos become unwieldy as teams scale
npm packages require full app redeployment for updates
Super apps need a different approach: micro-frontends for mobile.

The Solution: Module Federation with Re.Pack
React Native is currently the best choice for developing super apps due to its runtime loading capabilities. The key enabling technology is Module Federation, first introduced in Webpack 5 and now available in React Native through Re.Pack.

Module Federation allows code-splitting and dynamic loading of independent modules at runtime—a core mechanism behind super apps. This creates a micro-frontend architecture where:

The Host App runs first on the device
Micro-frontend (MFE) apps are loaded dynamically as needed
Each MFE can be deployed and maintained independently
Architecture Overview for 800K Daily Users
┌─────────────────────────────────────────────┐
│ Host App (Shell) │
│ ─ Navigation & Runtime Management │
│ ─ Bundle Fetch & Offline Caching │
│ ─ Authentication Federation │
└──────────────┬──────────────────────────────┘
│
┌──────────┴──────────┬──────────────────┐
▼ ▼ ▼
┌───────────────┐ ┌───────────────┐ ┌─────────────┐
│ Auth Module │ │ Platform SDK │ │ Mini Apps │
│ ─ Login │ │ ─ Shared APIs │ │ ─ Dashboard │
│ ─ Offline │ │ ─ DB Schema │ │ ─ Payments │
│ ─ Tokens │ │ ─ Analytics │ │ ─ Messaging │
└───────────────┘ └───────────────┘ └─────────────┘
Key Components

1. Host App (Shell)
   The main application that initializes Re.Pack federation, manages navigation, caching, and authentication state.

2. Auth Module
   Handles authentication, MFA, and caches user tokens locally for offline access. The auth app can be used by both host and any micro-app via federation import.

3. Platform Module
   Contains shared SDKs, database schemas, API clients, and reusable utilities accessible by all micro apps.

4. Remote Micro Apps
   Fetched and loaded dynamically at runtime. Each can be versioned independently—no full app store deployment needed for updates.

Implementing Module Federation
Host Configuration:

// host/webpack.config.js
const { withRepack } = require('@callstack/repack');
const { ModuleFederationPlugin } = require('webpack').container;

module.exports = withRepack({
name: 'host',
plugins: [
new ModuleFederationPlugin({
name: 'host',
remotes: {
authApp: 'authApp',
platform: 'platform',
dashboard: 'dashboard',
},
shared: {
react: { singleton: true, eager: true },
'react-native': { singleton: true, eager: true },
},
}),
],
});
Remote Micro App Configuration:

// microApp/webpack.config.js
module.exports = withRepack({
name: 'microApp1',
exposes: {
'./Entry': './src/Entry',
},
shared: {
react: { singleton: true },
'react-native': { singleton: true },
},
});
Dynamic Loading:

import { Federated, ScriptManager } from '@callstack/repack/client';

// Import a remote module at runtime
const { loginUser } = await Federated.importModule({
scope: 'authApp',
module: './AuthModule',
});
Offline-First Strategy
For 800K daily users, offline support is critical:

Prefetching Bundles: When online, download required bundles and cache them locally
Local Config Storage: Store metadata about available bundles and their versions
Offline Launch: On launch, check local cache and load from filesystem
Sync on Reconnect: When online again, download updated bundles automatically
export async function initFederation() {
// Fetch remote config from CDN
const remoteConfig = await fetch('https://cdn.example.com/config.json');

// Cache bundles for offline usage
for (const [name, app] of Object.entries(remoteConfig.microApps)) {
const path = ${RNFetchBlob.fs.dirs.DocumentDir}/${name}.bundle;
const data = await fetch(app.url).then(r => r.text());
await RNFetchBlob.fs.writeFile(path, data, 'utf8');
}

// Register resolver for online/offline cases
ScriptManager.addResolver(Federated.createURLResolver(name => {
return config.microApps[name]?.localPath || config.microApps[name]?.url;
}));
}
Performance Optimization for Scale

1. Use Hermes
   Hermes is the default engine for React Native and is highly optimized for efficient code loading. In release builds, JavaScript code is fully compiled to bytecode ahead of time.

2. Lazy-Load Components
   Use React’s lazy API to defer loading code until it’s first rendered. Consider lazy-loading screen-level components to keep startup time fast.

3. Optimize JavaScript Thread

Remove console.log in production builds
Use InteractionManager to delay non-critical work
Enable useNativeDriver: true for animations
Use LayoutAnimation for fire-and-forget animations

1. RAM Bundles For non-Hermes builds, use random access module bundles (RAM bundles) to limit parsed code to only what’s needed.

Security Considerations
For a super app with hundreds of thousands of users:

Permission Management: Store permission statuses in a database; double-check with native app before granting access
Bundle Validation: Verify signatures and encrypt data for jsbundles
Isolated Runtimes: Load federated modules in separate runtimes to prevent malicious code from affecting the host
White-List Access: Main app should only work with whitelisted mini apps
Alternative Approach: NPM Packages
Some teams choose to publish each mini-app as an NPM package:

Benefits:

Modular development with independent teams
Version control per mini-app
Reusability across projects
Drawbacks:

Requires full app update for mini-app changes
Version management complexity
Larger app bundle size
This approach works for smaller apps but doesn’t scale as well as Module Federation for 800K+ users.

Tools & Ecosystem
Tool Purpose
Re.Pack Metro alternative bundler for React Native supporting Module Federation
ESAD Zero-config CLI and DevTools for React Native Module Federation + Expo
react-native-runtimes Run components in isolated Hermes runtimes to avoid freezing the main JS thread
FlashList High-performance list rendering optimized for large datasets
Key Takeaways
Module Federation is essential for building scalable React Native super apps
Offline-first design is critical for large user bases
Independent deployments reduce release risk and enable faster iteration
Security layers must be built in from day one
Performance monitoring should be continuous at scale
Recommended Workflow
Start with a host app and one mini-app proof of concept
Set up Module Federation with Re.Pack
Implement offline caching early
Create a shared platform SDK for common utilities
Build a prompt library for developer onboarding
Establish CI/CD for independent module deployment
Monitor performance with release builds
“React Native is currently the best choice for developing Super Apps.”

With the right architecture, your React Native super app can scale to millions of users while keeping development teams autonomous and release cycles fast.

Quick Checklist for Super App Teams

[ ] Set up Module Federation with Re.Pack
[ ] Implement offline bundle caching
[ ] Create isolated auth and platform modules
[ ] Enable Hermes for production builds
[ ] Establish security and permission layers
[ ] Build CI/CD for independent deployments
[ ] Monitor JS thread and UI thread performance
[ ] Document prompt library for team standardization