skills.rest
Aadi-110i
Aadi-110iCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

react-native

Renders JSON specs into native mobile UIs using React Native components.

Updated Jul 28, 2026
Search Tags:#react native#data binding#renderer#component catalog#mobile ui#json-render#json spec
One-click install
npx skills add https://github.com/Aadi-110i/PEP-PROJECT --skill react-native-aadi-110i
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: react-native
Source: https://github.com/Aadi-110i/PEP-PROJECT/tree/main/skills/react-native
Command: npx skills add https://github.com/Aadi-110i/PEP-PROJECT --skill react-native-aadi-110i

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @json-render/core, @json-render/react-native, zod.

What problem does it solve? Building mobile interfaces from AI-generated or dynamically produced JSON specs requires a renderer that maps declarative element trees to real native components, with state, visibility, and actions wired in. This Skill provides that renderer for React Native via @json-render/react-native. ## Core Features & Use Cases - JSON-to-Native Rendering: Converts JSON specs into native mobile component trees using a standard catalog of layout, content, input, feedback, and composite components. - State, Visibility & Actions: Provides StateProvider, VisibilityProvider, and ActionProvider with a built-in setState action, conditional visibility expressions, and dynamic prop bindings ($state, $bindState, $bindItem, $cond). - Custom Component Registries: Lets you extend the standard catalog with custom components and actions through defineCatalog and defineRegistry with full type safety. - Use Case: An AI assistant generates a JSON spec for a settings screen; you render it in your React Native app with a two-way bound TextInput, a tab bar driven by Pressable + setState, and an externally controlled StateStore. ## Quick Start Render my JSON UI spec as a React Native screen using the standard component catalog with state and visibility providers.

Frequently Asked Questions about react-native

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

FAQPage Schema
How do I render a JSON spec in React Native?▼

Use the Renderer component from @json-render/react-native with a registry created by defineRegistry. Wrap it in StateProvider, VisibilityProvider, and ActionProvider so state, conditional visibility, and dispatched actions work across the rendered tree.

How do I add custom components to a json-render catalog?▼

Define custom components in defineCatalog with a zod props schema, then register their React Native implementations in defineRegistry. Standard components are built in, so you only register custom ones like an Icon wrapper.

Does json-render support two-way data binding in forms?▼

Yes, use the $bindState expression on a component's natural value prop, such as value on TextInput or checked on Checkbox. Inside repeat scopes, use $bindItem to bind to item fields. Components do not use a statePath prop.

Can I use an external state store with json-render React Native?▼

Yes, create a store with createStateStore and pass it to StateProvider via the store prop. Updates through store.set trigger re-renders automatically, and initialState and onStateChange are ignored in controlled mode.

How do visibility conditions work in json-render specs?▼

Set the visible property on any element using expressions like { "$state": "/path" }, equality checks with eq, negation with not, or arrays for AND logic. VisibilityProvider evaluates these against the current state model.

Related Skills

Explore More Software Engineering Skills→
StormHubStormHub

json-render

Generate and render UIs from JSON specs into React and Next.js apps.

Community
Advanced
hasnahasna

react-native

Convert JSON UI specifications into native React Native component trees.

Official
Intermediate
StormHubStormHub

react

Convert JSON UI specs into executable React component trees.

Community
Advanced
xztxyxztxy

react

Convert JSON specs into React component trees via the Renderer API.

Community
Intermediate