More prep work for handling safe areas.

src/account-info/AwayStatusSwitch.js

@@ -2,7 +2,7 @@
 import React from 'react';
 
 import { useSelector, useDispatch } from '../react-redux';
-import { OptionRow } from '../common';
+import { SwitchRow } from '../common';
 import { getSelfUserAwayStatus } from '../selectors';
 import { updateUserAwayStatus } from '../user-status/userStatusActions';
 
@@ -18,7 +18,7 @@ export default function AwayStatusSwitch(props: Props) {
   const dispatch = useDispatch();
 
   return (
-    <OptionRow
+    <SwitchRow
       label="Set yourself to away"
       value={awayStatus}
       onValueChange={(away: boolean) => {

src/common/OptionButton.js → src/common/NestedNavRow.js

@@ -12,27 +12,33 @@ import styles, { ThemeContext } from '../styles';
 type Props = $ReadOnly<{|
   Icon?: SpecificIconType,
   label: string,
+
+  // Use this to navigate to a "nested" screen.
   onPress: () => void,
 |}>;
 
-export default class OptionButton extends PureComponent<Props> {
+/**
+ * A button that navigates to a "nested" screen.
+ *
+ * Shows a right-facing arrow to indicate its purpose. If you need a
+ * selectable option row instead, use `SelectableOptionRow`.
+ */
+export default class NestedNavRow extends PureComponent<Props> {
   static contextType = ThemeContext;
   context: ThemeData;
 
-  styles = {
-    icon: styles.settingsIcon,
-  };
-
   render() {
     const { label, onPress, Icon } = this.props;
 
     return (
       <Touchable onPress={onPress}>
         <View style={styles.listItem}>
-          {!!Icon && <Icon size={18} style={[this.styles.icon, { color: this.context.color }]} />}
+          {!!Icon && (
+            <Icon size={24} style={[styles.settingsIcon, { color: this.context.color }]} />
+          )}
           <Label text={label} />
           <View style={styles.rightItem}>
-            <IconRight size={18} style={[this.styles.icon, { color: this.context.color }]} />
+            <IconRight size={24} style={[styles.settingsIcon, { color: this.context.color }]} />
           </View>
         </View>
       </Touchable>

src/common/SelectableOptionRow.js

@@ -0,0 +1,73 @@
+/* @flow strict-local */
+import React from 'react';
+import { View } from 'react-native';
+
+import { RawLabel, Touchable } from '.';
+import { BRAND_COLOR, createStyleSheet } from '../styles';
+import { IconDone } from './Icons';
+
+const styles = createStyleSheet({
+  wrapper: {
+    flex: 1,
+    flexDirection: 'column',
+  },
+  subtitle: {
+    fontWeight: '300',
+    fontSize: 13,
+  },
+  listItem: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingTop: 12,
+    paddingBottom: 12,
+    paddingLeft: 16,
+    paddingRight: 16,
+  },
+});
+
+type Props<TItemKey: string | number> = $ReadOnly<{|
+  // A key to uniquely identify the item. The function passed as
+  // `onRequestSelectionChange` gets passed this. We would have just
+  // called this `key` except that would collide with React's builtin
+  // `key` attribute (which callers should also pass if they're in a
+  // position that requires it).
+  itemKey: TItemKey,
+
+  title: string,
+  subtitle?: string,
+  selected: boolean,
+
+  // We might have called this `onPress`, but
+  // - pressing just happens to be how this component wants the user
+  //   to manually select/deselect
+  // - callers don't have a license to do whatever they want here; see
+  //   note in jsdoc
+  onRequestSelectionChange: (itemKey: TItemKey, requestedValue: boolean) => void,
+|}>;
+
+/**
+ * A labeled row for an item among related items; shows a checkmark
+ *   when selected.
+ *
+ * NOTE: This isn't an all-purpose action button. The component has
+ * two essential states: selected and deselected. These must clearly
+ * represent two states in the app; e.g., for each supported locale,
+ * 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.
+ */
+export default function SelectableOptionRow<TItemKey: string | number>(props: Props<TItemKey>) {
+  const { itemKey, title, subtitle, selected, onRequestSelectionChange } = props;
+
+  return (
+    <Touchable onPress={() => onRequestSelectionChange(itemKey, !selected)}>
+      <View 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>
+    </Touchable>
+  );
+}

src/common/OptionRow.js → src/common/SwitchRow.js

@@ -17,12 +17,14 @@ type Props = $ReadOnly<{|
   onValueChange: (newValue: boolean) => void,
 |}>;
 
-export default class OptionRow extends PureComponent<Props> {
+/**
+ * A row with a label and a switch component.
+ */
+export default class SwitchRow extends PureComponent<Props> {
   static contextType = ThemeContext;
   context: ThemeData;
 
   styles = {
-    icon: styles.settingsIcon,
     container: {
       height: 56,
     },
@@ -33,7 +35,7 @@ export default class OptionRow extends PureComponent<Props> {
 
     return (
       <View style={[this.styles.container, styles.listItem, style]}>
-        {!!Icon && <Icon size={18} style={[this.styles.icon, { color: this.context.color }]} />}
+        {!!Icon && <Icon size={24} style={[styles.settingsIcon, { color: this.context.color }]} />}
         <Label text={label} style={styles.flexed} />
         <View style={styles.rightItem}>
           <ZulipSwitch value={value} onValueChange={onValueChange} />

src/common/index.js

@@ -16,9 +16,9 @@ export { default as LoadingIndicator } from './LoadingIndicator';
 export { default as LoadingBanner } from './LoadingBanner';
 export { default as Logo } from './Logo';
 export { default as OfflineNotice } from './OfflineNotice';
-export { default as OptionButton } from './OptionButton';
+export { default as NestedNavRow } from './NestedNavRow';
 export { default as OptionDivider } from './OptionDivider';
-export { default as OptionRow } from './OptionRow';
+export { default as SwitchRow } from './SwitchRow';
 export { default as OwnAvatar } from './OwnAvatar';
 export { default as PasswordInput } from './PasswordInput';
 export { default as Popup } from './Popup';
@@ -29,6 +29,7 @@ export { default as SearchInput } from './SearchInput';
 export { default as SectionHeader } from './SectionHeader';
 export { default as SectionSeparator } from './SectionSeparator';
 export { default as SectionSeparatorBetween } from './SectionSeparatorBetween';
+export { default as SelectableOptionRow } from './SelectableOptionRow';
 export { default as SmartUrlInput } from './SmartUrlInput';
 export { default as SpinningProgress } from './SpinningProgress';
 export { default as GroupAvatar } from './GroupAvatar';

src/diagnostics/DiagnosticsScreen.js

@@ -7,7 +7,7 @@ import type { RouteProp } from '../react-navigation';
 import type { AppNavigationProp } from '../nav/AppNavigator';
 import * as NavigationService from '../nav/NavigationService';
 import { createStyleSheet } from '../styles';
-import { OptionButton, OptionDivider, Screen, RawLabel } from '../common';
+import { NestedNavRow, OptionDivider, Screen, RawLabel } from '../common';
 import {
   navigateToDebug,
   navigateToStorage,
@@ -33,25 +33,25 @@ export default class DiagnosticsScreen extends PureComponent<Props> {
       <Screen title="Diagnostics">
         <RawLabel style={styles.versionLabel} text={`v${nativeApplicationVersion ?? '?.?.?'}`} />
         <OptionDivider />
-        <OptionButton
+        <NestedNavRow
           label="Variables"
           onPress={() => {
             NavigationService.dispatch(navigateToVariables());
           }}
         />
-        <OptionButton
+        <NestedNavRow
           label="Timing"
           onPress={() => {
             NavigationService.dispatch(navigateToTiming());
           }}
         />
-        <OptionButton
+        <NestedNavRow
           label="Storage"
           onPress={() => {
             NavigationService.dispatch(navigateToStorage());
           }}
         />
-        <OptionButton
+        <NestedNavRow
           label="Debug"
           onPress={() => {
             NavigationService.dispatch(navigateToDebug());

src/nav/NavButton.js

@@ -23,7 +23,6 @@ export default class NavButton extends PureComponent<Props> {
   styles = createStyleSheet({
     navButtonIcon: {
       textAlign: 'center',
-      fontSize: 26,
     },
   });
 
@@ -32,7 +31,7 @@ export default class NavButton extends PureComponent<Props> {
 
     return (
       <NavButtonGeneral onPress={onPress} accessibilityLabel={accessibilityLabel}>
-        <Icon style={[this.styles.navButtonIcon, style]} color={color} name={name} />
+        <Icon size={24} style={[this.styles.navButtonIcon, style]} color={color} name={name} />
       </NavButtonGeneral>
     );
   }

src/reactUtils.js

@@ -0,0 +1,20 @@
+/* @flow strict-local */
+import { useRef, useEffect } from 'react';
+
+/**
+ * A Hook for the value of a prop, state, etc., from the previous
+ *   render, or the first render if this is the first.
+ *
+ * From
+ * https://reactjs.org/docs/hooks-faq.html#how-to-get-the-previous-props-or-state,
+ * which says, "It’s possible that in the future React will provide a
+ * `usePrevious` Hook out of the box since it’s a relatively common
+ * use case."
+ */
+export function usePrevious<T>(value: T): T {
+  const ref = useRef<T>(value);
+  useEffect(() => {
+    ref.current = value;
+  });
+  return ref.current;
+}

src/settings/DebugScreen.js

@@ -6,7 +6,7 @@ import type { RouteProp } from '../react-navigation';
 import type { AppNavigationProp } from '../nav/AppNavigator';
 import { useSelector, useDispatch } from '../react-redux';
 import { getSession } from '../selectors';
-import { OptionRow, Screen } from '../common';
+import { SwitchRow, Screen } from '../common';
 import { debugFlagToggle } from '../actions';
 
 type Props = $ReadOnly<{|
@@ -27,7 +27,7 @@ export default function DebugScreen(props: Props) {
 
   return (
     <Screen title="Debug">
-      <OptionRow
+      <SwitchRow
         label="Do not mark messages read on scroll"
         value={debug.doNotMarkMessagesAsRead}
         onValueChange={() => handleSettingToggle('doNotMarkMessagesAsRead')}

src/settings/LanguagePicker.js

@@ -4,10 +4,9 @@ import { FlatList } from 'react-native';
 
 import type { GetText } from '../types';
 import { TranslationContext } from '../boot/TranslationProvider';
-import { OptionDivider } from '../common';
+import { OptionDivider, SelectableOptionRow } from '../common';
 import languages from './languages';
 import type { Language } from './languages';
-import LanguagePickerItem from './LanguagePickerItem';
 
 type Props = $ReadOnly<{|
   value: string,
@@ -56,12 +55,12 @@ export default class LanguagePicker extends PureComponent<Props> {
         keyboardShouldPersistTaps="always"
         keyExtractor={item => item.locale}
         renderItem={({ item }) => (
-          <LanguagePickerItem
+          <SelectableOptionRow
             selected={item.locale === value}
-            onValueChange={onValueChange}
-            locale={item.locale}
-            name={item.name}
-            nativeName={item.nativeName}
+            onRequestSelectionChange={onValueChange}
+            itemKey={item.locale}
+            subtitle={item.name}
+            title={item.nativeName}
           />
         )}
       />

src/settings/LegalScreen.js

@@ -5,7 +5,7 @@ import React, { useCallback } from 'react';
 import type { RouteProp } from '../react-navigation';
 import type { AppNavigationProp } from '../nav/AppNavigator';
 import { useSelector } from '../react-redux';
-import { Screen, OptionButton } from '../common';
+import { Screen, NestedNavRow } from '../common';
 import { openLinkEmbedded } from '../utils/openLink';
 import { getCurrentRealm } from '../selectors';
 
@@ -27,8 +27,8 @@ export default function LegalScreen(props: Props) {
 
   return (
     <Screen title="Legal">
-      <OptionButton label="Terms of service" onPress={openTermsOfService} />
-      <OptionButton label="Privacy policy" onPress={openPrivacyPolicy} />
+      <NestedNavRow label="Terms of service" onPress={openTermsOfService} />
+      <NestedNavRow label="Privacy policy" onPress={openPrivacyPolicy} />
     </Screen>
   );
 }