キーワード†

• React Native
• React Navigation

現象†

React Nativeにて、React Navigationで作るヘッダがステータスバーに被ってしまう。

• expo経由・Android実機で被る
• iOSのシミュレータでは問題ない
• ビルドしてデプロイしたときにどうかは見てない

原因†

分からない。

対策†

StackNavigator()の第2引数に次を追加する。

{
  cardStyle: {
    paddingTop: (Platform.OS === 'ios')? 0: StatusBar.currentHeight
  }
}

なお、次のimportが必要。

import { Platform, StatusBar } from 'react-native'

備考†

なし。

参考†

• Android header is overlapped · Issue #1478 · react-navigation/react-navigation