Posts tagged: react-native

23 posts

Series:

An app running from copies built into it while one of its supply lines fails

Fallback for federated remotes: the copy in the binary and the net in the session

The CDN goes down and the app still starts, from a copy of each remote built into the binary. In a CDN launch, a remote that fails to load drops to its own copy while the other stays on the CDN, and Try again finally retries.

Two app versions receiving their own remote versions from one CDN while a map line flips

CDN delivery: the version map, the resolver, and the live flip

Every launch, the app asks the CDN which remote versions it may run. Then an operator ships a new one to an installed app with one directory and one line of JSON, and rolls it back the same way. Plus what Apple and Google permit, quoted from the current texts.

Three supply lines feeding one federated app: a dev server, a registry and a CDN

The production build and the three modes of a federated React Native app

The remotes leave the dev server: built for production, signed at build time and served from a CDN that is a directory and a port. The registry sits in the middle, and one table says which changes still cost an app-store release.

A federated remote reaching a native screen through the host's hatch and getting a result back

shell.navigateTo: native screens from a federated remote in React Native

A remote ships JavaScript only, so the host lends it a native screen through one promise: a routing table, a TurboModule, and a Quick Battle in SwiftUI and Compose built so every exit settles the promise.

A large dial standing on the ground with a pipe running from it into each of three flat panels, every panel carrying a smaller dial of its own; two of the small needles rest upright and the third leans into a red arc

Accessibility testing across federated remotes in React Native

A shared testing package gives every remote the same WCAG bar: contrast, touch targets and status semantics checked in the packages that own them, each team's own screens checked in its own suite, and a failing test that found a button nobody could measure.

One design-system palette feeding three federated app panels

The design system as a federated singleton in React Native

Three federated apps carry three copies of the same greys until a design-system package moves to the seam: gluestack-ui components and NativeWind under Re.Pack, one shared singleton, and one theme toggle that re-themes every remote at once.

Two backends feeding one shared client cache across federated modules

Two backends, one client? RTK Query vs Apollo in React Native

The same PokéAPI data arrives over REST and GraphQL through one RTK Query slice, one tag invalidates across both, and the honest question is when Apollo's normalised cache is worth two caches during the transition.

The same federated app wired to two different state stacks

State stacks under federation: the same React Native app built twice

TanStack Query and Zustand rebuild the app Redux Toolkit and RTK Query just built; both work, and what separates them is what happens when independent teams stop coordinating.

A federated remote adding its own slice to a shared store while another remote reaches across to it

Client state across the seam: remotes that bring their own slices in React Native

A remote injects the slice it alone owns into the shared store, the contract carries the one action that crosses, and a write arrives as a prop; dispatch before the slice exists and the add vanishes in silence.

A federated app drawn as territories owned by different teams, joined by thin shared rails and one small central shell

Who owns what: boundaries, teams and coupling in a federated React Native app

Who owns a boundary, a component, a data definition? Five tests for cutting a federated React Native app along team lines, and what moves each answer.

A host app holding one shared store that two separately shipped features fill with live API data

One shared store: server state across federated remotes in React Native

A remote and an installed package inject their endpoints into one host store and share one cache; get the sharing wrong and the screen hangs on a spinner that never resolves.

RTK Query tags vs TanStack Query keys

Tags vs query keys: a small API difference that changes how teams coordinate

RTK Query tags and TanStack Query keys look interchangeable in single-team code. At multi-team scale they change what fails when teams drift out of sync.

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.

Separately built apps installing versioned packages (a typed contract and a shared screen) from one registry

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

No app can see what the others ship. Two packages, published and installed by version (a typed contract and the shared detail screen), give every side one definition and let 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

React Native token storage: AsyncStorage vs SecureStore

Tokens don't belong in AsyncStorage. How SecureStore, an encrypted store and AsyncStorage split the job in React Native, and what goes where.

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.

A forking path with a check mark on the chosen branch and a spotlight waiting at its end

How to pass a React Native tech test

Practical advice from someone who reviews take-home tech test submissions. What actually matters, what doesn't, and the mistakes that cost candidates the job.