Antigravity で React Native iOS アプリを本番品質に仕上げるガイド

# Expo プロジェクトの作成
npx create-expo-app MyApp --template blank-typescript
cd MyApp
 
# 必要なパッケージの追加
npx expo install expo-router react-native-safe-area-context react-native-screens

// Antigravity への指示：型定義を先に作ってもらう
// プロンプト例：「商品データの型定義と、それを使ったAPIフック一式を作ってください」
 
// Antigravity が生成した型定義の例
interface Product {
  id: string;
  name: string;
  price: number;
  imageUrl: string;
  category: ProductCategory;
  inStock: boolean;
}
 
type ProductCategory = 'electronics' | 'clothing' | 'food' | 'other';
 
// Antigravity が生成したカスタムフックの例
function useProducts(category?: ProductCategory) {
  const [products, setProducts] = useState<Product[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<Error | null>(null);
 
  useEffect(() => {
    const fetchProducts = async () => {
      try {
        setLoading(true);
        const url = category 
          ? `/api/products?category=${category}` 
          : '/api/products';
        const response = await fetch(url);
        if (!response.ok) throw new Error('Failed to fetch products');
        const data = await response.json();
        setProducts(data);
      } catch (err) {
        setError(err instanceof Error ? err : new Error('Unknown error'));
      } finally {
        setLoading(false);
      }
    };
 
    fetchProducts();
  }, [category]);
 
  return { products, loading, error };
}

// iOS 固有の処理を明示して指定する例
// プロンプト：「ヘッダーコンポーネントを作ってください。iOS ではノッチとセーフエリアを考慮し、
// StatusBar は light-content にしてください」
 
// 生成されたコンポーネント例（エラーハンドリング付き）
import { View, StatusBar, Platform, StyleSheet } from 'react-native';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
interface HeaderProps {
  title: string;
  backgroundColor?: string;
}
 
export function Header({ title, backgroundColor = '#007AFF' }: HeaderProps) {
  const insets = useSafeAreaInsets();
  
  return (
    <View style={[
      styles.container,
      { 
        backgroundColor,
        paddingTop: Platform.OS === 'ios' ? insets.top : 0
      }
    ]}>
      <StatusBar barStyle="light-content" backgroundColor={backgroundColor} />
      {/* ヘッダーコンテンツ */}
    </View>
  );
}
 
const styles = StyleSheet.create({
  container: {
    width: '100%',
    paddingHorizontal: 16,
    paddingBottom: 12,
  }
});