SYSTEM Cited by 1 source

react-strict-dom¶

react-strict-dom is Meta/Facebook's open-source library that lets developers write an HTML + CSS subset which the library maps to React Native primitives on iOS/Android and to plain HTML/CSS on the web, with zero runtime cost on web because a build step strips the abstraction layers.

Upstream: github.com/facebook/react-strict-dom
Pairs with StyleX for styling.

What it does¶

Instead of writing React Native components on web (via react-native-web's HTML-translation pass), react-strict-dom inverts the substrate: write HTML-like components (html.div, html.button, html.span), and the library maps those to:

Web: plain DOM elements, no adapter cost.
Native (RN): maps to RN primitives (View, Text, etc.) at build/runtime.

import { css, html } from 'react-strict-dom';

const styles = css.create({
  button: {
    backgroundColor: {
      default: 'white',
      ':hover': 'lightgray'
    },
    padding: 10
  }
});

function MyButton() {
  return (
    <html.button style={styles.button}>
      A cross-platform button
    </html.button>
  );
}

Why teams choose it over react-native-web¶

Zalando's 2025-10 disclosure gives two reasons:

Future-proof substrate. HTML + CSS have evolved for decades and are unlikely to be displaced. RN-specific component abstractions "could potentially become obsolete at any point."
Zero runtime cost on web. A build step removes the adapter layer; the web output is plain HTML + CSS. This contrasts with react-native-web, which carries its translation logic at runtime in the browser.

The tradeoff in the other direction: the HTML subset is a smaller expressive surface than full RN. See concepts/cross-platform-ui-subset-tradeoff.

The `compat` API — escape hatch for platform-specific props¶

When the HTML subset doesn't cover a required native-side prop, compat.native lets the developer pass specific props through to the mapped native component and optionally override the rendering:

<compat.native
  {...props}
  aria-label="label"
  as="span"
>
  {(nativeProps) => <Text {...nativeProps} />}
</compat.native>

This is the controlled-ejection point when the HTML surface isn't expressive enough for a per-platform need. See patterns/compat-native-escape-hatch.

Pair with StyleX¶

react-strict-dom works hand-in-hand with StyleX for cross-platform styling. StyleX supplies tokens (font sizes, colours, borders) that behave like CSS variables on all platforms, polyfills a subset of CSS capabilities (pseudo-classes, media queries), and — on web — compiles to a regular CSS file.

Seen in¶

sources/2025-10-02-zalando-accelerating-mobile-app-development-with-rendering-engine-and-react-native — Zalando's chosen cross-platform UI substrate on top of React Native + Rendering Engine. Used to power a design-system component library with Metro file-resolution (Foo.native.ts / Foo.ts) for the per-platform cases the HTML subset can't handle. Zalando cites HTML longevity and the zero-runtime-on-web property as the decision drivers.