Rork で出る React Native / Expo ランタイムエラーを切り分けて直す

// ❌ 間違い: state の初期値がない
import { useState } from "react";
import { View, Text, FlatList } from "react-native";
 
export default function ProductList() {
  const [products, setProducts] = useState(); // undefined として初期化される
 
  return (
    <FlatList
      data={products}  // undefined.map() を呼ぼうとしてエラーになる
      renderItem={({ item }) => <Text>{item.name}</Text>}
      keyExtractor={(item) => item.id}
    />
  );
}
 
// ✅ 正しい: 空配列で初期化
export default function ProductList() {
  const [products, setProducts] = useState([]); // 空配列で初期化
 
  return (
    <FlatList
      data={products}  // 安全に反復できる
      renderItem={({ item }) => <Text>{item.name}</Text>}
      keyExtractor={(item) => item.id}
    />
  );
}

// ❌ 間違い: テキストが <Text> にラップされていない
import { View } from "react-native";
 
export default function App() {
  return (
    <View>
      Hello World  {/* エラー! */}
    </View>
  );
}
 
// ✅ 正しい: <Text> コンポーネントを使う
import { View, Text } from "react-native";
 
export default function App() {
  return (
    <View>
      <Text>Hello World</Text>  {/* OK */}
    </View>
  );
}

// ❌ 間違い: 条件分岐内で useState を呼ぶ
import { useState } from "react";
import { View, Button, Text } from "react-native";
 
export default function Counter() {
  const [isEnabled, setIsEnabled] = useState(false);
 
  // ❌ このif文の中でuseStateを呼ぶと、条件によってHooks数が変わる
  if (isEnabled) {
    const [count, setCount] = useState(0);
  }
 
  return (
    <View>
      <Button title="Enable" onPress={() => setIsEnabled(!isEnabled)} />
    </View>
  );
}
 
// ✅ 正しい: すべての Hooks を関数のトップレベルで呼ぶ
export default function Counter() {
  const [isEnabled, setIsEnabled] = useState(false);
  const [count, setCount] = useState(0);  // トップレベルで呼ぶ
 
  return (
    <View>
      <Button title="Enable" onPress={() => setIsEnabled(!isEnabled)} />
      {isEnabled && <Text>Count: {count}</Text>}
    </View>
  );
}

// ❌ インストールされていないパッケージをimport
import { GestureHandlerRootView } from "react-native-gesture-handler";  // インストールされていない
 
// ✅ 解決: npm install で追加
// $ npm install react-native-gesture-handler expo-gesture-handler

// components/ErrorBoundary.tsx
import { View, Text, ScrollView } from "react-native";
import { ReactNode } from "react";
 
interface Props {
  children: ReactNode;
}
 
interface State {
  hasError: boolean;
  error: Error | null;
}
 
// エラーバウンダリ: 子コンポーネントで発生したエラーをキャッチして表示
export class ErrorBoundary extends React.Component<Props, State> {
  constructor(props: Props) {
    super(props);
    this.state = { hasError: false, error: null };
  }
 
  static getDerivedStateFromError(error: Error): State {
    return { hasError: true, error };
  }
 
  componentDidCatch(error: Error, errorInfo: any) {
    console.error("ErrorBoundary caught:", error, errorInfo);
  }
 
  render() {
    if (this.state.hasError) {
      return (
        <ScrollView contentContainerStyle={{ padding: 20, justifyContent: "center" }}>
          <Text style={{ fontSize: 18, fontWeight: "bold", color: "red", marginBottom: 10 }}>
            ⚠️ エラーが発生しました
          </Text>
          <Text style={{ fontSize: 14, color: "#666", marginBottom: 10 }}>
            {this.state.error?.message || "不明なエラー"}
          </Text>
          <Text style={{ fontSize: 12, color: "#999", fontFamily: "monospace" }}>
            {this.state.error?.stack}
          </Text>
        </ScrollView>
      );
    }
 
    return this.props.children;
  }
}

// App.tsx
import { ErrorBoundary } from "./components/ErrorBoundary";
 
export default function App() {
  return (
    <ErrorBoundary>
      <YourMainApp />
    </ErrorBoundary>
  );
}