手順4：コードを移行する

grep -rn "from 'prop-types'" src/
grep -rn "\.propTypes\s*=" src/

// ❌ 更新前（RN 0.83で問題が発生）
import PropTypes from 'prop-types';

function UserCard({ name, email, age, onPress }) {
  return (
    <TouchableOpacity onPress={onPress}>
      <View>
        <Text>{name}</Text>
        <Text>{email}</Text>
        {age && <Text>年齢：{age}</Text>}
      </View>
    </TouchableOpacity>
  );
}

UserCard.propTypes = {
  name: PropTypes.string.isRequired,
  email: PropTypes.string.isRequired,
  age: PropTypes.number,
  onPress: PropTypes.func,
};

// ✅ 更新後
interface UserCardProps {
  name: string;
  email: string;
  age?: number;
  onPress?: () => void;
}

function UserCard({ name, email, age, onPress }: UserCardProps) {
  return (
    <TouchableOpacity onPress={onPress}>
      <View>
        <Text>{name}</Text>
        <Text>{email}</Text>
        {age && <Text>年齢：{age}</Text>}
      </View>
    </TouchableOpacity>
  );
}

grep -rn "\.defaultProps\s*=" src/

// ❌ 更新前
MyComponent.defaultProps = {
  name: 'Default',
  age: 0,
  onPress: () => {},
};

// ✅ 更新後 - デフォルトパラメーターを使用
function MyComponent({ 
  name = 'Default', 
  age = 0, 
  onPress = () => {} 
}: MyComponentProps) {
  return <Text>{name}</Text>;
}

grep -rn "BackHandler.removeEventListener" src/

// ❌ 更新前（RN 0.83でクラッシュ）
BackHandler.addEventListener('hardwareBackPress', handler);
// ...その後
BackHandler.removeEventListener('hardwareBackPress', handler);

// ✅ 更新後 - サブスクリプションパターン
const subscription = BackHandler.addEventListener('hardwareBackPress', handler);
// ...その後
subscription.remove();

useEffect(() => {
  const subscription = BackHandler.addEventListener('hardwareBackPress', () => {
    // 戻るボタンが押下されたときの処理
    return true; // デフォルトの動作を抑制
  });

  return () => subscription.remove();
}, []);

grep -rn "useNativeDriver" src/

// ❌ クラッシュ - scaleAnim（ネイティブ）とbackgroundAnim（JS）を同じビューで使用
<Animated.View style={{
  transform: [{ scale: scaleAnim }],             // useNativeDriver: true
  backgroundColor: backgroundAnim.interpolate()  // useNativeDriver: false
}}>
  {/* コンテンツ */}
</Animated.View>

// ✅ 修正後 - ドライバータイプで分けて入れ子のビューに分離
<Animated.View style={{ transform: [{ scale: scaleAnim }], opacity: opacityAnim }}>
  {/* ネイティブ駆動：transform、opacity */}
  <Animated.View style={{ backgroundColor: colorAnim.interpolate(...) }}>
    {/* JS駆動：backgroundColor */}
    {/* コンテンツ */}
  </Animated.View>
</Animated.View>

// ❌ 更新前 - 従来のコンテキスト（削除済み）
class Parent extends React.Component {
  getChildContext() {
    return { theme: 'dark' };
  }
  static childContextTypes = { theme: PropTypes.string };
}

// ✅ 更新後 - 最新のコンテキストAPI
const ThemeContext = React.createContext('light');

function Parent({ children }) {
  return (
    <ThemeContext.Provider value="dark">
      {children}
    </ThemeContext.Provider>
  );
}

function Child() {
  const theme = useContext(ThemeContext);
  return <Text>{theme}</Text>;
}

// ✅ フックを常に明示的にインポート
import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';

grep -rn "useState\|useEffect\|useCallback\|useMemo\|useRef" src/ | grep -v "import"

# @welldone-software/why-did-you-render（ピアreact@^18を宣言）を削除します。
npm uninstall @welldone-software/why-did-you-render

npm ls react 2>&1 | grep "peer"

// ✅ 更新後 - アプリをSafeAreaProviderでラップ
import { SafeAreaProvider, useSafeAreaInsets } from 'react-native-safe-area-context';

function App() {
  return (
    <SafeAreaProvider>
      <AppContent />
    </SafeAreaProvider>
  );
}

function AppContent() {
  const insets = useSafeAreaInsets();
  
  return (
    <View style={{ 
      flex: 1,
      paddingTop: insets.top,
      paddingBottom: insets.bottom,
    }}>
      {/* アプリのコンテンツ */}
    </View>
  );
}

// ❌ 更新前（RN 0.72）- 物理ピクセル値
const styles = StyleSheet.create({
  container: {
    width: 1920,
    height: 1080,
    padding: 32,
  },
  title: {
    fontSize: 48,
    marginBottom: 24,
  },
});

// ✅ 更新後（RN 0.83）- dp値（2で除算した値）
const styles = StyleSheet.create({
  container: {
    width: 960,
    height: 540,
    padding: 16,
  },
  title: {
    fontSize: 24,
    marginBottom: 12,
  },
});