Android Edge‑to‑EdgeでExpo RouterのHeaderが消える問題を解消する

概要

Expo SDKを最新版へ上げたところ、Androidで Edge‑to‑Edge がデフォルト有効化。
その影響で Expo Router のヘッダーが描画されなくなった。挙動を整理して対処した内容を残す。

Edge‑to‑Edgeとは

Edge‑to‑Edgeを有効にすると StatusBar 領域までアプリがレンダリング可能になり、全画面 UI に役立つ。

developer.android.com

現象

既存実装で Edge‑to‑Edge を有効にすると、ナビゲーションバーが StatusBar と重なって描画された。

SafeAreaView で画面全体を wrap すると通常画面は直るが、expo‑routerのmodal で余計な余白が生じる。

PR

github.com

実装詳細

app/(app)/_layout.tsx を修正

Before

const RootView = Platform.OS === "ios" ? View : SafeAreaView;

return (
  <RootView style={{ flex: 1 }} edges={["top", "left", "right"]}>
    {/* ... */}
  </RootView>
);

SafeAreaView で包むため Android でも上部余白が確保されるが、modal まで影響。

After

import { useSafeAreaInsets } from "react-native-safe-area-context";

export default function AppLayout() {
  const insets = useSafeAreaInsets();

  return (
    <View style={{ flex: 1, paddingTop: Platform.OS === "android" ? insets.top : 0 }}>
      {/* ... */}
    </View>
  );
}

SafeAreaView をやめ、Android のみ paddingTop で StatusBar 分を確保。

Modal 画面を調整

SafeAreaView が二重で wrap されていたため、modal 内の SafeAreaView から top を除外。

<SafeAreaView style={styles.safe} edges={["left", "right", "bottom"]}>
  {/* modal content */}
</SafeAreaView>

動作確認

各画面でヘッダー位置と余白が正しく描画されたことを確認。

まとめ

• Edge‑to‑Edge 有効化で SafeAreaView の重複が原因となりヘッダーが消失
• Android は paddingTop で StatusBar 分だけ手動調整すると modal も破綻しない
• 同様の症状が出た場合は SafeAreaView の二重定義を疑うと解決が早い