react-native

React Native

コアコンポーネント

import { View, Text, ScrollView, FlatList, Pressable, StyleSheet } from 'react-native';

function ProductList({ products }: { products: Product[] }) {
  return (
    <FlatList
      data={products}
      keyExtractor={(item) => item.id}
      renderItem={({ item }) => (
        <Pressable onPress={() => navigate('Detail', { id: item.id })} style={styles.card}>
          <Text style={styles.title}>{item.name}</Text>
          <Text style={styles.price}>${item.price}</Text>
        </Pressable>
      )}
      ItemSeparatorComponent={() => <View style={styles.separator} />}
    />
  );
}

const styles = StyleSheet.create({
  card: { padding: 16, backgroundColor: '#fff' },
  title: { fontSize: 16, fontWeight: '600' },
  price: { fontSize: 14, color: '#666', marginTop: 4 },
  separator: { height: 1, backgroundColor: '#eee' },
});

ナビゲーション（React Navigation）

import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

type RootStackParamList = {
  Home: undefined;
  Detail: { id: string };
};

const Stack = createNativeStackNavigator<RootStackParamList>();
const Tab = createBottomTabNavigator();

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Detail" component={DetailScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

// Type-safe navigation
import { NativeStackScreenProps } from '@react-navigation/native-stack';
type DetailProps = NativeStackScreenProps<RootStackParamList, 'Detail'>;

function DetailScreen({ route, navigation }: DetailProps) {
  const { id } = route.params;
  return <Text>{id}</Text>;
}

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

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: 3 },
  }),
});

// File-based: Component.ios.tsx / Component.android.tsx (auto-resolved)

ネットワーキング

import { useQuery, useMutation } from '@tanstack/react-query';

function useProducts() {
  return useQuery({
    queryKey: ['products'],
    queryFn: async () => {
      const res = await fetch(`${API_URL}/products`);
      if (!res.ok) throw new Error('Failed to fetch');
      return res.json() as Promise<Product[]>;
    },
  });
}

セキュアストレージ

import EncryptedStorage from 'react-native-encrypted-storage';

await EncryptedStorage.setItem('auth_token', token);
const token = await EncryptedStorage.getItem('auth_token');
await EncryptedStorage.removeItem('auth_token');

パフォーマンス

テクニック	効果
リストにはScrollViewではなくFlatListを使用する	高
リスト項目にReact.memoを使用する	中
リスト内のイベントハンドラーにuseCallbackを使用する	中
Hermes エンジン（RN 0.70+でデフォルト）	高
render内でインラインスタイルを避ける	低～中
InteractionManager.runAfterInteractions	中

アンチパターン

アンチパターン	修正方法
長いリストにScrollViewを使用する	FlatListまたはFlashListを使用する
FlatListのrenderItem内でインライン関数を使用する	コンポーネントを抽出し、React.memoを使用する
トークンをAsyncStorageに保存する	react-native-encrypted-storageを使用する
エラーバウンダリがない	画面をエラーバウンダリでラップする
フォームでキーボードを考慮しない	KeyboardAvoidingViewを使用する

本番環境チェックリスト

• Hermesエンジンを有効にする
• AndroidのリリースビルドでProGuard/R8を使用する
• アプリの署名を設定する（Androidキーストア、iOS証明書）
• ディープリンクを設定する
• エラートラッキング（Sentry、Bugsnag）
• OTAアップデート（CodePushまたはExpo Updates）
• パフォーマンスモニタリング（Flipper、React DevTools）