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

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>
+  );
+};

package/src/components/Message/Message.tsx

@@ -118,7 +118,6 @@ export type MessagePropsWithContext<
   ChannelContextValue<StreamChatGenerics>,
   'channel' | 'disabled' | 'enforceUniqueReaction' | 'members'
 > &
-  Pick<ChatContextValue<StreamChatGenerics>, 'client' | 'mutedUsers'> &
   Pick<KeyboardContextValue, 'dismissKeyboard'> &
   Partial<Omit<MessageContextValue<StreamChatGenerics>, 'groupStyles' | 'message'>> &
   Pick<MessageContextValue<StreamChatGenerics>, 'groupStyles' | 'message'> &
@@ -157,6 +156,7 @@ export type MessagePropsWithContext<
   Pick<OverlayContextValue, 'setOverlay'> &
   Pick<ThreadContextValue<StreamChatGenerics>, 'openThread'> &
   Pick<TranslationContextValue, 't'> & {
+    chatContext: ChatContextValue<StreamChatGenerics>;
     messagesContext: MessagesContextValue<StreamChatGenerics>;
     /**
      * Whether or not users are able to long press messages.
@@ -218,7 +218,6 @@ const MessageWithContext = <
 
   const {
     channel,
-    client,
     disabled,
     dismissKeyboard,
     dismissKeyboardOnMessageTouch,
@@ -238,6 +237,7 @@ const MessageWithContext = <
     handleReaction: handleReactionProp,
     handleRetry,
     handleThreadReply,
+    chatContext,
     lastReceivedId,
     members,
     message,
@@ -272,7 +272,7 @@ const MessageWithContext = <
     threadList = false,
     updateMessage,
   } = props;
-
+  const { client } = chatContext;
   const {
     theme: {
       colors: { bg_gradient_start, targetedMessageBackground },
@@ -547,6 +547,7 @@ const MessageWithContext = <
 
     setData({
       alignment,
+      chatContext,
       clientId: client.userID,
       files: attachments.files,
       groupStyles,
@@ -719,23 +720,23 @@ const areEqual = <StreamChatGenerics extends DefaultStreamChatGenerics = Default
   nextProps: MessagePropsWithContext<StreamChatGenerics>,
 ) => {
   const {
+    chatContext: { mutedUsers: prevMutedUsers },
     goToMessage: prevGoToMessage,
     isAttachmentEqual,
     isTargetedMessage: prevIsTargetedMessage,
     lastReceivedId: prevLastReceivedId,
     members: prevMembers,
     message: prevMessage,
-    mutedUsers: prevMutedUsers,
     showUnreadUnderlay: prevShowUnreadUnderlay,
     t: prevT,
   } = prevProps;
   const {
+    chatContext: { mutedUsers: nextMutedUsers },
     goToMessage: nextGoToMessage,
     isTargetedMessage: nextIsTargetedMessage,
     lastReceivedId: nextLastReceivedId,
     members: nextMembers,
     message: nextMessage,
-    mutedUsers: nextMutedUsers,
     showUnreadUnderlay: nextShowUnreadUnderlay,
     t: nextT,
   } = nextProps;
@@ -857,7 +858,7 @@ export const Message = <
 ) => {
   const { channel, disabled, enforceUniqueReaction, members } =
     useChannelContext<StreamChatGenerics>();
-  const { client, mutedUsers } = useChatContext<StreamChatGenerics>();
+  const chatContext = useChatContext<StreamChatGenerics>();
   const { dismissKeyboard } = useKeyboardContext();
   const { setData } = useMessageOverlayContext<StreamChatGenerics>();
   const messagesContext = useMessagesContext<StreamChatGenerics>();
@@ -870,13 +871,12 @@ export const Message = <
       {...messagesContext}
       {...{
         channel,
-        client,
+        chatContext,
         disabled,
         dismissKeyboard,
         enforceUniqueReaction,
         members,
         messagesContext,
-        mutedUsers,
         openThread,
         setData,
         setOverlay,

package/src/components/Message/MessageSimple/MessageAvatar.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { View } from 'react-native';
 
+import { ChatContextValue, useChatContext } from '../../../contexts/chatContext/ChatContext';
 import {
   MessageContextValue,
   useMessageContext,
@@ -16,6 +17,7 @@ export type MessageAvatarPropsWithContext<
   MessageContextValue<StreamChatGenerics>,
   'alignment' | 'lastGroupMessage' | 'message' | 'showAvatar'
 > &
+  Pick<ChatContextValue<StreamChatGenerics>, 'ImageComponent'> &
   Partial<Pick<AvatarProps, 'size'>>;
 
 const MessageAvatarWithContext = <
@@ -23,7 +25,7 @@ const MessageAvatarWithContext = <
 >(
   props: MessageAvatarPropsWithContext<StreamChatGenerics>,
 ) => {
-  const { alignment, lastGroupMessage, message, showAvatar, size } = props;
+  const { alignment, ImageComponent, lastGroupMessage, message, showAvatar, size } = props;
   const {
     theme: {
       avatar: { BASE_AVATAR_SIZE },
@@ -43,6 +45,7 @@ const MessageAvatarWithContext = <
       {visible ? (
         <Avatar
           image={message.user?.image}
+          ImageComponent={ImageComponent}
           name={message.user?.name || message.user?.id}
           size={size || BASE_AVATAR_SIZE}
         />
@@ -88,11 +91,12 @@ export const MessageAvatar = <
 ) => {
   const { alignment, lastGroupMessage, message, showAvatar } =
     useMessageContext<StreamChatGenerics>();
-
+  const { ImageComponent } = useChatContext<StreamChatGenerics>();
   return (
     <MemoizedMessageAvatar
       {...{
         alignment,
+        ImageComponent,
         lastGroupMessage,
         message,
         showAvatar,

package/src/components/Message/MessageSimple/MessageRepliesAvatars.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { StyleSheet, View } from 'react-native';
 
+import { ChatContextValue, useChatContext } from '../../../contexts/chatContext/ChatContext';
 import type { MessageContextValue } from '../../../contexts/messageContext/MessageContext';
 import { useTheme } from '../../../contexts/themeContext/ThemeContext';
 
@@ -23,12 +24,12 @@ export type MessageRepliesAvatarsProps<
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > = Pick<MessageContextValue<StreamChatGenerics>, 'alignment' | 'message'>;
 
-export const MessageRepliesAvatars = <
+export const MessageRepliesAvatarsWithContext = <
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
-  props: MessageRepliesAvatarsProps<StreamChatGenerics>,
+  props: MessageRepliesAvatarsProps<StreamChatGenerics> & Pick<ChatContextValue, 'ImageComponent'>,
 ) => {
-  const { alignment, message } = props;
+  const { alignment, ImageComponent, message } = props;
 
   const {
     theme: {
@@ -77,6 +78,7 @@ export const MessageRepliesAvatars = <
               avatar,
             ]}
             image={user.image}
+            ImageComponent={ImageComponent}
             name={user.name}
             size={avatarSize ? avatarSize : i === 1 ? 18 : 16}
           />
@@ -85,3 +87,13 @@ export const MessageRepliesAvatars = <
     </View>
   );
 };
+
+export const MessageRepliesAvatars = <
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+>(
+  props: MessageRepliesAvatarsProps<StreamChatGenerics>,
+) => {
+  const { ImageComponent } = useChatContext();
+
+  return <MessageRepliesAvatarsWithContext {...props} ImageComponent={ImageComponent} />;
+};