stream-chat-react-native-core 4.0.0-beta.3 → 4.0.0-beta.7

package/src/components/Chat/Chat.tsx

@@ -18,30 +18,18 @@ import {
   TranslationProvider,
 } from '../../contexts/translationContext/TranslationContext';
 import { useStreami18n } from '../../hooks/useStreami18n';
+import init from '../../init';
 
 import { SDK } from '../../native';
-import type {
-  DefaultAttachmentType,
-  DefaultChannelType,
-  DefaultCommandType,
-  DefaultEventType,
-  DefaultMessageType,
-  DefaultReactionType,
-  DefaultUserType,
-  UnknownType,
-} from '../../types/types';
+import type { DefaultStreamChatGenerics } from '../../types/types';
 import type { Streami18n } from '../../utils/Streami18n';
 import { version } from '../../version.json';
 
+init();
+
 export type ChatProps<
-  At extends UnknownType = DefaultAttachmentType,
-  Ch extends UnknownType = DefaultChannelType,
-  Co extends string = DefaultCommandType,
-  Ev extends UnknownType = DefaultEventType,
-  Me extends UnknownType = DefaultMessageType,
-  Re extends UnknownType = DefaultReactionType,
-  Us extends UnknownType = DefaultUserType,
-> = Pick<ChatContextValue<At, Ch, Co, Ev, Me, Re, Us>, 'client'> & {
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+> = Pick<ChatContextValue<StreamChatGenerics>, 'client'> & {
   /**
    * When false, ws connection won't be disconnection upon backgrounding the app.
    * To receive push notifications, its necessary that user doesn't have active
@@ -133,19 +121,13 @@ export type ChatProps<
 };
 
 const ChatWithContext = <
-  At extends UnknownType = DefaultAttachmentType,
-  Ch extends UnknownType = DefaultChannelType,
-  Co extends string = DefaultCommandType,
-  Ev extends UnknownType = DefaultEventType,
-  Me extends UnknownType = DefaultMessageType,
-  Re extends UnknownType = DefaultReactionType,
-  Us extends UnknownType = DefaultUserType,
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
-  props: PropsWithChildren<ChatProps<At, Ch, Co, Ev, Me, Re, Us>>,
+  props: PropsWithChildren<ChatProps<StreamChatGenerics>>,
 ) => {
   const { children, client, closeConnectionOnBackground = true, i18nInstance, style } = props;
 
-  const [channel, setChannel] = useState<Channel<At, Ch, Co, Ev, Me, Re, Us>>();
+  const [channel, setChannel] = useState<Channel<StreamChatGenerics>>();
   const [translators, setTranslators] = useState<TranslationContextValue>({
     t: (key: string) => key,
     tDateTimeParser: (input?: string | number | Date) => Dayjs(input),
@@ -159,7 +141,7 @@ const ChatWithContext = <
   /**
    * Setup connection event listeners
    */
-  const { connectionRecovering, isOnline } = useIsOnline<At, Ch, Co, Ev, Me, Re, Us>(
+  const { connectionRecovering, isOnline } = useIsOnline<StreamChatGenerics>(
     client,
     closeConnectionOnBackground,
   );
@@ -167,7 +149,7 @@ const ChatWithContext = <
   /**
    * Setup muted user listener
    */
-  const mutedUsers = useMutedUsers<At, Ch, Co, Ev, Me, Re, Us>(client);
+  const mutedUsers = useMutedUsers<StreamChatGenerics>(client);
 
   useEffect(() => {
     if (client.setUserAgent) {
@@ -177,8 +159,7 @@ const ChatWithContext = <
     }
   }, []);
 
-  const setActiveChannel = (newChannel?: Channel<At, Ch, Co, Ev, Me, Re, Us>) =>
-    setChannel(newChannel);
+  const setActiveChannel = (newChannel?: Channel<StreamChatGenerics>) => setChannel(newChannel);
 
   const chatContext = useCreateChatContext({
     channel,
@@ -192,7 +173,7 @@ const ChatWithContext = <
   if (loadingTranslators) return null;
 
   return (
-    <ChatProvider<At, Ch, Co, Ev, Me, Re, Us> value={chatContext}>
+    <ChatProvider<StreamChatGenerics> value={chatContext}>
       <TranslationProvider value={translators}>
         <ThemeProvider style={style}>{children}</ThemeProvider>
       </TranslationProvider>
@@ -222,15 +203,9 @@ const ChatWithContext = <
  * - Us (UserType) - custom User object extension
  */
 export const Chat = <
-  At extends UnknownType = DefaultAttachmentType,
-  Ch extends UnknownType = DefaultChannelType,
-  Co extends string = DefaultCommandType,
-  Ev extends UnknownType = DefaultEventType,
-  Me extends UnknownType = DefaultMessageType,
-  Re extends UnknownType = DefaultReactionType,
-  Us extends UnknownType = DefaultUserType,
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
-  props: PropsWithChildren<ChatProps<At, Ch, Co, Ev, Me, Re, Us>>,
+  props: PropsWithChildren<ChatProps<StreamChatGenerics>>,
 ) => {
   const { style } = useOverlayContext();
 

package/src/components/Chat/hooks/useCreateChatContext.ts

@@ -1,25 +1,10 @@
 import { useMemo } from 'react';
 
 import type { ChatContextValue } from '../../../contexts/chatContext/ChatContext';
-import type {
-  DefaultAttachmentType,
-  DefaultChannelType,
-  DefaultCommandType,
-  DefaultEventType,
-  DefaultMessageType,
-  DefaultReactionType,
-  DefaultUserType,
-  UnknownType,
-} from '../../../types/types';
+import type { DefaultStreamChatGenerics } from '../../../types/types';
 
 export const useCreateChatContext = <
-  At extends UnknownType = DefaultAttachmentType,
-  Ch extends UnknownType = DefaultChannelType,
-  Co extends string = DefaultCommandType,
-  Ev extends UnknownType = DefaultEventType,
-  Me extends UnknownType = DefaultMessageType,
-  Re extends UnknownType = DefaultReactionType,
-  Us extends UnknownType = DefaultUserType,
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >({
   channel,
   client,
@@ -27,14 +12,14 @@ export const useCreateChatContext = <
   isOnline,
   mutedUsers,
   setActiveChannel,
-}: ChatContextValue<At, Ch, Co, Ev, Me, Re, Us>) => {
+}: ChatContextValue<StreamChatGenerics>) => {
   const channelId = channel?.id;
   const clientValues = `${client.clientID}${Object.keys(client.activeChannels).length}${
     Object.keys(client.listeners).length
   }${client.mutedChannels.length}`;
   const mutedUsersLength = mutedUsers.length;
 
-  const chatContext: ChatContextValue<At, Ch, Co, Ev, Me, Re, Us> = useMemo(
+  const chatContext: ChatContextValue<StreamChatGenerics> = useMemo(
     () => ({
       channel,
       client,

package/src/components/Chat/hooks/useIsOnline.ts

@@ -8,16 +8,7 @@ import { useAppStateListener } from '../../../hooks/useAppStateListener';
 import { useIsMountedRef } from '../../../hooks/useIsMountedRef';
 import { NetInfo } from '../../../native';
 
-import type {
-  DefaultAttachmentType,
-  DefaultChannelType,
-  DefaultCommandType,
-  DefaultEventType,
-  DefaultMessageType,
-  DefaultReactionType,
-  DefaultUserType,
-  UnknownType,
-} from '../../../types/types';
+import type { DefaultStreamChatGenerics } from '../../../types/types';
 
 /**
  * Disconnect the websocket connection when app goes to background,
@@ -26,15 +17,9 @@ import type {
  * You can't receive push notification until you have active websocket connection.
  */
 export const useIsOnline = <
-  At extends UnknownType = DefaultAttachmentType,
-  Ch extends UnknownType = DefaultChannelType,
-  Co extends string = DefaultCommandType,
-  Ev extends UnknownType = DefaultEventType,
-  Me extends UnknownType = DefaultMessageType,
-  Re extends UnknownType = DefaultReactionType,
-  Us extends UnknownType = DefaultUserType,
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
-  client: StreamChat<At, Ch, Co, Ev, Me, Re, Us>,
+  client: StreamChat<StreamChatGenerics>,
   closeConnectionOnBackground = true,
 ) => {
   const [isOnline, setIsOnline] = useState(true);
@@ -63,7 +48,7 @@ export const useIsOnline = <
   useAppStateListener(onForeground, onBackground);
 
   useEffect(() => {
-    const handleChangedEvent = (event: StreamEvent<At, Ch, Co, Ev, Me, Re, Us>) => {
+    const handleChangedEvent = (event: StreamEvent<StreamChatGenerics>) => {
       setConnectionRecovering(!event.online);
       setIsOnline(event.online || false);
     };

package/src/components/Chat/hooks/useMutedUsers.ts

@@ -2,32 +2,17 @@ import { useEffect, useState } from 'react';
 
 import type { Event, Mute, StreamChat } from 'stream-chat';
 
-import type {
-  DefaultAttachmentType,
-  DefaultChannelType,
-  DefaultCommandType,
-  DefaultEventType,
-  DefaultMessageType,
-  DefaultReactionType,
-  DefaultUserType,
-  UnknownType,
-} from '../../../types/types';
+import type { DefaultStreamChatGenerics } from '../../../types/types';
 
 export const useMutedUsers = <
-  At extends UnknownType = DefaultAttachmentType,
-  Ch extends UnknownType = DefaultChannelType,
-  Co extends string = DefaultCommandType,
-  Ev extends UnknownType = DefaultEventType,
-  Me extends UnknownType = DefaultMessageType,
-  Re extends UnknownType = DefaultReactionType,
-  Us extends UnknownType = DefaultUserType,
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
-  client: StreamChat<At, Ch, Co, Ev, Me, Re, Us>,
+  client: StreamChat<StreamChatGenerics>,
 ) => {
-  const [mutedUsers, setMutedUsers] = useState<Mute<Us>[]>(client.mutedUsers || []);
+  const [mutedUsers, setMutedUsers] = useState<Mute<StreamChatGenerics>[]>(client.mutedUsers || []);
 
   useEffect(() => {
-    const handleEvent = (event: Event<At, Ch, Co, Ev, Me, Re, Us>) => {
+    const handleEvent = (event: Event<StreamChatGenerics>) => {
       setMutedUsers((mutes) => event.me?.mutes || mutes || []);
     };
 

package/src/components/ImageGallery/ImageGallery.tsx

@@ -57,16 +57,7 @@ import { useImageGalleryContext } from '../../contexts/imageGalleryContext/Image
 import { useOverlayContext } from '../../contexts/overlayContext/OverlayContext';
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { triggerHaptic } from '../../native';
-import type {
-  DefaultAttachmentType,
-  DefaultChannelType,
-  DefaultCommandType,
-  DefaultEventType,
-  DefaultMessageType,
-  DefaultReactionType,
-  DefaultUserType,
-  UnknownType,
-} from '../../types/types';
+import type { DefaultStreamChatGenerics } from '../../types/types';
 import { getResizedImageUrl } from '../../utils/getResizedImageUrl';
 import { getUrlOfImageAttachment } from '../../utils/getUrlOfImageAttachment';
 import { vh, vw } from '../../utils/utils';
@@ -89,7 +80,9 @@ export enum IsSwiping {
   FALSE,
 }
 
-export type ImageGalleryCustomComponents<Us extends UnknownType = DefaultUserType> = {
+export type ImageGalleryCustomComponents<
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+> = {
   /**
    * Override props for following UI components, which are part of [image gallery](https://github.com/GetStream/stream-chat-react-native/wiki/Cookbook-v3.0#gallery-components).
    *
@@ -122,34 +115,29 @@ export type ImageGalleryCustomComponents<Us extends UnknownType = DefaultUserTyp
    * @overrideType object
    */
   imageGalleryCustomComponents?: {
-    footer?: ImageGalleryFooterCustomComponentProps<Us>;
-    grid?: ImageGalleryGridImageComponents<Us>;
+    footer?: ImageGalleryFooterCustomComponentProps<StreamChatGenerics>;
+    grid?: ImageGalleryGridImageComponents<StreamChatGenerics>;
     gridHandle?: ImageGalleryGridHandleCustomComponentProps;
-    header?: ImageGalleryHeaderCustomComponentProps<Us>;
+    header?: ImageGalleryHeaderCustomComponentProps<StreamChatGenerics>;
   };
 };
 
-type Props<Us extends UnknownType = DefaultUserType> = ImageGalleryCustomComponents<Us> & {
-  overlayOpacity: Animated.SharedValue<number>;
-  visible: boolean;
-  imageGalleryGridHandleHeight?: number;
-  /**
-   * This should be
-   */
-  imageGalleryGridSnapPoints?: [string | number, string | number];
-  numberOfImageGalleryGridColumns?: number;
-};
+type Props<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> =
+  ImageGalleryCustomComponents<StreamChatGenerics> & {
+    overlayOpacity: Animated.SharedValue<number>;
+    visible: boolean;
+    imageGalleryGridHandleHeight?: number;
+    /**
+     * This should be
+     */
+    imageGalleryGridSnapPoints?: [string | number, string | number];
+    numberOfImageGalleryGridColumns?: number;
+  };
 
 export const ImageGallery = <
-  At extends UnknownType = DefaultAttachmentType,
-  Ch extends UnknownType = DefaultChannelType,
-  Co extends string = DefaultCommandType,
-  Ev extends UnknownType = DefaultEventType,
-  Me extends UnknownType = DefaultMessageType,
-  Re extends UnknownType = DefaultReactionType,
-  Us extends UnknownType = DefaultUserType,
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
-  props: Props<Us>,
+  props: Props<StreamChatGenerics>,
 ) => {
   const {
     imageGalleryCustomComponents,
@@ -165,9 +153,9 @@ export const ImageGallery = <
       imageGallery: { backgroundColor },
     },
   } = useTheme();
-  const [gridPhotos, setGridPhotos] = useState<Photo<Us>[]>([]);
+  const [gridPhotos, setGridPhotos] = useState<Photo<StreamChatGenerics>[]>([]);
   const { overlay, setOverlay, translucentStatusBar } = useOverlayContext();
-  const { image, images, setImage } = useImageGalleryContext<At, Ch, Co, Ev, Me, Re, Us>();
+  const { image, images, setImage } = useImageGalleryContext<StreamChatGenerics>();
 
   /**
    * Height constants
@@ -343,7 +331,7 @@ export const ImageGallery = <
    * Photos array created from all currently available
    * photo attachments
    */
-  const photos = images.reduce((acc: Photo<Us>[], cur) => {
+  const photos = images.reduce((acc: Photo<StreamChatGenerics>[], cur) => {
     const attachmentImages =
       cur.attachments?.filter(
         (attachment) =>
@@ -373,7 +361,7 @@ export const ImageGallery = <
       };
     });
 
-    return [...acc, ...attachmentPhotos] as Photo<Us>[];
+    return [...acc, ...attachmentPhotos] as Photo<StreamChatGenerics>[];
   }, []);
 
   /**
@@ -1162,13 +1150,13 @@ export const ImageGallery = <
           </TapGestureHandler>
         </Animated.View>
       </TapGestureHandler>
-      <ImageGalleryHeader<Us>
+      <ImageGalleryHeader<StreamChatGenerics>
         opacity={headerFooterOpacity}
         photo={photos[selectedIndex]}
         visible={headerFooterVisible}
         {...imageGalleryCustomComponents?.header}
       />
-      <ImageGalleryFooter<Us>
+      <ImageGalleryFooter<StreamChatGenerics>
         opacity={headerFooterOpacity}
         openGridView={openGridView}
         photo={photos[selectedIndex]}
@@ -1227,7 +1215,9 @@ const styles = StyleSheet.create({
   },
 });
 
-export type Photo<Us extends UnknownType = DefaultUserType> = {
+export type Photo<
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+> = {
   id: string;
   uri: string;
   channelId?: string;
@@ -1235,7 +1225,7 @@ export type Photo<Us extends UnknownType = DefaultUserType> = {
   messageId?: string;
   original_height?: number;
   original_width?: number;
-  user?: UserResponse<Us> | null;
+  user?: UserResponse<StreamChatGenerics> | null;
   user_id?: string;
 };
 

package/src/components/ImageGallery/components/ImageGalleryFooter.tsx

@@ -7,7 +7,7 @@ import { useTranslationContext } from '../../../contexts/translationContext/Tran
 import { Grid as GridIconDefault, Share as ShareIconDefault } from '../../../icons';
 import { deleteFile, saveFile, shareImage } from '../../../native';
 
-import type { DefaultUserType, UnknownType } from '../../../types/types';
+import type { DefaultStreamChatGenerics } from '../../../types/types';
 import type { Photo } from '../ImageGallery';
 
 const ReanimatedSafeAreaView = Animated.createAnimatedComponent
@@ -46,7 +46,9 @@ const styles = StyleSheet.create({
   },
 });
 
-export type ImageGalleryFooterCustomComponent<Us extends UnknownType = DefaultUserType> = ({
+export type ImageGalleryFooterCustomComponent<
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+> = ({
   openGridView,
   photo,
   share,
@@ -55,28 +57,34 @@ export type ImageGalleryFooterCustomComponent<Us extends UnknownType = DefaultUs
   openGridView: () => void;
   share: () => Promise<void>;
   shareMenuOpen: boolean;
-  photo?: Photo<Us>;
+  photo?: Photo<StreamChatGenerics>;
 }) => React.ReactElement | null;
 
-export type ImageGalleryFooterCustomComponentProps<Us extends UnknownType = DefaultUserType> = {
-  centerElement?: ImageGalleryFooterCustomComponent<Us>;
+export type ImageGalleryFooterCustomComponentProps<
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+> = {
+  centerElement?: ImageGalleryFooterCustomComponent<StreamChatGenerics>;
   GridIcon?: React.ReactElement;
-  leftElement?: ImageGalleryFooterCustomComponent<Us>;
-  rightElement?: ImageGalleryFooterCustomComponent<Us>;
+  leftElement?: ImageGalleryFooterCustomComponent<StreamChatGenerics>;
+  rightElement?: ImageGalleryFooterCustomComponent<StreamChatGenerics>;
   ShareIcon?: React.ReactElement;
 };
 
-type Props<Us extends UnknownType = DefaultUserType> =
-  ImageGalleryFooterCustomComponentProps<Us> & {
+type Props<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> =
+  ImageGalleryFooterCustomComponentProps<StreamChatGenerics> & {
     opacity: Animated.SharedValue<number>;
     openGridView: () => void;
-    photo: Photo<Us>;
+    photo: Photo<StreamChatGenerics>;
     photoLength: number;
     selectedIndex: number;
     visible: Animated.SharedValue<number>;
   };
 
-export const ImageGalleryFooter = <Us extends UnknownType = DefaultUserType>(props: Props<Us>) => {
+export const ImageGalleryFooter = <
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+>(
+  props: Props<StreamChatGenerics>,
+) => {
   const {
     centerElement,
     GridIcon,

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

@@ -15,11 +15,12 @@ import { useOverlayContext } from '../../../contexts/overlayContext/OverlayConte
 import { useTheme } from '../../../contexts/themeContext/ThemeContext';
 import {
   isDayOrMoment,
+  TDateTimeParserOutput,
   useTranslationContext,
 } from '../../../contexts/translationContext/TranslationContext';
 import { Close } from '../../../icons';
 
-import type { DefaultUserType, UnknownType } from '../../../types/types';
+import type { DefaultStreamChatGenerics } from '../../../types/types';
 import type { Photo } from '../ImageGallery';
 
 const ReanimatedSafeAreaView = Animated.createAnimatedComponent
@@ -57,29 +58,37 @@ const styles = StyleSheet.create({
   },
 });
 
-export type ImageGalleryHeaderCustomComponent<Us extends UnknownType = DefaultUserType> = ({
+export type ImageGalleryHeaderCustomComponent<
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+> = ({
   hideOverlay,
   photo,
 }: {
   hideOverlay: () => void;
-  photo?: Photo<Us>;
+  photo?: Photo<StreamChatGenerics>;
 }) => React.ReactElement | null;
 
-export type ImageGalleryHeaderCustomComponentProps<Us extends UnknownType = DefaultUserType> = {
-  centerElement?: ImageGalleryHeaderCustomComponent<Us>;
+export type ImageGalleryHeaderCustomComponentProps<
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+> = {
+  centerElement?: ImageGalleryHeaderCustomComponent<StreamChatGenerics>;
   CloseIcon?: React.ReactElement;
-  leftElement?: ImageGalleryHeaderCustomComponent<Us>;
-  rightElement?: ImageGalleryHeaderCustomComponent<Us>;
+  leftElement?: ImageGalleryHeaderCustomComponent<StreamChatGenerics>;
+  rightElement?: ImageGalleryHeaderCustomComponent<StreamChatGenerics>;
 };
 
-type Props<Us extends UnknownType = DefaultUserType> =
-  ImageGalleryHeaderCustomComponentProps<Us> & {
+type Props<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> =
+  ImageGalleryHeaderCustomComponentProps<StreamChatGenerics> & {
     opacity: Animated.SharedValue<number>;
     visible: Animated.SharedValue<number>;
-    photo?: Photo<Us>;
+    photo?: Photo<StreamChatGenerics>;
   };
 
-export const ImageGalleryHeader = <Us extends UnknownType = DefaultUserType>(props: Props<Us>) => {
+export const ImageGalleryHeader = <
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+>(
+  props: Props<StreamChatGenerics>,
+) => {
   const { centerElement, CloseIcon, leftElement, opacity, photo, rightElement, visible } = props;
   const [height, setHeight] = useState(200);
   const {
@@ -104,16 +113,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,