react-native-safe-area-viewを使ってiOSのSafeAreaをよしなにする

React Nativeでネイティブアプリを作っていると、Appbar（Toolbar）をセットしたくなりますよね。

ただ、単純に「セットしただけ」だと、SafeAreaと思いっきりかぶってしまいます。
こんな感じ。

App.tsx

export default class App extends React.Component<Props> {
  render() {
    return (
        <Appbar>
          <Appbar.Content title="MyProfile" />
          <Appbar.Action icon="mail" onPress={this.showAlert} />
          <Appbar.Action icon="call" onPress={this.showAlert} />
        </Appbar>
        <View style={styles.container}>
          <View style={styles.body}>
            <Text style={styles.welcome}>Welcome to React Native!</Text>
            <Text style={styles.instructions}>To get started, edit App.js</Text>
            <Text style={styles.instructions}>{instructions}</Text>
            <Button icon="add-a-photo" mode="contained" onPress={this.showAlert}>Press me</Button>
          </View>
        </View>
    );
  } 
  showAlert() {
    Alert.alert("こんにちは世界！");
  }

ここにreact-native-safe-area-viewのSafeAreaViewを使うと、SafeAreaをよしなに避けてくれます。
こうなります。

App.tsx

export default class App extends React.Component<Props> {
  render() {
    return (
      <SafeAreaView style={styles.container}>
        <Appbar>
          <Appbar.Content title="MyProfile" />
          <Appbar.Action icon="mail" onPress={this.showAlert} />
          <Appbar.Action icon="call" onPress={this.showAlert} />
        </Appbar>
        <View style={styles.container}>
          <View style={styles.body}>
            <Text style={styles.welcome}>Welcome to React Native!</Text>
            <Text style={styles.instructions}>To get started, edit App.js</Text>
            <Text style={styles.instructions}>{instructions}</Text>
            <Button icon="add-a-photo" mode="contained" onPress={this.showAlert}>Press me</Button>
          </View>
        </View>
      </SafeAreaView>
    );
  } 
  showAlert() {
    Alert.alert("こんにちは世界！");
  }
}

React Native楽しい！！！！！！！！