react-native-patterns

React Native のパターン

React Native と Expo を使用して、本番品質のモバイルアプリを構築します。

プロジェクトのセットアップ

Expo（ほとんどのプロジェクトに推奨）：

npx create-expo-app@latest my-app
cd my-app
npx expo start

Bare React Native（ネイティブを完全に制御する必要がある場合）：

npx @react-native-community/cli init MyApp

Expo がサポートしていないカスタムネイティブモジュールが必要な場合を除き、Expo を使用してください。

ナビゲーション

ファイルベースのルーティングには expo-router、または @react-navigation/native を使用します。

app/
├── _layout.tsx        # Root layout (tabs, stack, drawer)
├── index.tsx          # Home screen
├── (tabs)/
│   ├── _layout.tsx    # Tab navigator
│   ├── home.tsx
│   ├── profile.tsx
│   └── settings.tsx
└── [id].tsx           # Dynamic route

プラットフォーム固有のコード

import { Platform } from 'react-native';

const styles = StyleSheet.create({
  shadow: Platform.select({
    ios: { shadowColor: '#000', shadowOffset: { width: 0, height: 2 }, shadowOpacity: 0.1 },
    android: { elevation: 4 },
  }),
});

差異が大きい場合は、プラットフォーム固有のファイルを使用します。

• Component.ios.tsx
• Component.android.tsx

スタイリング

パフォーマンスのために StyleSheet.create を使用します（スタイルは一度だけネイティブに送信されます）。

const styles = StyleSheet.create({
  container: { flex: 1, padding: 16 },
  title: { fontSize: 24, fontWeight: '700' },
});

Tailwind のような使い心地を求める場合は、nativewind を使用します。

<View className="flex-1 p-4">
  <Text className="text-2xl font-bold">Hello</Text>
</View>

パフォーマンス

長いリストには ScrollView より FlatList を使用します。

<FlatList
  data={items}
  keyExtractor={(item) => item.id}
  renderItem={({ item }) => <ItemRow item={item} />}
  initialNumToRender={10}
  maxToRenderPerBatch={5}
  windowSize={5}
/>

負荷の高いコンポーネントをメモ化します。

const ItemRow = React.memo(({ item }: { item: Item }) => (
  <View><Text>{item.name}</Text></View>
));

避けること：

• インラインスタイル（レンダーのたびに新しいオブジェクトが作成されます）
• renderItem 内の無名関数
• キャッシュされていない大きな画像（expo-image を使用すると対応できます）

よく使われるライブラリ

用途	ライブラリ
ナビゲーション	expo-router または @react-navigation/native
状態管理	zustand、jotai、または React context
データ取得	@tanstack/react-query
画像	expo-image
アイコン	@expo/vector-icons
ストレージ	expo-secure-store（機密情報）、@react-native-async-storage/async-storage（一般用途）
アニメーション	react-native-reanimated
ジェスチャー	react-native-gesture-handler
フォーム	react-hook-form + zod

ヒント

• 最後ではなく、最初から iOS と Android の両方でテストします
• Expo でカスタムネイティブモジュールを使う場合は、expo-dev-client を使用します
• react-native-safe-area-context でセーフエリアに対応します
• フォームでは必ずキーボード回避処理を行います（KeyboardAvoidingView）
• 本番環境での OTA アップデートには expo-updates を使用します