diff --git a/native/components/color-rows.react.js b/native/components/color-rows.react.js
new file mode 100644
--- /dev/null
+++ b/native/components/color-rows.react.js
@@ -0,0 +1,57 @@
+// @flow
+
+import * as React from 'react';
+import { View, StyleSheet } from 'react-native';
+
+import { selectedThreadColors } from 'lib/shared/color-utils.js';
+import type { SetState } from 'lib/types/hook-types.js';
+
+import ColorSelectorButton from './color-selector-button.react.js';
+
+type Props = {
+  +pendingColor: string,
+  +setPendingColor: SetState<string>,
+};
+
+function ColorRows(props: Props): React.Node {
+  const { pendingColor, setPendingColor } = props;
+
+  const colorSelectorButtons = React.useMemo(
+    () =>
+      selectedThreadColors.map(color => (
+        <ColorSelectorButton
+          key={color}
+          color={color}
+          pendingColor={pendingColor}
+          setPendingColor={setPendingColor}
+        />
+      )),
+    [pendingColor, setPendingColor],
+  );
+
+  const firstRow = React.useMemo(
+    () => colorSelectorButtons.slice(0, colorSelectorButtons.length / 2),
+    [colorSelectorButtons],
+  );
+
+  const secondRow = React.useMemo(
+    () => colorSelectorButtons.slice(colorSelectorButtons.length / 2),
+    [colorSelectorButtons],
+  );
+
+  return (
+    <>
+      <View style={styles.colorRowContainer}>{firstRow}</View>
+      <View style={styles.colorRowContainer}>{secondRow}</View>
+    </>
+  );
+}
+
+const styles = StyleSheet.create({
+  colorRowContainer: {
+    flexDirection: 'row',
+    justifyContent: 'space-evenly',
+  },
+});
+
+export default ColorRows;
diff --git a/native/components/color-selector.react.js b/native/components/color-selector.react.js
--- a/native/components/color-selector.react.js
+++ b/native/components/color-selector.react.js
@@ -4,9 +4,7 @@
 import { Text, TouchableOpacity, View } from 'react-native';
 import tinycolor from 'tinycolor2';
 
-import { selectedThreadColors } from 'lib/shared/color-utils.js';
-
-import ColorSelectorButton from './color-selector-button.react.js';
+import ColorRows from './color-rows.react.js';
 import { useStyles } from '../themes/colors.js';
 
 type ColorSelectorProps = {
@@ -19,29 +17,6 @@
   const [pendingColor, setPendingColor] = React.useState(currentColor);
   const styles = useStyles(unboundStyles);
 
-  const colorSelectorButtons = React.useMemo(
-    () =>
-      selectedThreadColors.map(color => (
-        <ColorSelectorButton
-          key={color}
-          color={color}
-          pendingColor={pendingColor}
-          setPendingColor={setPendingColor}
-        />
-      )),
-    [pendingColor],
-  );
-
-  const firstRow = React.useMemo(
-    () => colorSelectorButtons.slice(0, colorSelectorButtons.length / 2),
-    [colorSelectorButtons],
-  );
-
-  const secondRow = React.useMemo(
-    () => colorSelectorButtons.slice(colorSelectorButtons.length / 2),
-    [colorSelectorButtons],
-  );
-
   const saveButtonDisabled = tinycolor.equals(currentColor, pendingColor);
   const saveButtonStyle = React.useMemo(
     () => [
@@ -61,8 +36,10 @@
   return (
     <View style={styles.container}>
       <Text style={styles.header}>Select chat color</Text>
-      <View style={styles.colorButtons}>{firstRow}</View>
-      <View style={styles.colorButtons}>{secondRow}</View>
+      <ColorRows
+        pendingColor={pendingColor}
+        setPendingColor={setPendingColor}
+      />
       <TouchableOpacity
         style={saveButtonStyle}
         onPress={onColorSplotchSaved}