Expo UI ガイドライン

リファレンス

必要に応じて以下のリソースを参照してください:

./references/route-structure.md -- ルートファイルの規約、動的ルート、クエリパラメータ、グループ、フォルダ構成
./references/tabs.md -- NativeTabsを使用したネイティブタブバー、JSタブからの移行、iOS 26機能
./references/icons.md -- expo-symbolsを使用したSF Symbols、一般的なアイコン名、アニメーション、ウェイト
./references/controls.md -- ネイティブiOSコントロール: Switch、Slider、SegmentedControl、DateTimePicker、Picker
./references/visual-effects.md -- expo-blurを使用したブラー効果と expo-glass-effectを使用したリキッドガラス
./references/animations.md -- Reanimatedアニメーション: entering、exiting、layout、scroll-driven、ジェスチャー
./references/search.md -- ヘッダーとの統合、useSearch hook、フィルタリングパターンを含むサーチバー
./references/gradients.md -- experimental_backgroundImageを使用したCSSグラデーション(New Architectureのみ)
./references/media.md -- カメラ、オーディオ、ビデオ、ファイル保存を含むExpo Router用のメディア処理
./references/storage.md -- SQLite、AsyncStorage、SecureStoreを含むデータストレージパターン
./references/webgpu-three.md -- WebGPUとThree.jsを使用した3Dグラフィックス、ゲーム、GPU対応ビジュアライゼーション

アプリの実行

重要: カスタムビルドを作成する前に、必ずExpo Goを試してください。

ほとんどのExpoアプリはカスタムネイティブコードなしでExpo Goで動作します。npx expo run:iosまたはnpx expo run:androidを実行する前に:

Expo Goで開始: npx expo startを実行してExpo GoでQRコードをスキャンします
機能が機能するかチェック: Expo Goアプリを十分にテストします
必要な場合のみカスタムビルドを作成 - 以下を参照

カスタムビルドが必要な場合

ローカルExpoモジュール(modules/ディレクトリ内のカスタムネイティブコード)
Appleのターゲット(ウィジェット、アプリクリップ、エクステンション)
Expo Goに含まれていないサードパーティネイティブモジュール
カスタム設定によるプッシュ通知

Expo Goが機能する場合

標準Expo SDKモジュール
Expo Routerナビゲーション
React Native Reanimatedアニメーション
ほとんどのUIコンポーネントとスタイリング

コードスタイル

終了していない文字列に注意してください。ネストされたバッククォートはエスケープされていることを確認し、引用符を正しくエスケープするのを忘れないでください。
ファイルの上部に必ずimportステートメントを使用してください。
ファイル名には必ずケバブケースを使用してください。例: comment-card.tsx
ナビゲーションを移動または再構成する場合は、古いルートファイルを必ず削除してください
ファイル名に特殊文字を使用しないでください
tsconfig.jsonをパスエイリアスで設定し、リファクタリング時に相対インポートよりエイリアスを優先してください。

ルート

詳細なルート規約については./references/route-structure.mdを参照してください。

ルートはappディレクトリに属します。
コンポーネント、型、ユーティリティをappディレクトリと同じ場所に配置しないでください。これはアンチパターンです。
アプリは常に「/」と一致するルートを持つことを確認してください。グループルート内に含まれている可能性があります。

ライブラリの選好

React Nativeから削除されたPickerやWebView、SafeAreaView、AsyncStorageなどのモジュールを使用しないでください
レガシーexpo-permissionsを使用しないでください
expo-avではなくexpo-audio
expo-avではなくexpo-video
@expo/vector-iconsではなくexpo-symbols
React NativeのSafeAreaViewではなくreact-native-safe-area-context
Platform.OSではなくprocess.env.EXPO_OS
React.useContextではなくReact.use
組み込み要素imgではなくexpo-imageImageコンポーネント
リキッドガラスバックドロップにはexpo-glass-effect

レスポンシブ性

ルートコンポーネントをスクロールビューでラップしてレスポンシブ性を確保してください
<SafeAreaView>の代わりに<ScrollView contentInsetAdjustmentBehavior="automatic" />を使用して、より賢いセーフエリアインセットを実現してください
contentInsetAdjustmentBehavior="automatic"はFlatListおよびSectionListにも適用されるべきです
Dimensions APIの代わりにFlexboxを使用してください
画面サイズを測定するにはDimensions.get()ではなくuseWindowDimensionsを常に優先してください

動作

iOSで条件付きでexpo-hapticsを使用して、より喜ばしい体験を実現してください
React NativeとiOSの内蔵ハプティクスを備えた@react-native-community/datetimepickerなどの<Switch />のようなビューを使用してください
ルートがStackに属する場合、その最初の子はほぼ常にcontentInsetAdjustmentBehavior="automatic"が設定されたScrollViewであるべきです
サーチバーを追加するにはStack.ScreenオプションでheaderSearchBarOptionsを優先してください
コピーできるデータを含むテキストには<Text selectable />プロパティを使用してください
1.4Mや38kのような大きな数字のフォーマットを検討してください
webviewまたはExpo DOMコンポーネント内でない限り、「img」や「div」などの組み込み要素を使用しないでください

スタイリング

一般的なスタイリングルール

すべてのスタイルにStyleSheet.create()を使用してください
テーマ/デザインシステムから名前付きの色を優先してください
関連するスタイルをグループ化してください
スタイルオブジェクトにセマンティック命名を使用してください

テキストスタイリング

import { Text, StyleSheet } from 'react-native';

const styles = StyleSheet.create({
  title: {
    fontSize: 24,
    fontWeight: '700',
    color: '#1a1a1a',
  },
  body: {
    fontSize: 16,
    lineHeight: 24,
    color: '#4a4a4a',
  },
});

シャドウ

iOSとAndroidはシャドウを異なる方法で処理します:

const styles = StyleSheet.create({
  card: {
    // iOSシャドウ
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.1,
    shadowRadius: 8,
    // Androidシャドウ
    elevation: 4,
    // 共通
    backgroundColor: '#fff',
    borderRadius: 12,
  },
});

import { ContextMenu } from 'zeego/context-menu';

<ContextMenu.Root>
  <ContextMenu.Trigger>
    <Pressable>{/* content */}</Pressable>
  </ContextMenu.Trigger>
  <ContextMenu.Content>
    <ContextMenu.Item key="share" onSelect={handleShare}>
      <ContextMenu.ItemTitle>Share</ContextMenu.ItemTitle>
    </ContextMenu.Item>
  </ContextMenu.Content>
</ContextMenu.Root>

モーダル

presentationオプションを使用してモーダルを表示します:

// _layout.tsx内
<Stack.Screen 
  name="modal" 
  options={{ 
    presentation: 'modal',
    headerShown: false,
  }} 
/>

シート

ボトムシートの場合は以下を使用します:

<Stack.Screen 
  name="sheet" 
  options={{ 
    presentation: 'formSheet',
    sheetGrabberVisible: true,
    sheetInitialDetentIndex: 0,
    sheetAllowedDetents: [0.5, 1],
  }} 
/>

一般的なルート構造

app/
├── _layout.tsx        # ルートレイアウト (Stack または Tabs)
├── index.tsx          # ホーム画面 "/"
├── (tabs)/
│   ├── _layout.tsx    # タブナビゲータ
│   ├── index.tsx      # 最初のタブ
│   └── settings.tsx   # 設定タブ
├── [id].tsx           # 動的ルート "/123"
└── modal.tsx          # モーダル画面

ライセンス: MIT(寛容ライセンスのため全文を引用しています) · 原本リポジトリ

building-ui

SKILL.md 本文