😺

Lynxで、SafeAreaに対応する

2025/03/12に公開

React Native

今かなりhotなLynxですが、SafeArea対応に関する情報がなかったのでここに置いておきます。
PWA対応等をしない限りWebアプリ開発で気にする機会がないSafeArea対応ですが、

モバイルアプリ開発を行う場合、これを意識する必要があります。

 SafeAreaとはiOSやAndroidデバイスでアプリを開いても基本はOSのUIが残ります。
画面内上部: ノッチ、ステータスバー（現在の時間、通知アイコン、Dynamic Island等）
画面内下部: ホームバー、ナビゲーションバー
アプリのUIがこの領域に干渉しないように用意されている安全な領域がSafeAreaになります。
👇実際、SafeAreaを意識せずにデザインをしてしまうとこうなります。
iPhoneの時間表示部分とヘッダーテキストが重なっていますね。
そしたら、padding-topすれば良いのでは？となりますが、この領域のサイズはデバイスによって異なるので、どこかから値を持ってこないといけません。

 対応CSSにて、env()関数を使用すれば対応できます。
top: env(safe-area-inset-top)
left: env(safe-area-inset-left)
right: env(safe-area-inset-right)
bottom: env(safe-area-inset-bottom)
env(safe-area-inset-*)はpx, rem等の値を返します

その為、calc()と組み合わせれば計算もできます。
CSS only👍

 サンプルコードimport "./App.css"

export function App() {
  return (
    <page className="app-container">
      <view className="app-header">
        <text className="brand">SafeHeader</text>
      </view>
      <view className="app-body">
        <text>Hello world!</text>
      </view>
    </page>
  )
}
.app-container {
  /* デバイス下部のSafeArea対応 */
  padding-bottom: env(safe-area-inset-bottom);
}

.app-header {
  /* デバイス上部のSafeArea対応（ヘッダー上部を伸ばす） */
  padding-top: env(safe-area-inset-top);
  height: calc(env(safe-area-inset-top) + 50px);

  /* ヘッダーのスタイル */
  padding-left: 20px;
  padding-right: 20px;
  display: flex;
  align-items: center;
  background-color: #e7e9ec;

  .brand {
    font-size: 18px;
  }
}

.app-body {
  padding: 16px;
}
驚愕のコード量😲

 さいごにLynxを触って思ったのが、React Nativeに対して圧倒的にローコードかつ爆速（特に起動）。

起動が爆速すぎてViteと同じくらいの感覚でnpm run devできるの感動。
まだ不安定だったり情報少ないですが、かなり魅力的なのでLynxの開発とコミュニティがもっと活発化してほしいですね。

 参考env() - CSS: Cascading Style Sheets - MDN Web Docs

SafeAreaとは

対応

サンプルコード

さいごに

参考

Discussion