skills.rest
elcokiin
elcokiinCOMMUNITY
Explore all skills by this author →
Website𝕏@elcokiinGitHub

react-native-reusables

Scaffold and customize shadcn-style UI components for React Native Expo apps.

Updated Mar 19, 2026
Search Tags:#theming#ui components#react native#expo#nativewind#rn primitives#cli scaffolding
One-click install
npx skills add https://github.com/elcokiin/vibe-tribe --skill react-native-reusables-elcokiin
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: react-native-reusables
Source: https://github.com/elcokiin/vibe-tribe/tree/main/.agents/skills/react-native-reusables
Command: npx skills add https://github.com/elcokiin/vibe-tribe --skill react-native-reusables-elcokiin

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Building a consistent design system in React Native is hard because there are no DOM portals, no cascading styles, and no data attributes. This Skill guides you through installing, adding, and customizing React Native Reusables components (shadcn/ui-style) with Nativewind or Uniwind, RN Primitives, and the CLI. ## Core Features & Use Cases - CLI-driven scaffolding: Initialize projects with init (minimal, minimal-uniwind, clerk-auth templates) and add components with add, then verify setup with doctor. - Component patterns: Guidance for Button, Input, Dialog, Select, Checkbox, RadioGroup, Text inheritance via TextClassContext, and the Icon wrapper for Lucide icons. - Theming and overlays: Configure global.css CSS variables, tailwind.config, theme.ts, and the required root PortalHost for dialogs, popovers, and dropdowns. - Use Case: You are building an Expo app and need an accessible dialog and form controls. Use this Skill to add the components via CLI, mount PortalHost in the root layout, and sync your theme variables across global.css and theme.ts. ## Quick Start Ask the assistant to add a Button and Dialog to your Expo app using the react-native-reusables CLI and configure PortalHost in the root layout.

Frequently Asked Questions about react-native-reusables

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

FAQPage Schema
How do I add React Native Reusables components to an Expo app?▼

Run npx react-native-reusables add followed by component names, such as add button input dialog. The CLI installs required RN Primitives dependencies and scaffolds files according to your components.json paths.

How do I set up React Native Reusables in an existing project?▼

Install Nativewind, add dependencies like tailwindcss-animate, clsx, tailwind-merge, and @rn-primitives/portal, then configure global.css variables, tailwind.config, theme.ts, path aliases, and a cn helper. Run npx react-native-reusables doctor to verify.

Why are my Dialog or Popover components not showing in React Native?▼

Overlay components require a PortalHost from @rn-primitives/portal mounted once in your root layout as the last child of your providers. Without it, Dialog, Popover, Tooltip, and SelectContent may not render or may be clipped.

Does React Native Reusables work with Nativewind and Uniwind?▼

Yes, components are scaffolded in Nativewind or Uniwind variants, and templates like minimal and minimal-uniwind are available via the init command. When copying manually, pick the registry variant matching your styling setup.

How do I customize the theme in React Native Reusables?▼

Edit CSS variables under :root and .dark:root in global.css, map them in tailwind.config, and mirror the values in theme.ts including NAV_THEME for React Navigation. Keep all three files in sync when changing colors.

How do I debug React Native Reusables CLI issues?▼

Run npx react-native-reusables doctor to check setup and get actionable fixes. For detailed logs when reporting bugs, prepend --log-level all to any command, such as --log-level all doctor.

Related Skills

Explore More Software Engineering Skills→
ashleytowerashleytower

expo-tailwind-setup

Configure Tailwind CSS v4 in Expo projects with NativeWind and react-native-css.

Community
Intermediate
koushik-haitkoushik-hait

clerk-expo-patterns

Implement Clerk authentication patterns for Expo and React Native apps.

Community
Intermediate
MolcajeteAIMolcajeteAI
2

component-testing-mobile

Write React Native component tests with Jest and React Native Testing Library.

Official
Intermediate
AO-HySAO-HyS

tamagui

Guides building cross-platform React interfaces with Tamagui styled components, tokens, themes, and animations.

Official
Intermediate