react-native-reusables

React Native Reusables

NativeWind v4、Expo SDK 52+、Expo Router v4 を対象としています。Expo SDK のツールについては、react-native-expo スキルを参照してください。スタンドアロンの状態管理／ナビゲーションパターンについては、react-native-ecosystem スキルを参照してください。

React Native Reusables は、shadcn/ui の使用感を React Native にもたらします。コンポーネントのコピー＆ペーストまたは CLI でのスキャフォールディング、CSS 変数によるテーマ設定、そして内部での RN Primitives の利用が可能です。NativeWind と Uniwind をサポートし、オーバーレイにはルートの PortalHost が必要です。また、Text の継承システムと、Lucide 用の Icon ラッパーを使用します。

コアリファレンス

トピック	説明	リファレンス
概要	RNR とは何か、shadcn/ui との違い（ポータル、カスケードなし、アイコンなど）	core-overview
インストール	CLI による初期化と手動セットアップ、コンポーネントの追加、PortalHost、依存関係	core-installation
カスタマイズ	components.json、global.css、tailwind.config、theme.ts	core-customization

機能

コンポーネントとパターン

トピック	説明	リファレンス
コンポーネントの概要	Button、Input、Dialog、バリアント、asChild、複合コンポーネント	features-components-overview
テキストとアイコン	TextClassContext による継承、Lucide 用の Icon ラッパー	features-text-and-icons
フォームとコントロール	Label、Input、Select、Checkbox、RadioGroup、react-hook-form との連携	features-forms-controls
オーバーレイとポータル	PortalHost、Dialog/Popover/SelectContent、contentInsets	features-overlays-portals
レジストリと CLI	init、add、doctor、カスタムレジストリ、registryDependencies	features-registry-cli
ブロック	認証ブロック、Clerk との連携、CLI によるブロックの追加	features-blocks

ベストプラクティス

トピック	説明	リファレンス
コンポーネントの追加	CLI の利用を推奨、PortalHost の配置、パスエイリアス、cn ヘルパー、手動コピー	best-practices-adding-components
トラブルシューティング	doctor、--log-level all、PortalHost、エイリアス、依存関係	best-practices-troubleshooting

主な推奨事項

• オーバーレイ（Dialog、DropdownMenu、Popover、Tooltip）には PortalHost が必須です — ルートレイアウトの最後に配置してください
• CLI を使用してください（npx react-native-reusables add <name>）— プリミティブとパスが正しく設定されます
• Button 内の Text — TextClassContext でバリアントのスタイルが適用されるよう、@/components/ui/text の <Text> を直接の子として必ず使用してください
• アイコン — アイコンを個別にラップするのではなく、<Icon as={LucideIcon} /> を使用してください
• NativeWind v4 — ダークモードの CSS 変数には、global.css で .dark ではなく .dark:root を使用してください
• 手動セットアップ後や問題が発生したときは、バグだと判断する前に doctor を実行してください