safeAreaView: Ensure MainScreenWithTabs is aligned

Makes sure our main tabs are aligned properly with the edges of the screen on iOS.

More about how safe areas work on iOS:
https://developer.apple.com/documentation/uikit/uiview/positioning_content_relative_to_the_safe_area

About the React Native-specific component:
https://facebook.github.io/react-native/docs/safeareaview

src/main/MainScreenWithTabs.js

@@ -1,6 +1,6 @@
 /* @flow strict-local */
 import React, { PureComponent } from 'react';
-import { View } from 'react-native';
+import { SafeAreaView } from 'react-native';
 
 import type { Context } from '../types';
 import { OfflineNotice, ZulipStatusBar } from '../common';
@@ -18,11 +18,11 @@ export default class MainScreenWithTabs extends PureComponent<{}> {
     const { styles: contextStyles } = this.context;
 
     return (
-      <View style={[styles.flexed, contextStyles.backgroundColor]}>
+      <SafeAreaView style={[styles.flexed, contextStyles.backgroundColor]}>
         <ZulipStatusBar />
         <OfflineNotice />
         <MainTabs />
-      </View>
+      </SafeAreaView>
     );
   }
 }