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を実行する前に:

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

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

• ローカル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,
  },
});

---

ナビゲーション

Link

「expo-router」から<Link href="/path" />を使用してルート間のナビゲーションを行います。

import { Link } from 'expo-router';

// 基本的なリンク
<Link href="/path" />

// カスタムコンポーネントのラップ
<Link href="/path" asChild>
  <Pressable>...</Pressable>
</Link>

可能な限り、iOSの規約に従うために<Link.Preview>を含めてください。ナビゲーションを強化するため、頻繁にコンテキストメニューとプレビューを追加してください。

Stack

• スタックを定義するには必ず_layout.tsxファイルを使用してください
• ネイティブナビゲーションスタックには「expo-router/stack」からStackを使用してください

ページタイトル

Stack.Screenオプションを使用してページタイトルを設定します:

import { Stack } from 'expo-router';

export default function Layout() {
  return (
    <Stack>
      <Stack.Screen 
        name="index" 
        options={{ title: 'Home' }} 
      />
      <Stack.Screen 
        name="details" 
        options={{ title: 'Details' }} 
      />
    </Stack>
  );
}

コンテキストメニュー

インタラクションを強化するためにコンテキストメニューを追加します:

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          # モーダル画面