From c073c0559843c8418bd7f6c359b26ecb2701d69a Mon Sep 17 00:00:00 2001
From: Boris Yankov <borisyankov@gmail.com>
Date: Sun, 21 Oct 2018 16:47:18 +0300
Subject: [PATCH] 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 | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/main/MainScreenWithTabs.js b/src/main/MainScreenWithTabs.js
index 3638f4bfae7..4eb338fe47a 100644
--- a/src/main/MainScreenWithTabs.js
+++ b/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>
     );
   }
 }