diff --git a/native/components/status-indicator.react.js b/native/components/status-indicator.react.js
new file mode 100644
index 000000000..08e03f17e
--- /dev/null
+++ b/native/components/status-indicator.react.js
@@ -0,0 +1,81 @@
+// @flow
+
+import * as React from 'react';
+import { View } from 'react-native';
+
+import type { ConnectionInfo } from 'lib/types/socket-types.js';
+
+import { useStyles } from '../themes/colors.js';
+
+type Props = {
+  +connectionInfo: ConnectionInfo,
+};
+
+function StatusIndicator(props: Props): React.Node {
+  const { connectionInfo } = props;
+
+  const styles = useStyles(unboundStyles);
+
+  const isConnected = connectionInfo.status === 'connected';
+
+  const { connectionIndicatorOuterStyle, connectionIndicatorInnerStyle } =
+    React.useMemo(() => {
+      const outerStyle = isConnected
+        ? styles.onlineIndicatorOuter
+        : styles.offlineIndicatorOuter;
+
+      const innerStyle = isConnected
+        ? styles.onlineIndicatorInner
+        : styles.offlineIndicatorInner;
+
+      return {
+        connectionIndicatorOuterStyle: outerStyle,
+        connectionIndicatorInnerStyle: innerStyle,
+      };
+    }, [
+      isConnected,
+      styles.offlineIndicatorInner,
+      styles.offlineIndicatorOuter,
+      styles.onlineIndicatorInner,
+      styles.onlineIndicatorOuter,
+    ]);
+
+  return (
+    <View style={connectionIndicatorOuterStyle}>
+      <View style={connectionIndicatorInnerStyle} />
+    </View>
+  );
+}
+
+const unboundStyles = {
+  onlineIndicatorOuter: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: 'greenIndicatorOuter',
+    width: 18,
+    height: 18,
+    borderRadius: 9,
+  },
+  onlineIndicatorInner: {
+    backgroundColor: 'greenIndicatorInner',
+    width: 9,
+    height: 9,
+    borderRadius: 4.5,
+  },
+  offlineIndicatorOuter: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: 'redIndicatorOuter',
+    width: 18,
+    height: 18,
+    borderRadius: 9,
+  },
+  offlineIndicatorInner: {
+    backgroundColor: 'redIndicatorInner',
+    width: 9,
+    height: 9,
+    borderRadius: 4.5,
+  },
+};
+
+export default StatusIndicator;
diff --git a/native/profile/keyserver-selection-list-item.react.js b/native/profile/keyserver-selection-list-item.react.js
index 844ef9066..e2c34d9c1 100644
--- a/native/profile/keyserver-selection-list-item.react.js
+++ b/native/profile/keyserver-selection-list-item.react.js
@@ -1,122 +1,68 @@
 // @flow
 
 import * as React from 'react';
 import { View } from 'react-native';
 
 import type { KeyserverInfo } from 'lib/types/keyserver-types.js';
 
 import CommIcon from '../components/comm-icon.react.js';
 import Pill from '../components/pill.react.js';
+import StatusIndicator from '../components/status-indicator.react.js';
 import { useStyles, useColors } from '../themes/colors.js';
 
 type Props = {
   +keyserverAdminUsername: string,
   +keyserverInfo: KeyserverInfo,
 };
 
 function KeyserverSelectionListItem(props: Props): React.Node {
   const { keyserverAdminUsername, keyserverInfo } = props;
 
   const styles = useStyles(unboundStyles);
   const colors = useColors();
 
   const cloudIcon = React.useMemo(
     () => (
       <CommIcon
         name="cloud-filled"
         size={12}
         color={colors.panelForegroundLabel}
       />
     ),
     [colors.panelForegroundLabel],
   );
 
-  const isConnected = keyserverInfo.connection.status === 'connected';
-
-  const { connectionIndicatorOuterStyle, connectionIndicatorInnerStyle } =
-    React.useMemo(() => {
-      const outerStyle = isConnected
-        ? styles.onlineIndicatorOuter
-        : styles.offlineIndicatorOuter;
-
-      const innerStyle = isConnected
-        ? styles.onlineIndicatorInner
-        : styles.offlineIndicatorInner;
-
-      return {
-        connectionIndicatorOuterStyle: outerStyle,
-        connectionIndicatorInnerStyle: innerStyle,
-      };
-    }, [
-      isConnected,
-      styles.offlineIndicatorInner,
-      styles.offlineIndicatorOuter,
-      styles.onlineIndicatorInner,
-      styles.onlineIndicatorOuter,
-    ]);
-
   const keyserverListItem = React.useMemo(
     () => (
       <View style={styles.keyserverListItemContainer}>
         <Pill
           label={keyserverAdminUsername}
           backgroundColor={colors.codeBackground}
           icon={cloudIcon}
         />
-        <View style={connectionIndicatorOuterStyle}>
-          <View style={connectionIndicatorInnerStyle} />
-        </View>
+        <StatusIndicator connectionInfo={keyserverInfo.connection} />
       </View>
     ),
     [
       cloudIcon,
       colors.codeBackground,
-      connectionIndicatorInnerStyle,
-      connectionIndicatorOuterStyle,
       keyserverAdminUsername,
+      keyserverInfo.connection,
       styles.keyserverListItemContainer,
     ],
   );
 
   return keyserverListItem;
 }
 
 const unboundStyles = {
   keyserverListItemContainer: {
     flexDirection: 'row',
     justifyContent: 'space-between',
     alignItems: 'center',
     paddingHorizontal: 24,
     paddingVertical: 10,
   },
-  onlineIndicatorOuter: {
-    justifyContent: 'center',
-    alignItems: 'center',
-    backgroundColor: 'greenIndicatorOuter',
-    width: 18,
-    height: 18,
-    borderRadius: 9,
-  },
-  onlineIndicatorInner: {
-    backgroundColor: 'greenIndicatorInner',
-    width: 9,
-    height: 9,
-    borderRadius: 4.5,
-  },
-  offlineIndicatorOuter: {
-    justifyContent: 'center',
-    alignItems: 'center',
-    backgroundColor: 'redIndicatorOuter',
-    width: 18,
-    height: 18,
-    borderRadius: 9,
-  },
-  offlineIndicatorInner: {
-    backgroundColor: 'redIndicatorInner',
-    width: 9,
-    height: 9,
-    borderRadius: 4.5,
-  },
 };
 
 export default KeyserverSelectionListItem;