fix: ensure fromNow exists on date before access

Author: madsroskar

package/src/components/ImageGallery/components/ImageGalleryHeader.tsx

@@ -15,6 +15,7 @@ import { useOverlayContext } from '../../../contexts/overlayContext/OverlayConte
 import { useTheme } from '../../../contexts/themeContext/ThemeContext';
 import {
   isDayOrMoment,
+  TDateTimeParserOutput,
   useTranslationContext,
 } from '../../../contexts/translationContext/TranslationContext';
 import { Close } from '../../../icons';
@@ -104,16 +105,29 @@ export const ImageGalleryHeader = <Us extends UnknownType = DefaultUserType>(pro
   const parsedDate = photo ? tDateTimeParser(photo?.created_at) : null;
 
   /**
-   * .calendar is required on moment types, but in reality it
-   * is unavailable on first render. We therefore check if it
-   * is available and call it, otherwise we call .fromNow.
+   * .calendar and .fromNow can be initialized after the first render,
+   * and attempting to access them at that time will cause an error
+   * to be thrown.
+   *
+   * This falls back to null if neither exist.
    */
-  const date =
-    parsedDate && isDayOrMoment(parsedDate)
-      ? parsedDate.calendar
-        ? parsedDate.calendar()
-        : parsedDate.fromNow()
-      : null;
+  const getDateObject = (date: TDateTimeParserOutput | null) => {
+    if (date === null || !isDayOrMoment(date)) {
+      return null;
+    }
+
+    if (date.calendar) {
+      return date.calendar();
+    }
+
+    if (date.fromNow) {
+      return date.fromNow();
+    }
+
+    return null;
+  };
+
+  const date = getDateObject(parsedDate);
 
   const headerStyle = useAnimatedStyle<ViewStyle>(() => ({
     opacity: opacity.value,

package/src/components/ImageGallery/components/__tests__/ImageGalleryHeader.test.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+
+import type Animated from 'react-native-reanimated';
+
+import { render } from '@testing-library/react-native';
+
+import { ThemeProvider } from '../../../../contexts/themeContext/ThemeContext';
+import { ImageGalleryHeader } from '../ImageGalleryHeader';
+
+it('doesnt fail if fromNow is not available on first render', () => {
+  try {
+    const { getAllByText } = render(
+      <ThemeProvider>
+        <ImageGalleryHeader
+          opacity={1 as unknown as Animated.SharedValue<number>}
+          photo={{
+            id: 'id',
+            uri: 'file:///bogus/uri/to/photo.jpg',
+          }}
+          visible={1 as unknown as Animated.SharedValue<number>}
+        />
+      </ThemeProvider>,
+    );
+
+    expect(getAllByText('Unknown User')).toBeTruthy();
+  } catch (error: unknown) {
+    if (error instanceof Error) {
+      throw new Error(`Error encountered on first render of ImageGalleryHeader: ${error.message}`);
+    }
+  }
+});

package/src/components/Message/MessageSimple/utils/renderText.tsx

@@ -252,7 +252,13 @@ export const renderText = <
   };
 
   const list: ReactNodeOutput = (node, output, state) => (
-    <ListOutput key={`list-${state.key}`} node={node} output={output} state={state} styles={styles} />
+    <ListOutput
+      key={`list-${state.key}`}
+      node={node}
+      output={output}
+      state={state}
+      styles={styles}
+    />
   );
 
   const customRules = {