Expo でよく踏む細かいバグまとめ：expo-localization 混入・TabBar 白バー・ヘッダー色

それ単体では検索しにくい Expo の細かいバグを3つまとめた。エラーメッセージがはっきり出ないか、見た目だけの問題なので、ピンポイントで調べてもなかなか答えにたどり着けない類いのものだ。

---

バグ1：expo-localization が混入してクラッシュする

事象

expo-localization を自分で入れた覚えがないのに、依存として入り込んでクラッシュする。別パッケージを追加したあとや、依存を入れ直したタイミングで起きやすい。

原因

別のパッケージが expo-localization を間接依存として引いてくる。その際に入るバージョンが、使っている SDK と噛み合わないことがある。

解決策

npx expo install expo-localization

ポイントは、npm install ではなく npx expo install を使うこと。後者は SDK に合うバージョンを自分で解決して入れてくれる。間接依存任せだとズレたバージョンが入りうるので、明示的に入れて版を揃えてしまうのが手っ取り早い。

---

バグ2：iOS のタブバー下部に白バーが出る

事象

iOS 実機またはシミュレーターで、画面下部のタブバーの、さらに下に白い帯が表示される。ホームインジケーター（下端の横棒）がある端末で目立つ。暗い配色のアプリだと、ここだけ白く浮いて気になる。

原因

ここは Safe Area の下端（ホームインジケーター領域）にあたる。tabBarStyle に backgroundColor を指定しても、その色が塗られるのはタブバー本体までで、下端の Safe Area までは届かない。背景に色を敷いていなければ、その部分は白いまま残る。

解決策

タブバー本体の色を指定するのは前提として、下端の Safe Area まで色を届かせるのが要点になる。やり方は2通り。

ひとつは、画面のルートに背景色を敷いて、その上にタブバーを乗せる。タブバーの裏側まで同じ色になるので、下端の白帯も消える。

// app/_layout.tsx
import { SafeAreaView } from 'react-native-safe-area-context';

// edges に 'bottom' を含め、下端まで背景色を敷く
<SafeAreaView style={{ flex: 1, backgroundColor: '#000' }} edges={['top', 'bottom']}>
  {/* ナビゲーター / コンテンツ */}
</SafeAreaView>

<Tab.Navigator
  screenOptions={{
    tabBarStyle: {
      backgroundColor: '#000',  // タブバー本体の色
    },
  }}
>

edges に 'bottom' を入れていないのが、下端だけ白く残る典型パターン。上端しか面倒を見ていないと下が取り残される。

もうひとつは、SafeAreaView を挟まず、画面コンテナのルートに backgroundColor を敷いてしまう方法。SafeAreaProvider の背景色そのものを暗くしておくと、Safe Area の余白部分も同じ色になる。どちらでも「下端まで色が塗られていること」が満たせればいい。

---

バグ3：ヘッダーの背景色が変わらない

事象

headerStyle に backgroundColor を設定しても、ヘッダーの色が変わらない。設定は通っているはずなのに見た目に反映されない、というのが厄介なところ。

原因

headerStyle の backgroundColor だけでは効かないケースがある。headerTransparent が有効になっていると下が透けるし、headerShadowVisible の影（境界線）が色味に干渉して見えることもある。

解決策

screenOptions={{
  headerStyle: {
    backgroundColor: '#1a1a1a',
  },
  headerShadowVisible: false,  // シャドウを消す（iOS でのズレ防止）
  headerTintColor: '#fff',     // 戻るボタン・テキストの色
}}

それでも効かない場合は headerBackground で完全に上書きする：

headerBackground: () => (
  <View style={{ flex: 1, backgroundColor: '#1a1a1a' }} />
),

補足

3つに共通するのは、SDK のバージョンを上げたあとに顔を出しやすいこと。依存の版がズレたり、ナビゲーション周りのデフォルト挙動が変わったりするタイミングだ。アップグレード後に「前は出なかった見た目の崩れ」が出たら、まずこのあたりを疑うと早い。