NavButton [nfc]: Convert to function component.

This way, we won't have to annotate `defaultProps` for zulip#4907 in
either of the following ways:

- by using `$Shape`, which is unsound,
- by spelling out the properties that happen to appear there,
- or by doing something more complicated, like with `$ObjMap`

This has been the reason for converting several other components on
the way to zulip#4907, but we haven't written it down until now.

src/nav/NavButton.js

@@ -1,5 +1,5 @@
 /* @flow strict-local */
-import React, { PureComponent } from 'react';
+import React from 'react';
 import type { TextStyleProp } from 'react-native/Libraries/StyleSheet/StyleSheet';
 
 import { BRAND_COLOR, createStyleSheet } from '../styles';
@@ -8,7 +8,7 @@ import type { IconNames } from '../common/Icons';
 import NavButtonGeneral from './NavButtonGeneral';
 
 type Props = $ReadOnly<{|
-  color: string,
+  color?: string,
   style?: TextStyleProp,
   name: IconNames,
   onPress: () => void,
@@ -21,18 +21,12 @@ const componentStyles = createStyleSheet({
   },
 });
 
-export default class NavButton extends PureComponent<Props> {
-  static defaultProps = {
-    color: BRAND_COLOR,
-  };
+export default function NavButton(props: Props) {
+  const { name, style, color = BRAND_COLOR, onPress, accessibilityLabel } = props;
 
-  render() {
-    const { name, style, color, onPress, accessibilityLabel } = this.props;
-
-    return (
-      <NavButtonGeneral onPress={onPress} accessibilityLabel={accessibilityLabel}>
-        <Icon size={24} style={[componentStyles.navButtonIcon, style]} color={color} name={name} />
-      </NavButtonGeneral>
-    );
-  }
+  return (
+    <NavButtonGeneral onPress={onPress} accessibilityLabel={accessibilityLabel}>
+      <Icon size={24} style={[componentStyles.navButtonIcon, style]} color={color} name={name} />
+    </NavButtonGeneral>
+  );
 }