diff --git a/native/components/thread-ancestors-label.react.js b/native/components/thread-ancestors-label.react.js
index 57e1a103e..598638524 100644
--- a/native/components/thread-ancestors-label.react.js
+++ b/native/components/thread-ancestors-label.react.js
@@ -1,74 +1,79 @@
// @flow
import Icon from '@expo/vector-icons/FontAwesome5.js';
import * as React from 'react';
import { Text, View } from 'react-native';
import { useAncestorThreads } from 'lib/shared/ancestor-threads.js';
import { type ThreadInfo } from 'lib/types/thread-types.js';
import { useResolvedThreadInfos } from 'lib/utils/entity-helpers.js';
import { useColors, useStyles } from '../themes/colors.js';
type Props = {
+threadInfo: ThreadInfo,
};
function ThreadAncestorsLabel(props: Props): React.Node {
const { threadInfo } = props;
const { unread } = threadInfo.currentUser;
const styles = useStyles(unboundStyles);
const colors = useColors();
const ancestorThreads = useAncestorThreads(threadInfo);
const resolvedAncestorThreads = useResolvedThreadInfos(ancestorThreads);
const chevronIcon = React.useMemo(
() => (
),
[colors.listForegroundTertiaryLabel],
);
const ancestorPath = React.useMemo(() => {
const path = [];
for (const thread of resolvedAncestorThreads) {
path.push({thread.uiName});
path.push(
${thread.id}`} style={styles.chevron}>
{chevronIcon}
,
);
}
path.pop();
return path;
}, [resolvedAncestorThreads, chevronIcon, styles.chevron]);
const ancestorPathStyle = React.useMemo(() => {
return unread ? [styles.pathText, styles.unread] : styles.pathText;
}, [styles.pathText, styles.unread, unread]);
- return (
-
- {ancestorPath}
-
+ const threadAncestorsLabel = React.useMemo(
+ () => (
+
+ {ancestorPath}
+
+ ),
+ [ancestorPath, ancestorPathStyle],
);
+
+ return threadAncestorsLabel;
}
const unboundStyles = {
pathText: {
opacity: 0.8,
fontSize: 12,
color: 'listForegroundTertiaryLabel',
},
unread: {
color: 'listForegroundLabel',
},
chevron: {
paddingHorizontal: 3,
},
};
export default ThreadAncestorsLabel;