diff --git a/native/chat/timestamp.react.js b/native/chat/timestamp.react.js index 1307bfba4..0e07dd7f0 100644 --- a/native/chat/timestamp.react.js +++ b/native/chat/timestamp.react.js @@ -1,42 +1,56 @@ // @flow import * as React from 'react'; import { longAbsoluteDate } from 'lib/utils/date-utils.js'; import { SingleLine } from '../components/single-line.react.js'; import { useStyles } from '../themes/colors.js'; export type DisplayType = 'lowContrast' | 'modal'; type Props = { +time: number, +display: DisplayType, }; function Timestamp(props: Props): React.Node { const styles = useStyles(unboundStyles); - const style = [styles.timestamp]; - if (props.display === 'modal') { - style.push(styles.modal); - } - return {longAbsoluteDate(props.time)}; + const style = React.useMemo( + () => + props.display === 'modal' + ? [styles.timestamp, styles.modal] + : [styles.timestamp], + [props.display, styles.modal, styles.timestamp], + ); + + const absoluteDate = React.useMemo( + () => longAbsoluteDate(props.time), + [props.time], + ); + + const timestamp = React.useMemo( + () => {absoluteDate}, + [absoluteDate, style], + ); + + return timestamp; } const timestampHeight = 26; const unboundStyles = { modal: { // high contrast framed against OverlayNavigator-dimmed background color: 'white', }, timestamp: { alignSelf: 'center', bottom: 0, color: 'listBackgroundTernaryLabel', fontSize: 14, height: timestampHeight, paddingVertical: 3, }, }; export { Timestamp, timestampHeight };