RNBlocks Isn't a UI Library. It's a UI Source Registry.

Whenever developers first discover RNBlocks, their default instinct is to compare it to tools they already know:

“Is this like NativeBase? Tamagui? React Native Paper? Or is it just another paid template pack?”

The answer is none of the above. Comparing RNBlocks to a traditional UI library misunderstands where the code lives and how it is consumed.

A traditional UI library sells you an abstraction layer packaged inside node_modules. RNBlocks is an open-source Component Registry that distributes production-oriented source code directly into your repository.

A dependency gives you an API. A source registry gives you an implementation.

TRADITIONAL UI LIBRARY
Your App
  └── node_modules
        └── UI Framework
              ├── Theme System
              ├── Global Providers
              ├── Hidden Dependencies
              └── Internal Abstractions

RNBLOCKS SOURCE REGISTRY
Registry Manifest (GitHub)
  └── CLI (npx @rnblocks/cli add <block>)
        ▼
Your Repository
  └── components/rnblocks/
        ├── block.tsx
        ├── block.types.ts
        └── block.utils.ts
        ▼
Your App (You own the source code)

1. What Happens When You Add a Block?

When you install a component with the RNBlocks CLI, the flow is transparent and concrete:

1. Metadata resolution: The CLI resolves the block's manifest and validated Zod schema from the open registry.
2. Source download: It fetches the unbundled, readable TypeScript files.
3. File placement: It writes the files directly into your project's components/rnblocks/ folder.
4. Explicit dependencies: If a block requires a peer package (such as react-native-svg for charting), the CLI explicitly prompts you to install it.
5. Source ownership: The code is now yours. There is no upstream lock-in.

For example, running npx @rnblocks/cli add pie-chart produces a clean, self-contained file structure in your repo:

components/
└── rnblocks/
    └── pie-chart/
        ├── pie-chart.tsx                // Main interactive component
        ├── pie-chart.types.ts           // Strict TypeScript definitions
        ├── pie-chart.utils.ts           // Math & geometry calculation
        └── pie-chart.rolling-number.tsx // Odometer number transition

2. Why Source Ownership Matters

When you consume a UI library as a black-box dependency, you are bound to its constraints:

• Need a different animation curve? You edit the spring physics directly in your file, rather than fighting an opinionated theme prop.
• Need custom styling or tokens? Swap out colors or convert standard StyleSheet properties to NativeWind classes in 30 seconds.
• Need custom analytics or accessibility tags? Add your tracking hooks directly into the component.
• Encounter a bug or edge-case? Fix it immediately in your codebase. You never have to submit an upstream issue and wait weeks for a maintainer to publish a patch.

3. No Global RNBlocks Runtime

Some UI frameworks require application-level providers, theme context, portal infrastructure, or global configuration that your project otherwise wouldn't need.

For example, NativeBase requires a root <NativeBaseProvider> to make theme context available across the application:

import React from "react";
import { NativeBaseProvider } from "native-base";
import { RootNavigator } from "./navigation";

export default function App() {
  return (
    <NativeBaseProvider>
      <RootNavigator />
    </NativeBaseProvider>
  );
}

With RNBlocks, there is no mandatory global runtime or root provider:

import React from "react";
import { RootNavigator } from "./navigation";

export default function App() {
  return <RootNavigator />; // Zero global wrappers
}

You simply import the block from your project folder:

Blocks are self-contained. They utilize core React Native primitives (View, Text, Pressable) and standard StyleSheet.create, with explicit per-block dependencies when required.

4. Built for React Native, Not Adapted from the Web

Some projects attempt to make web UI libraries cross-platform by compiling them through react-native-web.

While web compilation is valuable for previews, mobile interfaces require fundamentally different ergonomics:

5. Production Blocks, Not Just Primitives

Most UI libraries focus on primitive elements: a button, a badge, an input field.

Where engineering teams actually spend days of sprint capacity is on complex, animated, interactive patterns:

• Interactive Charts: Donut and Pie charts with rolling-number odometer physics and scrub gestures.
• Interactive Calendars: Multi-day range selectors and smooth month transitions.
• Floating Dock Menus: Liquid spring magnification physics running on the native driver.
• Social Auth Sheets: Complete sign-in bottom sheets with OAuth provider layouts.

RNBlocks focuses specifically on high-value, production-oriented blocks that you can drop straight into your app.

6. Architecture Comparison

7. Is RNBlocks Just “shadcn for React Native”?

It is natural to draw that comparison, and we embrace it directly.

The copy-paste source ownership philosophy was popularized on the web by shadcn/ui. We share that exact foundational philosophy:

• Source ownership over black-box npm packages.
• Copying code into your project so you can modify it freely.
• No hidden runtime framework.

Where RNBlocks specializes is in the reality of the mobile ecosystem:

• Mobile-first patterns: Native gesture arbitration, spring physics, and thumb ergonomics.
• Higher-level blocks: Focusing on complex UI blocks (charts, calendars, docks) rather than only low-level micro-primitives.
• An open, multi-author registry: Enabling community developers to submit and validate blocks via GitHub.

8. An Open Registry, Not a Vendor Silo

Traditional UI kits are maintained by a single company or author. When priorities change, the library stagnates.

RNBlocks is designed as community-owned infrastructure:

Developer creates block
  └── Submits GitHub PR (registry/blocks/<name>)
        ▼
Automated Schema & Dependency Validation
  └── Platform compatibility check
        ▼
Merged into registry manifest
  └── Immediately installable by any developer via CLI

Anyone can author, validate, and publish a block to the registry. The registry belongs to the React Native ecosystem.

9. When to Use (and When Not to Use) RNBlocks