diff --git a/native/chat/settings/color-selector-modal.react.js b/native/chat/settings/color-selector-modal.react.js
--- a/native/chat/settings/color-selector-modal.react.js
+++ b/native/chat/settings/color-selector-modal.react.js
@@ -50,55 +50,24 @@
     request: UpdateThreadRequest,
   ) => Promise<ChangeThreadSettingsPayload>,
 };
-class ColorSelectorModal extends React.PureComponent<Props> {
-  render() {
-    const { color } = this.props.route.params;
-    // Based on the assumption we are always in portrait,
-    // and consequently width is the lowest dimensions
-    const modalStyle = { height: 0.75 * this.props.windowWidth };
-    return (
-      <Modal
-        modalStyle={[this.props.styles.colorSelectorContainer, modalStyle]}
-      >
-        <ColorSelector
-          currentColor={color}
-          windowWidth={this.props.windowWidth}
-          onColorSelected={this.onColorSelected}
-        />
-        <TouchableHighlight
-          onPress={this.close}
-          style={this.props.styles.closeButton}
-          underlayColor={this.props.colors.modalIosHighlightUnderlay}
-        >
-          <Icon
-            name="close"
-            size={16}
-            style={this.props.styles.closeButtonIcon}
-          />
-        </TouchableHighlight>
-      </Modal>
-    );
-  }
-
-  close = () => {
-    this.props.navigation.goBackOnce();
-  };
+function ColorSelectorModal(props: Props): React.Node {
+  const close = () => props.navigation.goBackOnce();
 
-  onColorSelected = (color: string) => {
+  const onColorSelected = (color: string) => {
     const colorEditValue = color.substr(1);
-    this.props.route.params.setColor(colorEditValue);
-    this.close();
-    this.props.dispatchActionPromise(
+    props.route.params.setColor(colorEditValue);
+    close();
+    props.dispatchActionPromise(
       changeThreadSettingsActionTypes,
-      this.editColor(colorEditValue),
+      editColor(colorEditValue),
       { customKeyName: `${changeThreadSettingsActionTypes.started}:color` },
     );
   };
 
-  async editColor(newColor: string) {
-    const threadID = this.props.route.params.threadInfo.id;
+  const editColor = async (newColor: string) => {
+    const threadID = props.route.params.threadInfo.id;
     try {
-      return await this.props.changeThreadSettings({
+      return await props.changeThreadSettings({
         threadID,
         changes: { color: newColor },
       });
@@ -106,17 +75,43 @@
       Alert.alert(
         'Unknown error',
         'Uhh... try again?',
-        [{ text: 'OK', onPress: this.onErrorAcknowledged }],
+        [{ text: 'OK', onPress: onErrorAcknowledged }],
         { cancelable: false },
       );
       throw e;
     }
-  }
+  };
 
-  onErrorAcknowledged = () => {
-    const { threadInfo, setColor } = this.props.route.params;
+  const onErrorAcknowledged = React.useMemo(() => {
+    const { threadInfo, setColor } = props.route.params;
     setColor(threadInfo.color);
-  };
+  }, [props.route.params]);
+
+  const { color } = props.route.params;
+  // Based on the assumption we are always in portrait,
+  // and consequently width is the lowest dimensions
+  const modalStyle = React.useMemo(() => {
+    return [
+      props.styles.colorSelectorContainer,
+      { height: 0.75 * props.windowWidth },
+    ];
+  }, [props.styles.colorSelectorContainer, props.windowWidth]);
+  return (
+    <Modal modalStyle={modalStyle}>
+      <ColorSelector
+        currentColor={color}
+        windowWidth={props.windowWidth}
+        onColorSelected={onColorSelected}
+      />
+      <TouchableHighlight
+        onPress={close}
+        style={props.styles.closeButton}
+        underlayColor={props.colors.modalIosHighlightUnderlay}
+      >
+        <Icon name="close" size={16} style={props.styles.closeButtonIcon} />
+      </TouchableHighlight>
+    </Modal>
+  );
 }
 
 const unboundStyles = {