AndroidのEdge‑to‑Edgeを有効にして「3ボタンナビゲーション」をONにすると表示が崩れる

概要

前から対応していた memoir の最新化は無事リリース完了。
まとめ記事を Zenn に投稿したので詳細は以下も参照。
zenn.dev

リリース後に「画面下部のボタンとナビゲーションボタンが重なって操作できない」という問い合わせが入り、原因を特定して修正したので共有。

PR

github.com

再現方法

検証用端末では「ジェスチャーナビゲーション」を使っていたため気づけなかったが、設定から「3ボタンナビゲーション」を ON にすると再現。

アプリ起動時に「ナビゲーションボタン」と「アプリの UI」が重なり、対象のボタンがタップできない状態になる。

原因

根本原因は Edge‑to‑Edge。
前回の記事でも触れた通り、Edge‑to‑Edge を有効にするとナビゲーションバー領域もアプリのレンダリング領域に含まれるようになるため、下部 UI と競合する。
www.wheatandcat.me

実装

「3ボタンナビゲーション」の高さは react-native-safe-area-context の useSafeAreaInsets から bottom として取得可能。下部の固定ボタンに対して、insets.bottom を考慮した余白を与える。

■ components/layouts/Home/MemoirButton.tsx

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

const MemoirButton: FC<Props> = (props) => {
  const insets = useSafeAreaInsets();

  return (
    <View style={[styles.root]}>
      <View
        style={{
          paddingBottom: Platform.OS === "ios" ? 0 : insets.bottom - 20, // ← ここで調整
        }}
      >
        <TouchableOpacity onPress={props.onPress}>
          <View style={[styles.memoirButton]}>
            <View>
              <Image
                source={require("@/assets/img/icon/main.png")}
                width={30}
                height={30}
              />
            </View>
            <View>
              <Text>今週のmemoirを確認する</Text>
            </View>
          </View>
        </TouchableOpacity>
      </View>
    </View>
  );
};