Blog

Current series

All series
19 parts · Ongoing — next part 20 JulIn progress

React Native Module Federation

Build a federated React Native app from scratch with Module Federation and Re.Pack: runtime remotes, the shared-singleton contract, and a host shell that owns navigation.

5 of 19 publishedStart with part 1Next part · 20 Jul
Server state and client state in React

Server state and client state: why React apps need two libraries

Server state and client state have different requirements. Why modern React stacks split the job between two libraries instead of one store.

A host and a federated remote each installing their own version of one shared contract package from a registry

The contract package: a versioned seam between federated remotes in React Native

The host can't see what a remote exposes. A contract package, published and installed by version, gives both sides one definition and lets semver govern drift.

A React Native host app with a bottom tab bar, each tab loading a different remote at runtime

The host shell: federated remotes as tabs in React Native

Turn the host from a single screen into a real app shell: it owns the tab bar and navigation, and each tab is a remote built, shipped and loaded on its own.

A host and a remote React Native app sharing one copy of a library through a single share scope

The shared-singleton contract in React Native Module Federation

Share react, react-native and a native library across a host and its remote the right way; getting it wrong crashes the app on launch, not quietly.

A host React Native app loading a screen from a separate remote app at runtime

Your first federated remote in React Native

Two React Native apps, one loading the other's screen at runtime over Module Federation 2.0 with Re.Pack. Every step copy-paste, ending in a running app.

Module Federation in React Native

Why Module Federation in React Native

What runtime micro-apps buy a React Native app, what they cost, and when the trade is worth it. Intro to a series that builds a federated setup from scratch.

Feature-first project structure in React Native

Why I use feature-first project structure in React Native

An argument for organising React Native projects by feature, not by type. The delete test, import boundaries, where shared code lives.

Detox and Cucumber BDD for React Native E2E testing

Detox + Cucumber BDD for React Native E2E testing

Detox + Cucumber for React Native E2E. Step definitions, a custom formatter, parallel execution, and accessibility regression tests in plain Gherkin.

Three descending steps holding a locked cube, a safe and an open tray, with a sorting arrow

Tiered secure storage in React Native

Three React Native storage tiers: Keychain for tokens, encrypted store for PII, AsyncStorage for preferences. When to use each, and how Redux Persist fits in.

A mesh screen across a pipe intercepting incoming arrows and sorting them into a success tray and a failure tray

Setting up MSW v2 in React Native

Setting up Mock Service Worker v2 in React Native, from installation to a full set of handler scenarios: success, errors, timeouts and offline.

Interview Kit running on a laptop during a technical interview

I built an app the hiring panel will never open

From Notion to markdown to a React app for running structured technical interviews: three iterations to find a format that works live and reports cleanly.

Designing a take-home tech test for software engineers

How to write a take-home tech test that candidates actually want to do

Most take-home tests fail because of setup friction, unclear briefs, or disrespecting people's time. This is how I designed one that candidates thank us for.

Load more posts