diff --git a/native/components/color-selector-button.react.js b/native/components/color-selector-button.react.js
--- a/native/components/color-selector-button.react.js
+++ b/native/components/color-selector-button.react.js
@@ -9,10 +9,11 @@
 
 function ColorSelectorButton(props: ColorSelectorButtonProps): React.Node {
   const { color } = props;
-  const buttonBackgroundColor = React.useMemo(() => {
-    return { backgroundColor: color };
-  }, [color]);
-  return <View style={[styles.button, buttonBackgroundColor]} />;
+  const buttonStyle = React.useMemo(
+    () => [styles.button, { backgroundColor: color }],
+    [color],
+  );
+  return <View style={buttonStyle} />;
 }
 
 const styles = StyleSheet.create({
diff --git a/native/components/color-selector.react.js b/native/components/color-selector.react.js
new file mode 100644
--- /dev/null
+++ b/native/components/color-selector.react.js
@@ -0,0 +1,57 @@
+// @flow
+
+import * as React from 'react';
+import { Text, View, StyleSheet } from 'react-native';
+
+import ColorSelectorButton from './color-selector-button.react';
+
+function ColorSelector(): React.Node {
+  return (
+    <View style={styles.container}>
+      <View style={styles.textContainer}>
+        <Text style={styles.text}>Select thread color</Text>
+      </View>
+      <View style={styles.colors}>
+        <ColorSelectorButton color="#4B87AA" />
+        <ColorSelectorButton color="#5C9F5F" />
+        <ColorSelectorButton color="#B8753D" />
+        <ColorSelectorButton color="#AA4B4B" />
+        <ColorSelectorButton color="#6D49AB" />
+        <ColorSelectorButton color="#C85000" />
+        <ColorSelectorButton color="#008F83" />
+        <ColorSelectorButton color="#648CAA" />
+        <ColorSelectorButton color="#57697F" />
+        <ColorSelectorButton color="#575757" />
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  colors: {
+    alignItems: 'center',
+    display: 'flex',
+    flex: 1,
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    justifyContent: 'center',
+  },
+  container: {
+    alignItems: 'center',
+    display: 'flex',
+    flex: 1,
+    flexDirection: 'column',
+    flexWrap: 'wrap',
+    justifyContent: 'center',
+  },
+  text: {
+    color: 'white',
+    fontSize: 24,
+    fontWeight: 'bold',
+  },
+  textContainer: {
+    margin: 20,
+  },
+});
+
+export default ColorSelector;