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

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:

1. Prefetching Bundles: When online, download required bundles and cache them locally
2. Local Config Storage: Store metadata about available bundles and their versions
3. Offline Launch: On launch, check local cache and load from filesystem
4. 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

4. 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

1. Module Federation is essential for building scalable React Native super apps
2. Offline-first design is critical for large user bases
3. Independent deployments reduce release risk and enable faster iteration
4. Security layers must be built in from day one
5. Performance monitoring should be continuous at scale

---

Recommended Workflow

1. Start with a host app and one mini-app proof of concept
2. Set up Module Federation with Re.Pack
3. Implement offline caching early
4. Create a shared platform SDK for common utilities
5. Build a prompt library for developer onboarding
6. Establish CI/CD for independent module deployment
7. 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