react-native-elements

Community React Native Elements のベストプラクティス

React Native Elements アプリケーション向けの包括的なベストプラクティスガイドです。8 つのカテゴリーにわたる 45 個のルールを、コンポーネントの使用、テーマ設定、パフォーマンス最適化の指針として、影響度の高い順に掲載しています。

適用するタイミング

次の場合に、これらのガイドラインを参照してください。

• 新しいプロジェクトで React Native Elements をセットアップするとき
• ThemeProvider と createTheme を設定するとき
• ListItem コンポーネントでリストを構築するとき
• Input と SearchBar でフォーム入力を実装するとき
• RNE コンポーネントで FlatList のパフォーマンスを最適化するとき
• React Native Elements を使用したコードをレビューするとき

優先度別のルールカテゴリー

優先度	カテゴリー	影響度	プレフィックス
1	インポートとセットアップ	CRITICAL	setup-
2	テーマアーキテクチャ	CRITICAL	theme-
3	コンポーネントの選択	HIGH	comp-
4	リストのパフォーマンス	HIGH	list-
5	プロパティと設定	MEDIUM-HIGH	props-
6	スタイリングパターン	MEDIUM	style-
7	コールバックとイベント	MEDIUM	event-
8	高度なパターン	LOW	adv-

クイックリファレンス

1. インポートとセットアップ（CRITICAL）

• setup-themeprovider - 一貫したテーマ設定のため、ThemeProvider でアプリをラップする
• setup-imports - @rneui/themed と @rneui/base を正しく使い分ける
• setup-createtheme - createTheme で型安全なテーマ設定を行う
• setup-tree-shaking - バンドルサイズの削減に適切なツリーシェイキングを有効にする
• setup-safe-area - ノッチ付きデバイス向けに SafeAreaProvider を設定する

2. テーマアーキテクチャ（CRITICAL）

• theme-usetheme-hook - useTheme でテーマにリアクティブにアクセスする
• theme-dark-mode - createTheme でライトモード／ダークモードを設定する
• theme-component-defaults - テーマでコンポーネントのデフォルト値を設定する
• theme-updatetheme - 再マウントせずに実行時のテーマ更新を行う
• theme-color-scheme - システムのカラースキームと同期する
• theme-custom-colors - カスタムカラーでテーマを安全に拡張する

3. コンポーネントの選択（HIGH）

• comp-listitem-over-view - リストの行には ListItem を使用する
• comp-input-over-textinput - フォームフィールドには Input を使用する
• comp-searchbar-platform - プラットフォームごとに SearchBar のバリアントを使い分ける
• comp-button-type - バリアントには Button の type プロパティを使用する
• comp-icon-source - バンドルサイズを考慮して Icon の種類を選ぶ
• comp-avatar-vs-image - プロフィール画像には Avatar を使用する

4. リストのパフォーマンス（HIGH）

• list-memo-items - FlatList 内の ListItem をメモ化する
• list-keyextractor - 必ず keyExtractor を指定する
• list-getitemlayout - 高さが固定の場合は getItemLayout を使用する
• list-renderitem-callback - useCallback で renderItem を抽出する
• list-windowsize - メモリ使用量のバランスを考慮して windowSize を設定する
• list-virtualized - ScrollView ではなく FlatList を使用する
• list-removeClipped - removeClippedSubviews は慎重に設定する

5. Props と設定（中〜高）

• props-loading-state - 非同期処理には loading prop を使用します
• props-disabled-styling - フィードバックのために disabledStyle を設定します
• props-input-validation - 入力検証には errorMessage を使用します
• props-icon-configuration - Icon props を正しく設定します
• props-searchbar-loading - SearchBar に読み込み状態を表示します
• props-button-color - セマンティックカラーには color prop を使用します

6. スタイル設定のパターン（中）

• style-stylesheet - インラインオブジェクトよりも StyleSheet.create を使用します
• style-containerStyle - ラッパーには containerStyle を使用します
• style-usememo-dynamic - 動的なスタイルをメモ化します
• style-theme-colors - ハードコードされた値よりもテーマカラーを使用します
• style-component-props - コンポーネント固有のスタイル prop を優先します

7. コールバックとイベント（中）

• event-usecallback - ハンドラーを useCallback でラップします
• event-debounce-search - SearchBar の onChangeText をデバウンスします
• event-listitem-onpress - 項目データを正しく渡します
• event-avoid-anonymous - レンダリング内での無名関数を避けます
• event-input-handlers - Input ハンドラーを効率的に設定します

8. 高度なパターン（低）

• adv-custom-component - RNE コンポーネントを正しくラップします
• adv-platform-specific - プラットフォーム固有の prop を処理します
• adv-makeStyles - テーマに対応したスタイルには makeStyles を使用します
• adv-overlay-modal - Overlay と Modal を正しく使い分けます
• adv-image-component - キャッシュのために Avatar の ImageComponent を設定します

使用方法

詳しい説明とコード例については、各リファレンスファイルをお読みください。

• セクションの定義 - カテゴリーの構成と影響度
• ルールのテンプレート - 新しいルールを追加するためのテンプレート

リファレンスファイル

ファイル	説明
references/_sections.md	カテゴリーの定義と順序
assets/templates/_template.md	新しいルール用のテンプレート
metadata.json	バージョンとリファレンス情報