Use 'SafeAreaView' through the app

.flowconfig

@@ -28,7 +28,6 @@ node_modules/warning/.*
 
 .*/node_modules/react-native-notifications/.*
 .*/node_modules/react-native-tab-view/.*
-.*/node_modules/react-native-safe-area/.*
 .*/node_modules/flow-coverage-report/.*
 .*/node_modules/@snyk/.*
 

ios/Podfile.lock

@@ -276,8 +276,6 @@ PODS:
     - React
   - react-native-safari-view (1.0.0):
     - React
-  - react-native-safe-area (0.4.4):
-    - React
   - react-native-safe-area-context (3.1.7):
     - React
   - react-native-simple-toast (1.0.0):
@@ -446,7 +444,6 @@ DEPENDENCIES:
   - react-native-notifications (from `../node_modules/react-native-notifications`)
   - react-native-photo-view (from `../node_modules/react-native-photo-view`)
   - react-native-safari-view (from `../node_modules/react-native-safari-view`)
-  - react-native-safe-area (from `../node_modules/react-native-safe-area`)
   - react-native-safe-area-context (from `../node_modules/react-native-safe-area-context`)
   - react-native-simple-toast (from `../node_modules/react-native-simple-toast`)
   - react-native-webview (from `../node_modules/react-native-webview`)
@@ -560,8 +557,6 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native-photo-view"
   react-native-safari-view:
     :path: "../node_modules/react-native-safari-view"
-  react-native-safe-area:
-    :path: "../node_modules/react-native-safe-area"
   react-native-safe-area-context:
     :path: "../node_modules/react-native-safe-area-context"
   react-native-simple-toast:
@@ -677,7 +672,6 @@ SPEC CHECKSUMS:
   react-native-notifications: ce37363008fe2d6a226da4e721eace23b6ae3ad9
   react-native-photo-view: 63e9e61da873531f931008b545d8d10c5373ddf8
   react-native-safari-view: 955d7160d159241b8e9395d12d10ea0ef863dcdd
-  react-native-safe-area: 5fce5242419932bc05656f31bc5f0716e30be0f6
   react-native-safe-area-context: 955ecfce672683b495d9294d2f154a9ad1d9796b
   react-native-simple-toast: 6c376bd79b1e255a4bee90a72ead6447f96ea10d
   react-native-webview: 598605cd213f5096e695f5b33fbee210a47e60ab

package.json

@@ -69,7 +69,6 @@
     "react-native-photo-view": "alwx/react-native-photo-view#c58fd6b30",
     "react-native-reanimated": "^1.0.0",
     "react-native-safari-view": "2.0.0",
-    "react-native-safe-area": "^0.4.1",
     "react-native-safe-area-context": "^3.1.7",
     "react-native-screens": "^2.10.1",
     "react-native-simple-toast": "^1.0.0",

src/actionConstants.js

@@ -17,7 +17,6 @@ export const LOGOUT: 'LOGOUT' = 'LOGOUT';
 export const REALM_INIT: 'REALM_INIT' = 'REALM_INIT';
 export const DO_NARROW: 'DO_NARROW' = 'DO_NARROW';
 
-export const INIT_SAFE_AREA_INSETS: 'INIT_SAFE_AREA_INSETS' = 'INIT_SAFE_AREA_INSETS';
 export const INITIAL_FETCH_START: 'INITIAL_FETCH_START' = 'INITIAL_FETCH_START';
 export const INITIAL_FETCH_COMPLETE: 'INITIAL_FETCH_COMPLETE' = 'INITIAL_FETCH_COMPLETE';
 export const INIT_TOPICS: 'INIT_TOPICS' = 'INIT_TOPICS';

src/actionTypes.js

@@ -3,7 +3,6 @@ import {
   REHYDRATE,
   APP_ONLINE,
   DEAD_QUEUE,
-  INIT_SAFE_AREA_INSETS,
   APP_ORIENTATION,
   DEBUG_FLAG_TOGGLE,
   ACCOUNT_SWITCH,
@@ -62,7 +61,6 @@ import {
 import type { MessageEvent, PresenceEvent, StreamEvent, SubmessageEvent } from './api/eventTypes';
 
 import type {
-  Dimensions,
   Orientation,
   GlobalState,
   Message,
@@ -119,11 +117,6 @@ type DeadQueueAction = {|
   type: typeof DEAD_QUEUE,
 |};
 
-type InitSafeAreaInsetsAction = {|
-  type: typeof INIT_SAFE_AREA_INSETS,
-  safeAreaInsets: Dimensions,
-|};
-
 type AppOrientationAction = {|
   type: typeof APP_ORIENTATION,
   orientation: Orientation,
@@ -605,7 +598,6 @@ type RealmAction = RealmInitAction | UnackPushTokenAction | AckPushTokenAction;
 type SessionAction =
   | RehydrateAction
   | AppOnlineAction
-  | InitSafeAreaInsetsAction
   | AppOrientationAction
   | DoNarrowAction
   | GotPushTokenAction

src/boot/AppEventHandlers.js

@@ -3,7 +3,6 @@
 import React, { PureComponent } from 'react';
 import { AppState, View, Platform, NativeModules } from 'react-native';
 import NetInfo from '@react-native-community/netinfo';
-import SafeArea from 'react-native-safe-area';
 import * as ScreenOrientation from 'expo-screen-orientation';
 
 import type { Node as React$Node } from 'react';
@@ -17,7 +16,7 @@ import {
   notificationOnAppActive,
 } from '../notification';
 import { ShareReceivedListener, handleInitialShare } from '../sharing';
-import { appOnline, appOrientation, initSafeAreaInsets } from '../actions';
+import { appOnline, appOrientation } from '../actions';
 import PresenceHeartbeat from '../presence/PresenceHeartbeat';
 
 /**
@@ -129,9 +128,6 @@ class AppEventHandlers extends PureComponent<Props> {
     this.netInfoDisconnectCallback = NetInfo.addEventListener(this.handleConnectivityChange);
     AppState.addEventListener('change', this.handleAppStateChange);
     AppState.addEventListener('memoryWarning', this.handleMemoryWarning);
-    SafeArea.getSafeAreaInsetsForRootView().then(params =>
-      dispatch(initSafeAreaInsets(params.safeAreaInsets)),
-    );
     ScreenOrientation.addOrientationChangeListener(this.handleOrientationChange);
     this.notificationListener.start();
     this.shareListener.start();

src/chat/ChatScreen.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 { NavigationScreenProp } from 'react-navigation';
 import { ActionSheetProvider } from '@expo/react-native-action-sheet';
 
@@ -132,7 +132,9 @@ class ChatScreen extends PureComponent<Props, State> {
 
     return (
       <ActionSheetProvider>
-        <View style={[this.styles.screen, { backgroundColor: this.context.backgroundColor }]}>
+        <SafeAreaView
+          style={[this.styles.screen, { backgroundColor: this.context.backgroundColor }]}
+        >
           <KeyboardAvoider style={styles.flexed} behavior="padding">
             <ZulipStatusBar narrow={narrow} />
             <ChatNavBar narrow={narrow} editMessage={editMessage} />
@@ -161,7 +163,7 @@ class ChatScreen extends PureComponent<Props, State> {
               />
             )}
           </KeyboardAvoider>
-        </View>
+        </SafeAreaView>
       </ActionSheetProvider>
     );
   }

src/common/Screen.js

@@ -2,18 +2,16 @@
 
 import React, { PureComponent } from 'react';
 import type { Node as React$Node } from 'react';
-import { View, ScrollView } from 'react-native';
+import { SafeAreaView, ScrollView } from 'react-native';
 import type { ViewStyleProp } from 'react-native/Libraries/StyleSheet/StyleSheet';
 
 import type { ThemeData } from '../styles';
 import styles, { createStyleSheet, ThemeContext } from '../styles';
-import type { Dimensions, LocalizableText, Dispatch } from '../types';
-import { connect } from '../react-redux';
+import type { LocalizableText } from '../types';
 import KeyboardAvoider from './KeyboardAvoider';
 import OfflineNotice from './OfflineNotice';
 import LoadingBanner from './LoadingBanner';
 import ZulipStatusBar from './ZulipStatusBar';
-import { getSession } from '../selectors';
 import ModalNavBar from '../nav/ModalNavBar';
 import ModalSearchNavBar from '../nav/ModalSearchNavBar';
 
@@ -37,10 +35,8 @@ const componentStyles = createStyleSheet({
 });
 
 type Props = $ReadOnly<{|
-  dispatch: Dispatch,
   centerContent: boolean,
   +children: React$Node,
-  safeAreaInsets: Dimensions,
   keyboardShouldPersistTaps: 'never' | 'always' | 'handled',
   padding: boolean,
   scrollEnabled: boolean,
@@ -76,7 +72,7 @@ type Props = $ReadOnly<{|
  * @prop [title] - Text shown as the title of the screen.
  *                 Required unless `search` is true.
  */
-class Screen extends PureComponent<Props> {
+export default class Screen extends PureComponent<Props> {
   static contextType = ThemeContext;
   context: ThemeData;
 
@@ -103,7 +99,6 @@ class Screen extends PureComponent<Props> {
       children,
       keyboardShouldPersistTaps,
       padding,
-      safeAreaInsets,
       scrollEnabled,
       search,
       searchBarOnChange,
@@ -113,12 +108,8 @@ class Screen extends PureComponent<Props> {
     } = this.props;
 
     return (
-      <View
-        style={[
-          componentStyles.screen,
-          { backgroundColor: this.context.backgroundColor },
-          { paddingBottom: safeAreaInsets.bottom },
-        ]}
+      <SafeAreaView
+        style={[componentStyles.screen, { backgroundColor: this.context.backgroundColor }]}
       >
         <ZulipStatusBar />
         {search ? (
@@ -146,11 +137,7 @@ class Screen extends PureComponent<Props> {
             {children}
           </ScrollView>
         </KeyboardAvoider>
-      </View>
+      </SafeAreaView>
     );
   }
 }
-
-export default connect(state => ({
-  safeAreaInsets: getSession(state).safeAreaInsets,
-}))(Screen);

src/common/ZulipStatusBar.js

@@ -4,7 +4,7 @@ import React, { PureComponent } from 'react';
 import { Platform, StatusBar, View } from 'react-native';
 import Color from 'color';
 
-import type { Dimensions, Narrow, Orientation, ThemeName, Dispatch } from '../types';
+import type { Narrow, Orientation, ThemeName, Dispatch } from '../types';
 import { connect } from '../react-redux';
 import { DEFAULT_TITLE_BACKGROUND_COLOR, getTitleBackgroundColor } from '../title/titleSelectors';
 import { foregroundColorFromBackground } from '../utils/color';
@@ -25,7 +25,6 @@ export const getStatusBarStyle = (statusBarColor: string): BarStyle =>
     : 'dark-content';
 
 type SelectorProps = $ReadOnly<{|
-  safeAreaInsets: Dimensions,
   theme: ThemeName,
   narrowTitleBackgroundColor: string,
   orientation: Orientation,
@@ -54,9 +53,9 @@ class ZulipStatusBar extends PureComponent<Props> {
   };
 
   render() {
-    const { theme, hidden, safeAreaInsets, orientation } = this.props;
+    const { theme, hidden, orientation } = this.props;
     const backgroundColor = this.props.backgroundColor ?? this.props.narrowTitleBackgroundColor;
-    const style = { height: hidden ? 0 : safeAreaInsets.top, backgroundColor };
+    const style = { backgroundColor };
     const statusBarColor = getStatusBarColor(backgroundColor, theme);
     return (
       orientation === 'PORTRAIT' && (
@@ -75,7 +74,6 @@ class ZulipStatusBar extends PureComponent<Props> {
 }
 
 export default connect<SelectorProps, _, _>((state, props) => ({
-  safeAreaInsets: getSession(state).safeAreaInsets,
   theme: getSettings(state).theme,
   narrowTitleBackgroundColor: getTitleBackgroundColor(state, props.narrow),
   orientation: getSession(state).orientation,

src/compose/ComposeBox.js

@@ -13,7 +13,6 @@ import type {
   InputSelection,
   UserOrBot,
   Dispatch,
-  Dimensions,
   CaughtUp,
   GetText,
   Subscription,
@@ -43,7 +42,6 @@ import MentionWarnings from './MentionWarnings';
 import {
   getAuth,
   getIsAdmin,
-  getSession,
   getLastMessageTopic,
   getActiveUsersByEmail,
   getCaughtUpForNarrow,
@@ -63,7 +61,6 @@ type SelectorProps = {|
   auth: Auth,
   ownEmail: string,
   usersByEmail: Map<string, UserOrBot>,
-  safeAreaInsets: Dimensions,
   isAdmin: boolean,
   isAnnouncementOnly: boolean,
   isSubscribed: boolean,
@@ -423,7 +420,6 @@ class ComposeBox extends PureComponent<Props, State> {
       narrow,
       usersByEmail,
       editMessage,
-      safeAreaInsets,
       isAdmin,
       isAnnouncementOnly,
       isSubscribed,
@@ -442,7 +438,6 @@ class ComposeBox extends PureComponent<Props, State> {
 
     const placeholder = getComposeInputPlaceholder(narrow, ownEmail, usersByEmail);
     const style = {
-      paddingBottom: safeAreaInsets.bottom,
       backgroundColor: 'hsla(0, 0%, 50%, 0.1)',
     };
 
@@ -520,7 +515,6 @@ export default connect<SelectorProps, _, _>((state, props) => ({
   auth: getAuth(state),
   ownEmail: getOwnEmail(state),
   usersByEmail: getActiveUsersByEmail(state),
-  safeAreaInsets: getSession(state).safeAreaInsets,
   isAdmin: getIsAdmin(state),
   isAnnouncementOnly: getIsActiveStreamAnnouncementOnly(state, props.narrow),
   isSubscribed: getIsActiveStreamSubscribed(state, props.narrow),

src/lightbox/LightboxScreen.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 { NavigationScreenProp } from 'react-navigation';
 import { ActionSheetProvider } from '@expo/react-native-action-sheet';
 
@@ -26,12 +26,12 @@ export default class LightboxScreen extends PureComponent<Props> {
   render() {
     const { src, message } = this.props.navigation.state.params;
     return (
-      <View style={styles.screen}>
+      <SafeAreaView style={styles.screen}>
         <ZulipStatusBar hidden backgroundColor="black" />
         <ActionSheetProvider>
           <Lightbox src={src} message={message} />
         </ActionSheetProvider>
-      </View>
+      </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 { NavigationScreenProp } from 'react-navigation';
 
 import type { ThemeData } from '../styles';
@@ -20,11 +20,11 @@ export default class MainScreenWithTabs extends PureComponent<Props> {
 
   render() {
     return (
-      <View style={[styles.flexed, { backgroundColor: this.context.backgroundColor }]}>
+      <SafeAreaView style={[styles.flexed, { backgroundColor: this.context.backgroundColor }]}>
         <ZulipStatusBar />
         <OfflineNotice />
         <MainTabs navigation={this.props.navigation} />
-      </View>
+      </SafeAreaView>
     );
   }
 }

src/session/__tests__/sessionReducer-test.js

@@ -7,7 +7,6 @@ import {
   DO_NARROW,
   APP_ONLINE,
   INITIAL_FETCH_COMPLETE,
-  INIT_SAFE_AREA_INSETS,
   APP_ORIENTATION,
   GOT_PUSH_TOKEN,
   TOGGLE_OUTBOX_SENDING,
@@ -99,12 +98,6 @@ describe('sessionReducer', () => {
     expect(newState).toEqual({ ...baseState, loading: true });
   });
 
-  test('INIT_SAFE_AREA_INSETS', () => {
-    const safeAreaInsets = { top: 1, bottom: 2, right: 3, left: 0 };
-    const action = deepFreeze({ type: INIT_SAFE_AREA_INSETS, safeAreaInsets });
-    expect(sessionReducer(baseState, action)).toEqual({ ...baseState, safeAreaInsets });
-  });
-
   test('APP_ORIENTATION', () => {
     const state = deepFreeze({ ...baseState, orientation: 'PORTRAIT' });
     const orientation = 'LANDSCAPE';