Skip to content

SYSTEM Cited by 1 source

Metro bundler

Metro is React Native's default JavaScript bundler — the tool that takes TS/JS modules and produces the JS bundles RN loads on iOS / Android / web.

The feature that matters here: platform-specific file resolution

When a consumer writes import "./Foo", Metro resolves the import by looking for platform-specific file extensions in order of specificity:

  • Foo.ios.ts — iOS-specific implementation.
  • Foo.android.ts — Android-specific implementation.
  • Foo.native.ts — both iOS and Android (everything RN considers "native").
  • Foo.ts — fallback (picked on web, or when no platform-specific variant exists).

This enables a single import path to resolve to different implementations per target platform, at build time, with no runtime dispatch cost. Consumers don't know or care which implementation they got — they only see the shared types.

See concepts/platform-specific-import-resolution for the concept and patterns/platform-specific-ts-file-resolution for the pattern of using it intentionally as a cross-platform-UI escape hatch.

Why this is load-bearing for cross-platform UI

A cross-platform UI abstraction like react-strict-dom covers a subset of each platform's capabilities. For the non-intersection, teams still need per-platform implementations. Metro's file resolution gives that a clean shape:

  • Button.ts — types only.
  • Button.web.ts — web implementation (via react-strict-dom).
  • Button.native.ts — iOS + Android implementation (RN primitives or via react-strict-dom).
  • Button.ios.ts / Button.android.ts — per-platform divergence if needed.

The consumer writes import { Button } from "./Button" and doesn't have to branch on platform.

Seen in

Last updated · 507 distilled / 1,218 read