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
@@ -1,19 +1,51 @@
 // @flow
 
 import * as React from 'react';
-import { View, StyleSheet } from 'react-native';
+import { TouchableOpacity, StyleSheet } from 'react-native';
+import Icon from 'react-native-vector-icons/Ionicons';
+import tinycolor from 'tinycolor2';
 
 type ColorSelectorButtonProps = {
-  color: string,
+  +color: string,
+  +currentColor: string,
 };
 
 function ColorSelectorButton(props: ColorSelectorButtonProps): React.Node {
-  const { color } = props;
-  const buttonStyle = React.useMemo(
-    () => [styles.button, { backgroundColor: color }],
-    [color],
+  const { color, currentColor } = props;
+
+  const isSelected = tinycolor.equals(currentColor, color);
+
+  const selectedButtonStyle = React.useMemo(() => {
+    if (isSelected) {
+      return {
+        alignItems: 'center',
+        justifyContent: 'center',
+        shadowColor: `#${color}`,
+        shadowOpacity: 1,
+        shadowRadius: 20,
+      };
+    }
+  }, [color, isSelected]);
+
+  const colorSplotchStyle = React.useMemo(() => {
+    return [
+      styles.button,
+      { backgroundColor: `#${color}` },
+      selectedButtonStyle,
+    ];
+  }, [color, selectedButtonStyle]);
+
+  const selectedButtonContent = React.useMemo(() => {
+    if (isSelected) {
+      return <Icon name="ios-checkmark" size={36} color="white" />;
+    }
+  }, [isSelected]);
+
+  return (
+    <TouchableOpacity style={colorSplotchStyle}>
+      {selectedButtonContent}
+    </TouchableOpacity>
   );
-  return <View style={buttonStyle} />;
 }
 
 const styles = StyleSheet.create({
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
@@ -3,26 +3,31 @@
 import * as React from 'react';
 import { Text, View, StyleSheet } from 'react-native';
 
+import { selectedThreadColors } from 'lib/shared/thread-utils';
+
 import ColorSelectorButton from './color-selector-button.react';
 
-function ColorSelector(): React.Node {
+type ColorSelectorProps = {
+  +currentColor: string,
+};
+
+function ColorSelector(props: ColorSelectorProps): React.Node {
+  const { currentColor } = props;
+
+  const colorSelectorButtons = selectedThreadColors.map(color => (
+    <ColorSelectorButton
+      key={color}
+      color={color}
+      currentColor={currentColor}
+    />
+  ));
+
   return (
     <View style={styles.container}>
       <View style={styles.textContainer}>
         <Text style={styles.text}>Select thread color</Text>
       </View>
-      <View style={styles.colorButtons}>
-        <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 style={styles.colorButtons}>{colorSelectorButtons}</View>
     </View>
   );
 }