diff --git a/src/nav/NavButton.js b/src/nav/NavButton.js
index e065b71e4fa..a83d6120d3d 100644
--- a/src/nav/NavButton.js
+++ b/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>
+  );
 }