Android 17 で「ポートレート固定」が通用しなくなる — Rork 製 Expo アプリの大画面対応を前倒しで済ませる手順

{
  "expo": {
    "orientation": "default",
    "android": {
      "softwareKeyboardLayoutMode": "pan"
    },
    "plugins": [
      ["expo-screen-orientation", { "initialOrientation": "DEFAULT" }]
    ]
  }
}

// useConditionalPortraitLock.ts — スマートフォンでのみポートレート固定する
import { useEffect } from "react";
import { useWindowDimensions } from "react-native";
import * as ScreenOrientation from "expo-screen-orientation";
 
export function useConditionalPortraitLock() {
  const { width, height } = useWindowDimensions();
  // 短辺 600dp 以上は大画面とみなし、固定しない（固定しても無視されるため）
  const isLargeScreen = Math.min(width, height) >= 600;
 
  useEffect(() => {
    if (isLargeScreen) {
      ScreenOrientation.unlockAsync();
      return;
    }
    ScreenOrientation.lockAsync(
      ScreenOrientation.OrientationLock.PORTRAIT_UP
    );
    return () => {
      ScreenOrientation.unlockAsync();
    };
  }, [isLargeScreen]);
}

// useSizeClass.ts — 寸法クラスを 1 箇所で定義する
import { useWindowDimensions } from "react-native";
 
export type SizeClass = "compact" | "medium" | "expanded";
 
export function useSizeClass(): SizeClass {
  const { width } = useWindowDimensions();
  if (width < 600) return "compact";    // スマートフォン縦
  if (width < 840) return "medium";     // 折りたたみ展開・小型タブレット縦
  return "expanded";                    // タブレット横・デスクトップウィンドウ
}

// WallpaperGrid.tsx — 寸法クラスで列数とナビ位置を切り替える
import { FlatList, View } from "react-native";
import { useSizeClass } from "./useSizeClass";
 
const COLUMNS: Record<string, number> = {
  compact: 2,
  medium: 3,
  expanded: 5,
};
 
export function WallpaperGrid({ items }: { items: Item[] }) {
  const sizeClass = useSizeClass();
  const numColumns = COLUMNS[sizeClass];
 
  return (
    <View style={{ flexDirection: sizeClass === "expanded" ? "row" : "column", flex: 1 }}>
      {sizeClass === "expanded" && <SideNavigation />}
      <FlatList
        key={numColumns}            // 列数変更時に再レイアウトさせる
        data={items}
        numColumns={numColumns}
        renderItem={renderThumbnail}
      />
    </View>
  );
}