nav [nfc]: Factor out NavBarBackButton into one place.

This already would have been good, but after adding the
accessibilityLabel, this bit of code is definitely complex enough
we want to avoid duplicating it.

Author: gnprice

src/nav/ChatNavBar.js

@@ -4,16 +4,14 @@ import React, { PureComponent } from 'react';
 import { View } from 'react-native';
 import Color from 'color';
 
-import * as NavigationService from './NavigationService';
 import type { Dispatch, Narrow, EditMessage } from '../types';
 import { LoadingBanner } from '../common';
 import { connect } from '../react-redux';
 import { BRAND_COLOR, NAVBAR_SIZE } from '../styles';
 import Title from '../title/Title';
-import NavButton from './NavButton';
+import NavBarBackButton from './NavBarBackButton';
 import { DEFAULT_TITLE_BACKGROUND_COLOR, getTitleBackgroundColor } from '../title/titleSelectors';
 import { foregroundColorFromBackground } from '../utils/color';
-import { navigateBack } from '../actions';
 import { ExtraButton, InfoButton } from '../title-buttons/titleButtonFromNarrow';
 
 type SelectorProps = {|
@@ -60,14 +58,7 @@ class ChatNavBar extends PureComponent<Props> {
             { backgroundColor },
           ]}
         >
-          <NavButton
-            name="arrow-left"
-            accessibilityLabel="Navigate up"
-            color={color}
-            onPress={() => {
-              NavigationService.dispatch(navigateBack());
-            }}
-          />
+          <NavBarBackButton color={color} />
           <Title color={color} narrow={narrow} editMessage={editMessage} />
           <ExtraButton color={color} narrow={narrow} />
           <InfoButton color={color} narrow={narrow} />

src/nav/ModalNavBar.js

@@ -3,14 +3,11 @@
 import React, { PureComponent } from 'react';
 import { View } from 'react-native';
 
-import * as NavigationService from './NavigationService';
 import type { LocalizableText } from '../types';
 import type { ThemeData } from '../styles';
 import styles, { ThemeContext, NAVBAR_SIZE } from '../styles';
-
 import Label from '../common/Label';
-import NavButton from './NavButton';
-import { navigateBack } from '../actions';
+import NavBarBackButton from './NavBarBackButton';
 
 type Props = $ReadOnly<{|
   canGoBack: boolean,
@@ -41,15 +38,7 @@ class ModalNavBar extends PureComponent<Props> {
           },
         ]}
       >
-        {canGoBack && (
-          <NavButton
-            name="arrow-left"
-            accessibilityLabel="Navigate up"
-            onPress={() => {
-              NavigationService.dispatch(navigateBack());
-            }}
-          />
-        )}
+        {canGoBack && <NavBarBackButton />}
         <View style={styles.flexedLeftAlign}>
           <Label style={textStyle} text={title} numberOfLines={1} ellipsizeMode="tail" />
         </View>

src/nav/ModalSearchNavBar.js

@@ -2,12 +2,10 @@
 import React, { PureComponent } from 'react';
 import { View } from 'react-native';
 
-import * as NavigationService from './NavigationService';
 import type { ThemeData } from '../styles';
 import { ThemeContext, NAVBAR_SIZE } from '../styles';
 import SearchInput from '../common/SearchInput';
-import NavButton from './NavButton';
-import { navigateBack } from '../actions';
+import NavBarBackButton from './NavBarBackButton';
 
 type Props = $ReadOnly<{|
   autoFocus: boolean,
@@ -36,16 +34,7 @@ class ModalSearchNavBar extends PureComponent<Props> {
           backgroundColor: this.context.backgroundColor,
         }}
       >
-        {canGoBack && (
-          <NavButton
-            name="arrow-left"
-            accessibilityLabel="Navigate up"
-            onPress={() => {
-              NavigationService.dispatch(navigateBack());
-            }}
-          />
-        )}
-
+        {canGoBack && <NavBarBackButton />}
         <SearchInput autoFocus={autoFocus} onChangeText={searchBarOnChange} />
       </View>
     );

src/nav/NavBarBackButton.js

@@ -0,0 +1,34 @@
+/* @flow strict-local */
+import React from 'react';
+
+import { navigateBack } from '../actions';
+import NavButton from './NavButton';
+import * as NavigationService from './NavigationService';
+
+/**
+ * The button for the start of the app bar, to return to previous screen.
+ *
+ * This serves as what Android calls the "Up button", and iOS calls the
+ * "back button".  It navigates back to the previous screen within the app.
+ *
+ * For background, see Android, iOS, and Material guidance on navigation:
+ * https://developer.android.com/guide/navigation/navigation-principles
+ * https://developer.apple.com/design/human-interface-guidelines/ios/app-architecture/navigation/
+ * https://developer.apple.com/design/human-interface-guidelines/ios/bars/navigation-bars/
+ * https://material.io/design/navigation/understanding-navigation.html
+ */
+// TODO: on iOS, show the right icon for a back button
+// TODO: on iOS, give the right label for a back button
+export default function NavBarBackButton(props: {| +color?: string |}) {
+  const { color } = props;
+  return (
+    <NavButton
+      name="arrow-left"
+      accessibilityLabel="Navigate up"
+      color={color}
+      onPress={() => {
+        NavigationService.dispatch(navigateBack());
+      }}
+    />
+  );
+}