React NativeでiPhone XやStatusBarの上部余白にまとめて対応できる「react-native-safe-area-view」

SafeAreaViewが動かなかった

React Navigationでカスタムヘッダーを作る際に、上からの余白をiPhone XやらiPhoneの各バージョンやらAndroidやらに対応しなければならなくてReact Nativeで提供されているSafeAreaViewを使おうとしたけど、なぜか動かなかった。

react-native-safe-area-view

JSオンリーで版のSafeAreaViewを提供してくれるパッケージらしい。
React Navigationで早くから採用されているというので安心して使えた。

サンプルコード

そのまま使おうとしたら上の方が黒くなるので背景白のViewでラップしました。

import SafeAreaView from 'react-native-safe-area-view';

export default class Top extends Component {
  render() {
    return (
      <View style={{backgroundColor: '#fff'}}>
        <SafeAreaView forceInset={{ top: 'always' }} style={{height: 40}}>
          <Text>こんにちは</Text>
        </SafeAreaView>
      </View>
    )
  }
}

結論・まとめ

デバイスによってpadding変えたりする面倒なコードが不要になり、めちゃくちゃ便利だった。