diff --git a/native/components/thread-ancestors.react.js b/native/components/thread-ancestors.react.js
--- a/native/components/thread-ancestors.react.js
+++ b/native/components/thread-ancestors.react.js
@@ -9,7 +9,7 @@
 
 import { useNavigateToThread } from '../chat/message-list-types';
 import { useSelector } from '../redux/redux-utils';
-import { useStyles } from '../themes/colors';
+import { useColors, useStyles } from '../themes/colors';
 import Button from './button.react';
 import CommunityPill from './community-pill.react';
 import ThreadPill from './thread-pill.react';
@@ -21,11 +21,24 @@
 function ThreadAncestors(props: Props): React.Node {
   const { threadInfo } = props;
   const styles = useStyles(unboundStyles);
+  const colors = useColors();
 
   const ancestorThreads: $ReadOnlyArray<ThreadInfo> = useSelector(
     ancestorThreadInfos(threadInfo.id),
   );
 
+  const rightArrow = React.useMemo(
+    () => (
+      <Icon
+        name="chevron-right"
+        size={12}
+        color={colors.panelForegroundLabel}
+        style={unboundStyles.arrowIcon}
+      />
+    ),
+    [colors.panelForegroundLabel],
+  );
+
   const navigateToThread = useNavigateToThread();
   const pathElements = React.useMemo(() => {
     const elements = [];
@@ -50,7 +63,13 @@
       );
     }
     return <View style={styles.pathItem}>{elements}</View>;
-  }, [ancestorThreads, navigateToThread, styles.pathItem, styles.row]);
+  }, [
+    ancestorThreads,
+    navigateToThread,
+    rightArrow,
+    styles.pathItem,
+    styles.row,
+  ]);
 
   return (
     <View style={styles.container}>
@@ -89,13 +108,4 @@
   },
 };
 
-const rightArrow: React.Node = (
-  <Icon
-    name="chevron-right"
-    size={12}
-    color="white"
-    style={unboundStyles.arrowIcon}
-  />
-);
-
 export default ThreadAncestors;