Molecule.dev

← All @molecule/* packages · App templates

@molecule/app-ui-nativewind

Provider bond · ui · App (browser) · v1.1.0 · Apache-2.0

NativeWind UIClassMap bond for React Native

npm install @molecule/app-ui-nativewind

npm · Source on GitHub · Implements @molecule/app-ui

How it works

@molecule/app-ui-nativewind is a provider bond on the app (browser) side: it implements the ui core interface (@molecule/app-ui) with a concrete vendor or library behind it.

Your code calls the core; you wire this provider once at startup. Swapping vendors later is one line in that wiring, not a rewrite.

import { setClassMap } from '@molecule/app-ui'
import { classMap } from '@molecule/app-ui-nativewind'

setClassMap(classMap) // once, at app startup

Reference

Auto-generated, AI-first package reference for the molecule.dev ecosystem. It is written to be read by coding agents as much as by people, and is generated from this package's source — edit src/index.ts JSDoc, not this file.

NativeWind UIClassMap bond for React Native.

Extends the Tailwind classmap with overrides for classes that are unsupported or behave differently in NativeWind / React Native.

Quick Start

import { setClassMap } from '@molecule/app-ui'
import { classMap } from '@molecule/app-ui-nativewind'

setClassMap(classMap) // once, at app startup

Type

provider

Installation

npm install @molecule/app-ui-nativewind @molecule/app-styling @molecule/app-ui @molecule/app-ui-tailwind

API

Constants

classMap

NativeWind UIClassMap — Tailwind classmap with RN-compatible overrides.

Wire at app startup:

import { setClassMap } from '@molecule/app-ui'
import { classMap } from '@molecule/app-ui-nativewind'
setClassMap(classMap)

const classMap: UIClassMap

Core Interface

Implements @molecule/app-ui interface.

Injection Notes

Requirements

Peer dependencies:

  • @molecule/app-styling ^1.0.1
  • @molecule/app-ui ^1.0.1
  • @molecule/app-ui-tailwind ^1.0.1

Runtime Dependencies

  • @molecule/app-styling

  • @molecule/app-ui

  • @molecule/app-ui-tailwind

  • This package emits Tailwind class STRINGS — the host React Native app must have NativeWind v4 configured (babel preset + tailwind.config whose content globs include your source AND node_modules/@molecule/app-ui-nativewind/dist + node_modules/@molecule/app-ui-tailwind/dist). nativewind itself is NOT a dependency of this package.

  • NativeWind v4 supports ~90% of Tailwind CSS; this classmap's overrides absorb the gaps: no CSS grid (grid() approximates with flex-wrap), no hover: (touch uses active:), no backdrop-blur, no CSS transitions/animations (use RN Animated/Reanimated), no position: fixed, no portals (RN Modal handles overlays), no cursor-pointer, no prose. Don't hand-write these utilities in RN app code — go through getClassMap().