layout: Handle safe areas for screen-spanning "row" elements.

Each of these UI elements is a row that has meaningful content that
we need to keep within the safe areas, but the rest of the row (its
distinct background color, its touchable area, etc.) is meant to
extend through the insets to the extreme left and right of the
screen. See example screenshots at
  zulip#4683 (comment).

So, make that happen. We do so by giving the rows left and right
padding. This is easy and makes the row elements' styles pretty
intuitive, but it does mean we'll have to take care, in the next few
commits, not to add any padding to the elements that contain the
rows -- we don't want to double up the padding by mistake.

(This requirement ends up being kind of annoying on screens that
have a mix of these kinds of rows and regular elements. But this is
unfortunately the workable design we've found; see our architecture
doc on handling safe areas.)

Related: zulip#3066

Author: chrisbobbe

src/account-info/AwayStatusSwitch.js

@@ -13,6 +13,8 @@ type Props = $ReadOnly<{||}>;
  * This is a stand-alone component that:
  *  * retrieves the current user's `user status` data and presents it
  *  * allows by switching it to control the `away` status
+ *
+ * Needs to occupy the horizontal insets because `SwitchRow` does.
  */
 export default function AwayStatusSwitch(props: Props): Node {
   const awayStatus = useSelector(getSelfUserAwayStatus);

src/account-info/ProfileScreen.js

@@ -102,6 +102,9 @@ type Props = $ReadOnly<{|
  * It does not have a "Send private message" but has "Switch account" and "Log out" buttons.
  *
  * The user can still open `AccountDetails` on themselves via the (i) icon in a chat screen.
+ *
+ * Needs to occupy the horizontal insets because the away-status switch
+ * does.
  */
 export default function ProfileScreen(props: Props): Node {
   const ownUser = useSelector(getOwnUser);

src/autocomplete/EmojiAutocomplete.js

@@ -34,6 +34,9 @@ export default function EmojiAutocomplete(props: Props): Node {
         data={emojiNames.slice(0, MAX_CHOICES)}
         keyExtractor={item => item.name}
         renderItem={({ item }) => (
+          // TODO: Make and use a new emoji-item component with no padding
+          //   for the insets. The rows' content should be bounded by the
+          //   popup, which renders within the safe area.
           <EmojiRow
             type={item.emoji_type}
             code={item.code}

src/autocomplete/PeopleAutocomplete.js

@@ -81,6 +81,9 @@ export default function PeopleAutocomplete(props: Props): Node {
         // synthetic "users" to represent @all and @everyone.
         // TODO display those in a UI that makes more sense for them,
         //   and drop the fake "users" and use the normal UserItem.
+        // TODO: Make and use a new user-item component with no padding for
+        //   the insets. The rows' content should be bounded by the popup,
+        //   which renders within the safe area.
         <UserItemRaw
           key={item.user_id}
           user={item}

src/autocomplete/StreamAutocomplete.js

@@ -42,6 +42,9 @@ export default function StreamAutocomplete(props: Props): Node {
         data={matchingSubscriptions}
         keyExtractor={item => item.stream_id.toString()}
         renderItem={({ item }) => (
+          // TODO: Make and use a new stream-item component with no padding
+          //   for the insets. The rows' content should be bounded by the
+          //   popup, which renders within the safe area.
           <StreamItem
             name={item.name}
             isMuted={!item.in_home_view}

src/common/NestedNavRow.js

@@ -2,6 +2,7 @@
 import React, { useContext } from 'react';
 import type { Node } from 'react';
 import { View } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
 
 import Label from './Label';
 import Touchable from './Touchable';
@@ -22,6 +23,8 @@ type Props = $ReadOnly<{|
  *
  * Shows a right-facing arrow to indicate its purpose. If you need a
  * selectable option row instead, use `SelectableOptionRow`.
+ *
+ * Pads the horizontal insets with its background.
  */
 export default function NestedNavRow(props: Props): Node {
   const { label, onPress, Icon } = props;
@@ -30,13 +33,13 @@ export default function NestedNavRow(props: Props): Node {
 
   return (
     <Touchable onPress={onPress}>
-      <View style={styles.listItem}>
+      <SafeAreaView mode="padding" edges={['right', 'left']} style={styles.listItem}>
         {!!Icon && <Icon size={24} style={[styles.settingsIcon, { color: themeContext.color }]} />}
         <Label text={label} />
         <View style={styles.rightItem}>
           <IconRight size={24} style={[styles.settingsIcon, { color: themeContext.color }]} />
         </View>
-      </View>
+      </SafeAreaView>
     </Touchable>
   );
 }

src/common/SectionHeader.js

@@ -1,7 +1,7 @@
 /* @flow strict-local */
 import React, { PureComponent } from 'react';
 import type { Node, Context } from 'react';
-import { View } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
 
 import type { ThemeData } from '../styles';
 import { ThemeContext, createStyleSheet } from '../styles';
@@ -18,16 +18,25 @@ type Props = $ReadOnly<{|
   text: string,
 |}>;
 
+/**
+ * (TODO: Is this meant to be reusable? How?)
+ *
+ * Pads the horizontal insets with its background.
+ */
 export default class SectionHeader extends PureComponent<Props> {
   static contextType: Context<ThemeData> = ThemeContext;
   context: ThemeData;
 
   render(): Node {
     const { text } = this.props;
     return (
-      <View style={[styles.header, { backgroundColor: this.context.backgroundColor }]}>
+      <SafeAreaView
+        mode="padding"
+        edges={['right', 'left']}
+        style={[styles.header, { backgroundColor: this.context.backgroundColor }]}
+      >
         <Label text={text} />
-      </View>
+      </SafeAreaView>
     );
   }
 }

src/common/SelectableOptionRow.js

@@ -2,6 +2,7 @@
 import React from 'react';
 import type { Node } from 'react';
 import { View } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
 
 import { RawLabel, Touchable } from '.';
 import { BRAND_COLOR, createStyleSheet } from '../styles';
@@ -56,6 +57,8 @@ type Props<TItemKey: string | number> = $ReadOnly<{|
  * it is either active or not. The event handler shouldn't do random
  * things that aren't related to that state, like navigating to a
  * different screen.
+ *
+ * Pads the horizontal insets with its background.
  */
 export default function SelectableOptionRow<TItemKey: string | number>(
   props: Props<TItemKey>,
@@ -64,13 +67,13 @@ export default function SelectableOptionRow<TItemKey: string | number>(
 
   return (
     <Touchable onPress={() => onRequestSelectionChange(itemKey, !selected)}>
-      <View style={styles.listItem}>
+      <SafeAreaView mode="padding" edges={['right', 'left']} style={styles.listItem}>
         <View style={styles.wrapper}>
           <RawLabel text={title} />
           {subtitle !== undefined && <RawLabel text={subtitle} style={styles.subtitle} />}
         </View>
         <View>{selected && <IconDone size={16} color={BRAND_COLOR} />}</View>
-      </View>
+      </SafeAreaView>
     </Touchable>
   );
 }

src/common/SwitchRow.js

@@ -3,6 +3,7 @@ import React, { useContext } from 'react';
 import type { Node } from 'react';
 import { View } from 'react-native';
 import type { ViewStyleProp } from 'react-native/Libraries/StyleSheet/StyleSheet';
+import { SafeAreaView } from 'react-native-safe-area-context';
 
 import type { SpecificIconType } from './Icons';
 import Label from './Label';
@@ -25,19 +26,28 @@ const componentStyles = createStyleSheet({
 
 /**
  * A row with a label and a switch component.
+ *
+ * Pads the horizontal insets with its background. (A parent component
+ * could probably do this instead, if desired. The choice to do it here is
+ * just in line with our other "row" components, like `SelectableOptionRow`,
+ * which do need to pad the insets.)
  */
 export default function SwitchRow(props: Props): Node {
   const { label, value, onValueChange, style, Icon } = props;
 
   const themeContext = useContext(ThemeContext);
 
   return (
-    <View style={[componentStyles.container, styles.listItem, style]}>
+    <SafeAreaView
+      mode="padding"
+      edges={['right', 'left']}
+      style={[componentStyles.container, styles.listItem, style]}
+    >
       {!!Icon && <Icon size={24} style={[styles.settingsIcon, { color: themeContext.color }]} />}
       <Label text={label} style={styles.flexed} />
       <View style={styles.rightItem}>
         <ZulipSwitch value={value} onValueChange={onValueChange} />
       </View>
-    </View>
+    </SafeAreaView>
   );
 }

src/emoji/EmojiPickerScreen.js

@@ -32,6 +32,12 @@ type State = {|
   filter: string,
 |};
 
+/**
+ * A screen to choose an emoji reaction.
+ *
+ * Needs to occupy the horizontal insets because its descendents (the
+ * `EmojiRow`s) do.
+ */
 class EmojiPickerScreen extends PureComponent<Props, State> {
   state = {
     filter: '',