react-native

Convert JSON specs into native React Native UIs with data-driven components.

15.9k|859|Updated Jan 14, 2026
One-click install
npx skills add https://github.com/vercel-labs/json-render --skill react-native-vercel-labs
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: react-native
Source: https://github.com/vercel-labs/json-render/tree/main/skills/react-native
Command: npx skills add https://github.com/vercel-labs/json-render --skill react-native-vercel-labs

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Converts JSON specs into native React Native UIs, enabling safe, data-driven rendering of mobile interfaces from a catalog with consistent props, bindings, and behavior.

Core Features & Use Cases

  • Catalog-driven rendering of mobile UIs from JSON specs, ensuring consistency across devices.
  • Support for data binding, visibility rules, and action dispatch to drive interactive components.
  • Real-world use case: generate a cross-platform mobile screen from a shared catalog to accelerate development.

Quick Start

Use the Renderer with a sample spec to render a mobile UI from a catalog.

Frequently Asked Questions about react-native

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I convert JSON specs into native React Native UIs?

To convert JSON specs into native React Native UIs, use a catalog-driven renderer that maps data structures to standard components. It validates dynamic props and dispatches actions to safely render mobile interfaces.

Can I use data binding and visibility rules to render mobile UIs from a JSON catalog?

Yes, rendering mobile UIs from a JSON catalog supports data binding and visibility rules. The renderer maps these specs to standard components to drive interactive behavior and ensure consistent cross-device output.

What is catalog-driven rendering for React Native?

Catalog-driven rendering for React Native is a process that translates JSON specifications into native mobile components. It uses a registry workflow with TypeScript typings to validate props and actions for safe UI generation.

Does the React Native JSON renderer support TypeScript typings for dynamic props?

Yes, the React Native JSON renderer supports TypeScript typings for dynamic props. It validates component properties and actions through a typed registry, ensuring data-driven mobile interfaces render safely without runtime errors.

What's the best way to generate cross-platform mobile screens from a shared catalog?

The best way to generate cross-platform mobile screens from a shared catalog is using a JSON spec renderer. It standardizes component props and bindings to accelerate development and maintain consistency across devices.

Why does my JSON spec not render the expected standard component in React Native?

A JSON spec may not render the expected standard component in React Native if the component is missing from the registry or its props fail validation. The renderer requires exact spec mappings and valid action dispatch definitions.