stream-chat-react-native-core 5.2.0 → 5.3.0-beta.3

package/src/components/Attachment/Giphy.tsx

@@ -3,6 +3,8 @@ import { Image, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
 
 import type { Attachment } from 'stream-chat';
 
+import { ChatContextValue, useChatContext } from '../../contexts/chatContext/ChatContext';
+
 import {
   ImageGalleryContextValue,
   useImageGalleryContext,
@@ -145,6 +147,7 @@ export type GiphyPropsWithContext<
     | 'onPressIn'
     | 'preventPress'
   > &
+  Pick<ChatContextValue<StreamChatGenerics>, 'ImageComponent'> &
   Pick<
     MessagesContextValue<StreamChatGenerics>,
     | 'giphyVersion'
@@ -165,6 +168,7 @@ const GiphyWithContext = <
     attachment,
     giphyVersion,
     handleAction,
+    ImageComponent = Image,
     ImageLoadingFailedIndicator,
     ImageLoadingIndicator,
     isMyMessage,
@@ -241,7 +245,7 @@ const GiphyWithContext = <
         >{`/giphy ${title}`}</Text>
       </View>
       <View style={styles.selectionImageContainer}>
-        <Image
+        <ImageComponent
           onError={(error) => {
             console.warn(error);
             setLoadingImage(false);
@@ -339,7 +343,7 @@ const GiphyWithContext = <
           container,
         ]}
       >
-        <Image
+        <ImageComponent
           accessibilityLabel='Giphy Attachment Image'
           onError={(error) => {
             console.warn(error);
@@ -446,6 +450,7 @@ export const Giphy = <
 ) => {
   const { handleAction, isMyMessage, message, onLongPress, onPress, onPressIn, preventPress } =
     useMessageContext<StreamChatGenerics>();
+  const { ImageComponent } = useChatContext<StreamChatGenerics>();
   const { additionalTouchableProps, giphyVersion } = useMessagesContext<StreamChatGenerics>();
   const { setMessages, setSelectedMessage } = useImageGalleryContext<StreamChatGenerics>();
   const { setOverlay } = useOverlayContext();
@@ -464,6 +469,7 @@ export const Giphy = <
         additionalTouchableProps,
         giphyVersion,
         handleAction,
+        ImageComponent,
         ImageLoadingFailedIndicator,
         ImageLoadingIndicator,
         isMyMessage,

package/src/components/Avatar/Avatar.tsx

@@ -1,5 +1,13 @@
 import React from 'react';
-import { Image, ImageStyle, StyleProp, StyleSheet, View, ViewStyle } from 'react-native';
+import {
+  Image,
+  ImageProps,
+  ImageStyle,
+  StyleProp,
+  StyleSheet,
+  View,
+  ViewStyle,
+} from 'react-native';
 import Svg, { Circle, CircleProps } from 'react-native-svg';
 
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
@@ -38,6 +46,7 @@ export type AvatarProps = {
   containerStyle?: StyleProp<ViewStyle>;
   /** image url */
   image?: string;
+  ImageComponent?: React.ComponentType<ImageProps>;
   /** name of the picture, used for fallback */
   imageStyle?: StyleProp<ImageStyle>;
   name?: string;
@@ -53,6 +62,7 @@ export type AvatarProps = {
 export const Avatar: React.FC<AvatarProps> = (props) => {
   const {
     containerStyle,
+    ImageComponent = Image,
     image: imageProp,
     imageStyle,
     name,
@@ -95,7 +105,7 @@ export const Avatar: React.FC<AvatarProps> = (props) => {
             }}
           />
         ) : (
-          <Image
+          <ImageComponent
             accessibilityLabel={testID || 'Avatar Image'}
             onError={() => setLoadingImageError(true)}
             source={{

package/src/components/Avatar/GroupAvatar.tsx

@@ -1,10 +1,9 @@
 import React from 'react';
-import { Image, StyleProp, StyleSheet, View, ViewStyle } from 'react-native';
+import { Image, ImageProps, StyleProp, StyleSheet, View, ViewStyle } from 'react-native';
 
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { useLoadingImage } from '../../hooks/useLoadingImage';
 import { getResizedImageUrl } from '../../utils/getResizedImageUrl';
-
 const randomImageBaseUrl = 'https://getstream.io/random_png/';
 const randomSvgBaseUrl = 'https://getstream.io/random_svg/';
 const streamCDN = 'stream-io-cdn.com';
@@ -27,6 +26,7 @@ export type GroupAvatarProps = {
   /** total size in pixels */
   size: number;
   containerStyle?: StyleProp<ViewStyle>;
+  ImageComponent?: React.ComponentType<ImageProps>;
   /** image urls */
   images?: string[];
   /** name of the users, used for fallback */
@@ -38,7 +38,7 @@ export type GroupAvatarProps = {
  * GroupAvatar - A round group of avatar images with fallbacks to users' initials
  */
 export const GroupAvatar: React.FC<GroupAvatarProps> = (props) => {
-  const { containerStyle, images, names, size, testID } = props;
+  const { containerStyle, ImageComponent = Image, images, names, size, testID } = props;
   const {
     theme: {
       groupAvatar: { container, image },
@@ -136,7 +136,7 @@ export const GroupAvatar: React.FC<GroupAvatarProps> = (props) => {
             ]}
           >
             {column.map(({ height, name, url, width }, rowIndex) => (
-              <Image
+              <ImageComponent
                 accessibilityLabel={testID || 'Avatar Image'}
                 key={`avatar-${url}-${rowIndex}`}
                 onError={() => setLoadingImageError(true)}

package/src/components/ChannelList/ChannelList.tsx

@@ -314,12 +314,13 @@ export const ChannelList = <
     setChannels,
   });
 
-  const channelIdsStr = channels.reduce((acc, channel) => `${acc}${channel.cid}`, '');
+  const channelIdsStr = channels?.reduce((acc, channel) => `${acc}${channel.cid}`, '');
 
   useEffect(() => {
-    if (staticChannelsActive || !enableOfflineSupport) {
+    if (channels === null || staticChannelsActive || !enableOfflineSupport) {
       return;
     }
+
     upsertCidsForQuery({
       cids: channels.map((c) => c.cid),
       filters,

package/src/components/ChannelList/ChannelListMessenger.tsx

@@ -132,14 +132,14 @@ const ChannelListMessengerWithContext = <
     if (debugRef.current.setSendEventParams)
       debugRef.current.setSendEventParams({
         action: 'Channels',
-        data: channels.map((channel) => ({
+        data: channels?.map((channel) => ({
           data: channel.data,
           members: channel.state.members,
         })),
       });
   }
 
-  if (error && !refreshing && !loadingChannels && !channels?.length) {
+  if (error && !refreshing && !loadingChannels && channels === null) {
     return (
       <LoadingErrorIndicator
         error={error}
@@ -157,7 +157,7 @@ const ChannelListMessengerWithContext = <
   };
 
   const ListFooterComponent = () =>
-    channels.length && ListHeaderComponent ? <ListHeaderComponent /> : null;
+    channels?.length && ListHeaderComponent ? <ListHeaderComponent /> : null;
 
   if (loadingChannels) {
     return <LoadingIndicator listType='channel' />;

package/src/components/ChannelList/__tests__/ChannelList.test.js

@@ -43,7 +43,7 @@ const ChannelListComponent = (props) => {
   const { channels, onSelect } = useChannelsContext();
   return (
     <View testID='channel-list'>
-      {channels.map((channel) => (
+      {channels?.map((channel) => (
         <ChannelPreviewComponent
           {...props}
           channel={channel}

package/src/components/ChannelList/hooks/listeners/__tests__/useChannelUpdated.test.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { Text } from 'react-native';
+import { Image, Text } from 'react-native';
 
 import { act } from 'react-test-renderer';
 
@@ -59,6 +59,7 @@ describe('useChannelUpdated', () => {
             client: mockClient,
             connectionRecovering: false,
             enableOfflineSupport: false,
+            ImageComponent: Image,
             isOnline: true,
             mutedUsers: [],
             setActiveChannel: () => null,

package/src/components/ChannelList/hooks/useCreateChannelsContext.ts

@@ -38,7 +38,7 @@ export const useCreateChannelsContext = <
   Skeleton,
 }: ChannelsContextValue<StreamChatGenerics>) => {
   const channelValueString = channels
-    .map(
+    ?.map(
       (channel) =>
         `${channel.data?.name ?? ''}${channel.id ?? ''}${Object.values(channel.state.members)
           .map((member) => member.user?.online)

package/src/components/ChannelList/hooks/usePaginatedChannels.ts

@@ -44,11 +44,8 @@ export const usePaginatedChannels = <
   sort = {},
 }: Parameters<StreamChatGenerics>) => {
   const { client } = useChatContext<StreamChatGenerics>();
-  const initialChannelsStateRef = useRef([]);
-  const [channels, setChannels] = useState<Channel<StreamChatGenerics>[]>(
-    initialChannelsStateRef.current,
-  );
-  const [staticChannelsActive, setStaticChannelsActive] = useState<boolean>(true);
+  const [channels, setChannels] = useState<Channel<StreamChatGenerics>[] | null>(null);
+  const [staticChannelsActive, setStaticChannelsActive] = useState<boolean>(false);
   const activeChannels = useActiveChannelsRefContext();
 
   const [error, setError] = useState<Error>();
@@ -95,7 +92,8 @@ export const usePaginatedChannels = <
 
     const newOptions = {
       limit: options?.limit ?? MAX_QUERY_CHANNELS_LIMIT,
-      offset: queryType === 'loadChannels' && !staticChannelsActive ? channels.length : 0,
+      offset:
+        queryType === 'loadChannels' && !staticChannelsActive && channels ? channels.length : 0,
       ...options,
     };
 
@@ -108,7 +106,7 @@ export const usePaginatedChannels = <
         return;
       }
       const newChannels =
-        queryType === 'loadChannels' && !staticChannelsActive
+        queryType === 'loadChannels' && !staticChannelsActive && channels
           ? [...channels, ...channelQueryResponse]
           : channelQueryResponse;
 
@@ -195,6 +193,7 @@ export const usePaginatedChannels = <
                 offlineMode: true,
               }),
             );
+            setStaticChannelsActive(true);
           }
         } catch (e) {
           console.warn('Failed to get channels from database: ', e);
@@ -212,15 +211,17 @@ export const usePaginatedChannels = <
     error,
     hasNextPage,
     loadingChannels:
-      activeQueryType === 'queryLocalDB'
-        ? true
-        : activeQueryType === 'reload' && channels === initialChannelsStateRef.current,
+      activeQueryType === 'queryLocalDB' ? true : activeQueryType === 'reload' && channels === null,
     loadingNextPage: activeQueryType === 'loadChannels',
     loadNextPage,
     refreshing: activeQueryType === 'refresh',
     refreshList,
     reloadList,
-    setChannels,
+    // Although channels can be null, there is no practical case where channels will be null
+    // when setChannels is used. setChannels is only recommended to be used for overriding
+    // event handler. Thus instead of adding if check for channels === null, its better to
+    // simply reassign types here.
+    setChannels: setChannels as React.Dispatch<React.SetStateAction<Channel<StreamChatGenerics>[]>>,
     staticChannelsActive,
   };
 };

package/src/components/ChannelPreview/ChannelAvatar.tsx

@@ -4,6 +4,7 @@ import type { ChannelPreviewProps } from './ChannelPreview';
 import { useChannelPreviewDisplayAvatar } from './hooks/useChannelPreviewDisplayAvatar';
 import { useChannelPreviewDisplayPresence } from './hooks/useChannelPreviewDisplayPresence';
 
+import { ChatContextValue, useChatContext } from '../../contexts/chatContext/ChatContext';
 import type { DefaultStreamChatGenerics } from '../../types/types';
 import { Avatar } from '../Avatar/Avatar';
 import { GroupAvatar } from '../Avatar/GroupAvatar';
@@ -15,26 +16,44 @@ export type ChannelAvatarProps<
 /**
  * This UI component displays an avatar for a particular channel.
  */
-export const ChannelAvatar = <
+export const ChannelAvatarWithContext = <
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
-  props: ChannelAvatarProps<StreamChatGenerics>,
+  props: ChannelAvatarProps<StreamChatGenerics> & Pick<ChatContextValue, 'ImageComponent'>,
 ) => {
-  const { channel } = props;
+  const { channel, ImageComponent } = props;
 
   const displayAvatar = useChannelPreviewDisplayAvatar(channel);
   const displayPresence = useChannelPreviewDisplayPresence(channel);
 
   if (displayAvatar.images) {
-    return <GroupAvatar images={displayAvatar.images} names={displayAvatar.names} size={40} />;
+    return (
+      <GroupAvatar
+        ImageComponent={ImageComponent}
+        images={displayAvatar.images}
+        names={displayAvatar.names}
+        size={40}
+      />
+    );
   }
 
   return (
     <Avatar
       image={displayAvatar.image}
+      ImageComponent={ImageComponent}
       name={displayAvatar.name}
       online={displayPresence}
       size={40}
     />
   );
 };
+
+export const ChannelAvatar = <
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+>(
+  props: ChannelAvatarProps<StreamChatGenerics>,
+) => {
+  const { ImageComponent } = useChatContext<StreamChatGenerics>();
+
+  return <ChannelAvatarWithContext {...props} ImageComponent={ImageComponent} />;
+};

package/src/components/Chat/Chat.tsx

@@ -1,5 +1,5 @@
 import React, { PropsWithChildren, useEffect, useState } from 'react';
-import { Platform } from 'react-native';
+import { Image, Platform } from 'react-native';
 
 import Dayjs from 'dayjs';
 
@@ -37,100 +37,101 @@ init();
 
 export type ChatProps<
   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
-   * websocket connection. So by default, we disconnect websocket connection when
-   * app goes to background, and reconnect when app comes to foreground.
-   */
-  closeConnectionOnBackground?: boolean;
-  /**
-   * Enables offline storage and loading for chat data.
-   */
-  enableOfflineSupport?: boolean;
-  /**
-   * Instance of Streami18n class should be provided to Chat component to enable internationalization.
-   *
-   * Stream provides following list of in-built translations:
-   * 1. English (en)
-   * 2. Dutch (nl)
-   * 3. ...
-   * 4. ...
-   *
-   * Simplest way to start using chat components in one of the in-built languages would be following:
-   *
-   * ```
-   * const i18n = new Streami18n('nl');
-   * <Chat client={chatClient} i18nInstance={i18n}>
-   *  ...
-   * </Chat>
-   * ```
-   *
-   * If you would like to override certain keys in in-built translation.
-   * UI will be automatically updated in this case.
-   *
-   * ```
-   * const i18n = new Streami18n('nl');
-   *
-   * i18n.registerTranslation('nl', {
-   *  'Nothing yet...': 'Nog Niet ...',
-   *  '{{ firstUser }} and {{ secondUser }} are typing...': '{{ firstUser }} en {{ secondUser }} zijn aan het typen...',
-   * });
-   *
-   * <Chat client={chatClient} i18nInstance={i18n}>
-   *  ...
-   * </Chat>
-   * ```
-   *
-   * You can use the same function to add whole new language.
-   *
-   * ```
-   * const i18n = new Streami18n('it');
-   *
-   * i18n.registerTranslation('it', {
-   *  'Nothing yet...': 'Non ancora ...',
-   *  '{{ firstUser }} and {{ secondUser }} are typing...': '{{ firstUser }} a {{ secondUser }} stanno scrivendo...',
-   * });
-   *
-   * // Make sure to call setLanguage to reflect new language in UI.
-   * i18n.setLanguage('it');
-   * <Chat client={chatClient} i18nInstance={i18n}>
-   *  ...
-   * </Chat>
-   * ```
-   */
-  i18nInstance?: Streami18n;
-  /**
-   * You can pass the theme object to customize the styles of Chat components. You can check the default theme in [theme.ts](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/contexts/themeContext/utils/theme.ts)
-   *
-   * Please check section about [themes in cookbook](https://github.com/GetStream/stream-chat-react-native/wiki/Cookbook-v3.0#theme) for details.
-   *
-   * ```
-   * import type { DeepPartial, Theme } from 'stream-chat-react-native';
-   *
-   * const theme: DeepPartial<Theme> = {
-   *   messageSimple: {
-   *     file: {
-   *       container: {
-   *         backgroundColor: 'red',
-   *       },
-   *       icon: {
-   *         height: 16,
-   *         width: 16,
-   *       },
-   *     },
-   *   },
-   * };
-   *
-   * <Chat style={theme}>
-   * </Chat>
-   * ```
-   *
-   * @overrideType object
-   */
-  style?: DeepPartial<Theme>;
-};
+> = Pick<ChatContextValue<StreamChatGenerics>, 'client'> &
+  Partial<Pick<ChatContextValue<StreamChatGenerics>, 'ImageComponent'>> & {
+    /**
+     * When false, ws connection won't be disconnection upon backgrounding the app.
+     * To receive push notifications, its necessary that user doesn't have active
+     * websocket connection. So by default, we disconnect websocket connection when
+     * app goes to background, and reconnect when app comes to foreground.
+     */
+    closeConnectionOnBackground?: boolean;
+    /**
+     * Enables offline storage and loading for chat data.
+     */
+    enableOfflineSupport?: boolean;
+    /**
+     * Instance of Streami18n class should be provided to Chat component to enable internationalization.
+     *
+     * Stream provides following list of in-built translations:
+     * 1. English (en)
+     * 2. Dutch (nl)
+     * 3. ...
+     * 4. ...
+     *
+     * Simplest way to start using chat components in one of the in-built languages would be following:
+     *
+     * ```
+     * const i18n = new Streami18n('nl');
+     * <Chat client={chatClient} i18nInstance={i18n}>
+     *  ...
+     * </Chat>
+     * ```
+     *
+     * If you would like to override certain keys in in-built translation.
+     * UI will be automatically updated in this case.
+     *
+     * ```
+     * const i18n = new Streami18n('nl');
+     *
+     * i18n.registerTranslation('nl', {
+     *  'Nothing yet...': 'Nog Niet ...',
+     *  '{{ firstUser }} and {{ secondUser }} are typing...': '{{ firstUser }} en {{ secondUser }} zijn aan het typen...',
+     * });
+     *
+     * <Chat client={chatClient} i18nInstance={i18n}>
+     *  ...
+     * </Chat>
+     * ```
+     *
+     * You can use the same function to add whole new language.
+     *
+     * ```
+     * const i18n = new Streami18n('it');
+     *
+     * i18n.registerTranslation('it', {
+     *  'Nothing yet...': 'Non ancora ...',
+     *  '{{ firstUser }} and {{ secondUser }} are typing...': '{{ firstUser }} a {{ secondUser }} stanno scrivendo...',
+     * });
+     *
+     * // Make sure to call setLanguage to reflect new language in UI.
+     * i18n.setLanguage('it');
+     * <Chat client={chatClient} i18nInstance={i18n}>
+     *  ...
+     * </Chat>
+     * ```
+     */
+    i18nInstance?: Streami18n;
+    /**
+     * You can pass the theme object to customize the styles of Chat components. You can check the default theme in [theme.ts](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/contexts/themeContext/utils/theme.ts)
+     *
+     * Please check section about [themes in cookbook](https://github.com/GetStream/stream-chat-react-native/wiki/Cookbook-v3.0#theme) for details.
+     *
+     * ```
+     * import type { DeepPartial, Theme } from 'stream-chat-react-native';
+     *
+     * const theme: DeepPartial<Theme> = {
+     *   messageSimple: {
+     *     file: {
+     *       container: {
+     *         backgroundColor: 'red',
+     *       },
+     *       icon: {
+     *         height: 16,
+     *         width: 16,
+     *       },
+     *     },
+     *   },
+     * };
+     *
+     * <Chat style={theme}>
+     * </Chat>
+     * ```
+     *
+     * @overrideType object
+     */
+    style?: DeepPartial<Theme>;
+  };
 
 const ChatWithContext = <
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
@@ -143,6 +144,7 @@ const ChatWithContext = <
     closeConnectionOnBackground = true,
     enableOfflineSupport = false,
     i18nInstance,
+    ImageComponent = Image,
     style,
   } = props;
 
@@ -206,6 +208,7 @@ const ChatWithContext = <
     client,
     connectionRecovering,
     enableOfflineSupport,
+    ImageComponent,
     isOnline,
     mutedUsers,
     setActiveChannel,

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

@@ -11,6 +11,7 @@ export const useCreateChatContext = <
   client,
   connectionRecovering,
   enableOfflineSupport,
+  ImageComponent,
   isOnline,
   mutedUsers,
   setActiveChannel,
@@ -31,6 +32,7 @@ export const useCreateChatContext = <
       client,
       connectionRecovering,
       enableOfflineSupport,
+      ImageComponent,
       isOnline,
       mutedUsers,
       setActiveChannel,

package/src/components/ImageBackground.tsx

@@ -0,0 +1,77 @@
+import * as React from 'react';
+
+import { Image, ImageBackgroundProps, ImageProps, StyleSheet, View } from 'react-native';
+
+/**
+ * DISCLAIMER: This component has been pretty-much copied from react-native's source code
+ * https://github.com/facebook/react-native/blob/main/Libraries/Image/ImageBackground.js
+ * Few modifications have been done such as converting to functional component, removing ref related logic (since its not required).
+ * Also support for prop `ImageComponent` has been introduced to allow rendering custom
+ * component instead of `Image`.
+ *
+ *
+ * Very simple drop-in replacement for <Image> which supports nesting views.
+ *
+ * ```ReactNativeWebPlayer
+ * import React, { Component } from 'react';
+ * import { AppRegistry, View, ImageBackground, Text } from 'react-native';
+ *
+ * class DisplayAnImageBackground extends Component {
+ *   render() {
+ *     return (
+ *       <ImageBackground
+ *         style={{width: 50, height: 50}}
+ *         source={{uri: 'https://reactnative.dev/img/opengraph.png'}}
+ *       >
+ *         <Text>React</Text>
+ *       </ImageBackground>
+ *     );
+ *   }
+ * }
+ *
+ */
+
+export const ImageBackground: React.ComponentType<
+  ImageBackgroundProps & {
+    ImageComponent?: React.ComponentType<ImageProps>;
+  }
+> = (props) => {
+  const {
+    children,
+    ImageComponent = Image,
+    imageStyle,
+    importantForAccessibility,
+    style,
+    ...rest
+  } = props;
+
+  const flattenedStyle = StyleSheet.flatten(style);
+  return (
+    <View
+      accessibilityIgnoresInvertColors={true}
+      importantForAccessibility={importantForAccessibility}
+      style={style}
+    >
+      <ImageComponent
+        {...rest}
+        importantForAccessibility={importantForAccessibility}
+        style={[
+          StyleSheet.absoluteFill,
+          {
+            // Temporary Workaround:
+            // Current (imperfect yet) implementation of <Image> overwrites width and height styles
+            // (which is not quite correct), and these styles conflict with explicitly set styles
+            // of <ImageBackground> and with our internal layout model here.
+            // So, we have to proxy/reapply these styles explicitly for actual <Image> component.
+            // This workaround should be removed after implementing proper support of
+            // intrinsic content size of the <Image>.
+            height: flattenedStyle?.height,
+            width: flattenedStyle?.width,
+          },
+          imageStyle,
+        ]}
+      />
+      {children}
+    </View>
+  );
+};