GitHubExplore
Community Contributions

Submit a React Native Block

RNBlocks is completely open-source and GitHub-driven. We keep quality exceptionally high through structured Pull Request reviews.

The GitHub Contribution Workflow

1

Fork the repository

Fork the official RNBlocks repo to your GitHub account and clone it locally.

git clone https://github.com/Ashwin-Khowala/rnblocks.git
2

Build your component

Create a self-contained component in registry/blocks/[your-block-name]/files/ using standard React Native primitives (StyleSheet). Keep it responsive to its container, extract semantic colors at the top of the file, and include accessibility attributes.

3

Add metadata (registry.json)

Every component requires a registry.json file declaring its name, title, category, dependencies, supported themes, and platforms:

{
  "name": "subscription-card",
  "title": "Subscription Pricing Card",
  "description": "A responsive pricing card for in-app mobile subscriptions.",
  "type": "block",
  "author": {
    "name": "Your Name",
    "github": "your_github_username"
  },
  "version": "1.0.0",
  "category": "payments",
  "tags": ["pricing", "subscription", "cards"],
  "files": [
    {
      "path": "files/subscription-card.tsx",
      "type": "registry:component"
    }
  ],
  "dependencies": ["lucide-react-native"],
  "devDependencies": {},
  "registryDependencies": [],
  "platforms": ["ios", "android", "web"],
  "frameworks": ["expo", "react-native"],
  "styling": ["StyleSheet"],
  "themes": ["dark", "light"]
}
4

Validate locally

Run pnpm run validate:registry and pnpm run typecheck to verify that your block adheres to schema rules and passes TypeScript checks.

5

Open a Pull Request

Push your branch to your fork and open a Pull Request against master. Our GitHub Actions CI will automatically run type checking and registry validation.

6

Review & Published

Once approved and merged, the registry rebuilds automatically. Your block instantly appears in the web gallery and becomes installable via npx rnblocks add [your-block].

Author & Quality Standards

Standalone & Source-Owned

Follow copy → own → customize. No mandatory ThemeProvider wrappers, forced runtime packages, or token abstraction bloat.

Container-Responsive

Components adapt to container width (tested across 320pt to 428pt+). No hardcoded screen-width assumptions (e.g. width: 390).

Semantic Colors & Theming

Place semantic color constants (COLORS_DARK / COLORS_LIGHT) at the top of the file. Provide theme?: "dark" | "light" where appropriate.

Accessibility & Performance

Declare accessibilityRole, accessibilityLabel, reasonable touch targets, sufficient color contrast, and avoid unnecessary re-renders.

Strict TypeScript

All component props and exported interfaces must be strictly typed without any or untyped callback handlers.

Expo & Native Verified

Verify that components render without layout errors across iOS, Android, and web previews.

Ready to contribute?

Check out open block requests or submit your original creation.

Open GitHub Repository