ExpoでのSafeAreaViewでデバイス別の余白設定

Expoでアプリ開発を始めてみたはいいものの、とりあえず<View>置いてみて、実機で確認してみたら、デバイスの画面からはみ出してね？って事ありませんか？

どうやってデバイスに対応する余白作るの？頑張ってMarginTopやMarginBottomでスタイルを当てて作るのか？と、もがいてしまったので、備忘録として記事にしてます...

解決方法はSafeAreaContextというライブラリの<SafeAreaView>を使用して、設定する事でデバイス別の余白設定を行う事が出来ます。

インストール

※Expo Routerを使用している場合はインストール不要です。

npx expo install react-native-safe-area-context

設定方法

SafeAreaContextを使用するには、アプリのルートコンポーネントに<SafeAreaProvider>を設置する必要があります。

_layout.tsx

import { SafeAreaProvider, SafeAreaView } from 'react-native-safe-area-context'

function RootLayoutNav() {
  return (
    <SafeAreaProvider>
      <SafeAreaView>
        // SafeAreaViewの間にSlotやStackなど画面に続くコンポーネントを置く
      </SafeAreaView>
    </SafeAreaProvider>
  )
}

緑色の部分のように余白が出来る

おわりに

私はExpo Routerを使用していますが、基本的にルート直下の_layout.tsxに設定しておけば、困る事は無いと思うので、おススメです。

やってみると簡単ですね！これでデバイスの上部と下部の両方で、デバイスを検出してそれに応じた余白を自動的に設定してくれます。超便利すぎる...