$ show founded-labs/react-native-reusables
react-native-reusables is a React Native UI component library that adapts the shadcn/ui copy-paste component model to React Native. It is a pnpm/Turborepo monorepo containing a Next.js/Fumadocs documentation site (apps/docs), an Expo SDK 56 showcase app for live cross-platform previews (apps/showcase), a scaffolding CLI built on Effect-TS (apps/cli), and a shared registry package (packages/registry) with roughly 30 styled components — Button, Dialog, Select, Accordion, Dropdown Menu, Tooltip, and others — plus higher-level authentication blocks (sign-in, sign-up, forgot/reset password, verify email) with optional Clerk integration. There is no data science or analytics code; it is purely a component library and developer-tooling project. The central architectural decision is dual styling-engine support: every component is implemented twice, once for Nativewind and once for Uniwind, both wrapping @rn-primitives (Radix-style primitives ported to React Native). Components use class-variance-authority for variant management, a Slot primitive for asChild composition, a TextClassContext that propagates text styles down component hierarchies (a non-obvious workaround for React Native's lack of CSS style cascading), and a portal/overlay system that uses iOS FullWindowOverlay on native platforms and fragments on web. The target platforms are iOS, Android, and web via Expo. Component source is serialized into shadcn-compatible registry JSON files (public/r/nativewind/*.json and public/r/uniwind/*.json) consumed by both the docs site and the CLI, with catalogs.dev YAML metadata driving publishing and discoverability. The CLI's init/add/doctor commands wrap the shadcn installation machinery with additional project intelligence: the doctor command validates dependencies and detects deprecated file patterns, and project-config.ts parses a project's metro.config.js to determine whether Nativewind or Uniwind is active before writing components.json. The add command delegates component installation to shadcn. Several auth blocks contain explicit TODO placeholders for navigation and form-submission logic that consumers must implement. The dominant maintenance burden is the deliberate duplication across the two styling engines — every API or visual change must be mirrored in both variants, and the generated registry JSON can drift from source files. Dependencies (Expo SDK 56, React Native 0.85.3, Nativewind 4.2.2, Uniwind 1.6.3) are current, and the repo tracks its ecosystem proactively.
The LLM identified 4 files worth highlighting for reuse:
A platform-gated animation wrapper: on iOS/Android it renders an Animated.View powered by react-native-reanimated, while on web it renders a plain fragment passthrough. This isolates the reanimated/web incompatibility into a single self-contained component, letting parent components use uniform animation JSX across all platforms. It imports only platform primitives and reanimated, so it can be extracted into any React Native project needing web-safe animations with zero modification.
A single wrapper that maps Tailwind className strings onto Lucide icon props via cssInterop, eliminating the need for per-icon wrapper components. Icons become styleable with the same class system as the rest of the UI (size, color, stroke width via className). The pattern is directly reusable in any React Native project using lucide-react-native with Nativewind or Uniwind, and it solves the recurring problem of styling icon libraries in a Tailwind-based RN codebase.
Exemplary shadcn-style button implementation combining three patterns: class-variance-authority for variant/size class management, a Slot primitive for asChild composition (letting a Link or Pressable receive button behavior without wrapping DOM), and a TextClassContext that threads text color/style classes from the Button to its inner Text through a React context — a genuinely non-obvious workaround for React Native's lack of CSS style cascading. The file is explicitly designed to be copy-pasted into consumer projects, which is the library's core distribution model.
A cohesive service that reads and writes shadcn-style components.json, resolves path aliases, and — most notably — detects the active styling library (Nativewind vs Uniwind) by parsing the project's metro.config.js. This detection logic is non-obvious and specifically valuable to anyone building React Native scaffolding tools that must adapt to a user's existing toolchain rather than assuming one. While coupled to the CLI's conventions, the config-reader/writer pattern is cleanly separated and adaptable.