ログオフ
開発2026-06-06

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

単体では検索しづらい Expo の細かい落とし穴を3つまとめた。expo-localization の混入クラッシュ・iOS のタブバー下部に出る白バー・ヘッダーの背景色が変わらない問題。

それ単体では検索しにくい Expo の細かいバグを3つまとめた。

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

事象

expo-localization を明示的にインストールしていないのに、依存として入り込んでクラッシュする。

原因

別のパッケージが expo-localization を依存に持っていて、バージョンが SDK と合わない状態でインストールされることがある。

解決策

npx expo install expo-localization

npx expo install 経由で明示的にインストールすると、SDK に合ったバージョンに揃えられる。package.json に明示的に入れることで依存のバージョン競合が解消される。

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

事象

iOS 実機またはシミュレーターで、画面下部のタブバーの下にさらに白い帯が表示される。

原因

Safe Area（ホームインジケーター領域）の扱いが原因。tabBarStyle に backgroundColor を設定していても、Safe Area 部分の色が別管理になっていて白いままになる。

解決策

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

加えて、アプリ全体の背景色を backgroundColor で設定するか、expo-navigation-bar（Android）や iOS の UIViewController 設定で Safe Area の色を合わせる。

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

// SafeAreaView の edges を調整して下部の余白を制御する
<SafeAreaView style={{ flex: 1, backgroundColor: '#000' }} edges={['top']}>
  {/* コンテンツ */}
</SafeAreaView>

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

事象

headerStyle に backgroundColor を設定しても、ヘッダーの色が変わらない。

原因

React Navigation v6 以降、headerStyle の backgroundColor だけでは不十分なケースがある。headerTransparent が効いていたり、headerShadowVisible が干渉していることがある。

解決策

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

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

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

補足

  • 3つとも「エラーメッセージが明確でない」か「見た目の問題」なので検索しづらい
  • いずれも SDK のバージョンアップ後に発生しやすい。アップグレード後に挙動がおかしくなったらまずこのあたりを確認する

※ 本記事にはアフィリエイトリンクが含まれます。

← 開発 一覧へ