stream-chat-react-native-core 5.39.5 → 5.40.0-rc.2

package/src/contexts/themeContext/utils/theme.ts

@@ -4,6 +4,7 @@ import type { CircleProps, StopProps } from 'react-native-svg';
 import type { IconProps } from '../../../icons/utils/base';
 
 export const DEFAULT_STATUS_ICON_SIZE = 16;
+export const BASE_AVATAR_SIZE = 32;
 
 export const Colors = {
   accent_blue: '#005FFF',
@@ -20,6 +21,7 @@ export const Colors = {
   grey_whisper: '#ECEBEB',
   icon_background: '#FFFFFF',
   label_bg_transparent: '#00000033', // 33 = 20% opacity
+  light_blue: '#E0F0FF',
   light_gray: '#DBDDE1',
   modal_shadow: '#00000099', // 99 = 60% opacity; x=0, y= 1, radius=4
   overlay: '#000000CC', // CC = 80% opacity
@@ -208,7 +210,6 @@ export type Theme = {
       centerContainer: ViewStyle;
       container: ViewStyle;
       dateText: TextStyle;
-      innerContainer: ViewStyle;
       leftContainer: ViewStyle;
       rightContainer: ViewStyle;
       usernameText: TextStyle;
@@ -240,6 +241,7 @@ export type Theme = {
     container: ViewStyle;
     loadingText: TextStyle;
   };
+
   messageInput: {
     attachButton: ViewStyle;
     attachButtonContainer: ViewStyle;
@@ -408,6 +410,42 @@ export type Theme = {
     };
     typingIndicatorContainer: ViewStyle;
   };
+  messageMenu: {
+    actionList: {
+      container: ViewStyle;
+    };
+    actionListItem: {
+      container: ViewStyle;
+      icon: ViewStyle;
+      title: TextStyle;
+    };
+    reactionButton: {
+      filledColor: ColorValue;
+      unfilledColor: ColorValue;
+    };
+    reactionPicker: {
+      buttonContainer: ViewStyle;
+      container: ViewStyle;
+      contentContainer: ViewStyle;
+      reactionIconSize: number;
+    };
+    userReactions: {
+      avatarContainer: ViewStyle;
+      avatarName: TextStyle;
+      avatarSize: number;
+      container: ViewStyle;
+      contentContainer: ViewStyle;
+      flatlistColumnContainer: ViewStyle;
+      flatlistContainer: ViewStyle;
+      radius: number;
+      reactionBubble: ViewStyle;
+      reactionBubbleBackground: ViewStyle;
+      reactionBubbleBorderRadius: number;
+      reactionSelectorContainer: ViewStyle;
+      reactionsText: TextStyle;
+      title: TextStyle;
+    };
+  };
   messageSimple: {
     actions: {
       button: ViewStyle & {
@@ -483,6 +521,7 @@ export type Theme = {
       senderMessageBackgroundColor?: ColorValue;
       timestampText?: TextStyle;
     };
+    contentWrapper: ViewStyle;
     file: {
       container: ViewStyle;
       details: ViewStyle;
@@ -531,6 +570,7 @@ export type Theme = {
       shuffle: TextStyle;
       title: TextStyle;
     };
+    headerWrapper: ViewStyle;
     lastMessageContainer: ViewStyle;
     loadingIndicator: {
       container: ViewStyle;
@@ -542,16 +582,28 @@ export type Theme = {
       container: ViewStyle;
       label: TextStyle;
     };
-    reactionList: {
+    reactionListBottom: {
+      contentContainer: ViewStyle;
+      item: {
+        container: ViewStyle;
+        countText: TextStyle;
+        icon: ViewStyle;
+        iconFillColor: ColorValue;
+        iconSize: number;
+        iconUnFillColor: ColorValue;
+      };
+    };
+    reactionListTop: {
       container: ViewStyle;
-      iconFillColor: ColorValue;
-      middleIcon: ViewStyle;
-      radius: number;
-      reactionBubble: ViewStyle;
-      reactionContainer: ViewStyle;
-      reactionCount: TextStyle;
-      reactionSize: number;
-      strokeSize: number;
+      item: {
+        container: ViewStyle;
+        icon: ViewStyle;
+        iconFillColor: ColorValue;
+        iconSize: number;
+        iconUnFillColor: ColorValue;
+        reactionSize: number;
+      };
+      position: number;
     };
     replies: {
       avatar: ViewStyle;
@@ -573,46 +625,12 @@ export type Theme = {
       timeIcon: IconProps;
     };
     targetedMessageContainer: ViewStyle;
-    targetedMessageUnderlay: ViewStyle;
     videoThumbnail: {
       container: ViewStyle;
       roundedView: ViewStyle;
     };
     unreadUnderlayColor?: ColorValue;
   };
-  overlay: {
-    container: ViewStyle;
-    messageActions: {
-      actionContainer: ViewStyle;
-      icon: ViewStyle;
-      title: TextStyle;
-    };
-    messageActionsList: {
-      container: ViewStyle;
-    };
-    padding: number;
-    reactions: {
-      avatarContainer: ViewStyle;
-      avatarName: TextStyle;
-      avatarSize: number;
-      container: ViewStyle;
-      flatListContainer: ViewStyle;
-      radius: number;
-      reactionBubble: ViewStyle;
-      reactionBubbleBackground: ViewStyle;
-      reactionBubbleBorderRadius: number;
-      title: TextStyle;
-    };
-    reactionsList: {
-      radius: number;
-      reaction: ViewStyle;
-      reactionList: ViewStyle;
-      reactionListBorderRadius: number;
-      reactionSize: number;
-      selectedIcon: IconProps;
-      unSelectedIcon: IconProps;
-    };
-  };
   progressControl: {
     container: ViewStyle;
     filledColor: ColorValue;
@@ -700,7 +718,7 @@ export const defaultTheme: Theme = {
     speedChangeButtonText: {},
   },
   avatar: {
-    BASE_AVATAR_SIZE: 32,
+    BASE_AVATAR_SIZE,
     container: {},
     image: {
       borderRadius: 16,
@@ -821,7 +839,6 @@ export const defaultTheme: Theme = {
       centerContainer: {},
       container: {},
       dateText: {},
-      innerContainer: {},
       leftContainer: {},
       rightContainer: {},
       usernameText: {},
@@ -1004,6 +1021,42 @@ export const defaultTheme: Theme = {
     },
     typingIndicatorContainer: {},
   },
+  messageMenu: {
+    actionList: {
+      container: {},
+    },
+    actionListItem: {
+      container: {},
+      icon: {},
+      title: {},
+    },
+    reactionButton: {
+      filledColor: Colors.accent_blue,
+      unfilledColor: Colors.grey,
+    },
+    reactionPicker: {
+      buttonContainer: {},
+      container: {},
+      contentContainer: {},
+      reactionIconSize: 24,
+    },
+    userReactions: {
+      avatarContainer: {},
+      avatarName: {},
+      avatarSize: 64,
+      container: {},
+      contentContainer: {},
+      flatlistColumnContainer: {},
+      flatlistContainer: {},
+      radius: 2,
+      reactionBubble: {},
+      reactionBubbleBackground: {},
+      reactionBubbleBorderRadius: 24,
+      reactionSelectorContainer: {},
+      reactionsText: {},
+      title: {},
+    },
+  },
   messageSimple: {
     actions: {
       button: {},
@@ -1019,8 +1072,8 @@ export const defaultTheme: Theme = {
         marginLeft: 8,
       },
       spacer: {
-        height: 28,
-        width: 32, // same as BASE_AVATAR_SIZE
+        height: BASE_AVATAR_SIZE,
+        width: BASE_AVATAR_SIZE, // same as BASE_AVATAR_SIZE
       },
     },
     card: {
@@ -1099,16 +1152,17 @@ export const defaultTheme: Theme = {
       metaText: {
         fontSize: 12,
       },
-      receiverMessageBackgroundColor: Colors.white,
+      receiverMessageBackgroundColor: Colors.grey_gainsboro,
       replyBorder: {},
       replyContainer: {},
-      senderMessageBackgroundColor: Colors.grey_gainsboro,
+      senderMessageBackgroundColor: Colors.light_blue,
       textContainer: {
         onlyEmojiMarkdown: { text: { fontSize: 50 } },
       },
       timestampText: {},
       wrapper: {},
     },
+    contentWrapper: {},
     file: {
       container: {},
       details: {},
@@ -1152,6 +1206,7 @@ export const defaultTheme: Theme = {
       shuffle: {},
       title: {},
     },
+    headerWrapper: {},
     lastMessageContainer: {},
     loadingIndicator: {
       container: {},
@@ -1163,16 +1218,28 @@ export const defaultTheme: Theme = {
       container: {},
       label: {},
     },
-    reactionList: {
+    reactionListBottom: {
+      contentContainer: {},
+      item: {
+        container: {},
+        countText: {},
+        icon: {},
+        iconFillColor: Colors.accent_blue,
+        iconSize: 16,
+        iconUnFillColor: Colors.grey,
+      },
+    },
+    reactionListTop: {
       container: {},
-      iconFillColor: '',
-      middleIcon: {},
-      radius: 2, // not recommended to change this
-      reactionBubble: {},
-      reactionContainer: {},
-      reactionCount: {},
-      reactionSize: 24,
-      strokeSize: 1, // not recommended to change this
+      item: {
+        container: {},
+        icon: {},
+        iconFillColor: Colors.accent_blue,
+        iconSize: 24,
+        iconUnFillColor: Colors.grey,
+        reactionSize: 24,
+      },
+      position: 16,
     },
     replies: {
       avatar: {},
@@ -1202,46 +1269,12 @@ export const defaultTheme: Theme = {
       },
     },
     targetedMessageContainer: {},
-    targetedMessageUnderlay: {},
     unreadUnderlayColor: Colors.bg_gradient_start,
     videoThumbnail: {
       container: {},
       roundedView: {},
     },
   },
-  overlay: {
-    container: {},
-    messageActions: {
-      actionContainer: {},
-      icon: {},
-      title: {},
-    },
-    messageActionsList: {
-      container: {},
-    },
-    padding: 8,
-    reactions: {
-      avatarContainer: {},
-      avatarName: {},
-      avatarSize: 64,
-      container: {},
-      flatListContainer: {},
-      radius: 2,
-      reactionBubble: {},
-      reactionBubbleBackground: {},
-      reactionBubbleBorderRadius: 24,
-      title: {},
-    },
-    reactionsList: {
-      radius: 2.5,
-      reaction: {},
-      reactionList: {},
-      reactionListBorderRadius: 24,
-      reactionSize: 24,
-      selectedIcon: {},
-      unSelectedIcon: {},
-    },
-  },
   progressControl: {
     container: {},
     filledColor: '',

package/src/contexts/threadContext/ThreadContext.tsx

@@ -3,10 +3,9 @@ import React, { PropsWithChildren, useContext } from 'react';
 import { ChannelState, Thread } from 'stream-chat';
 
 import type { MessageType } from '../../components/MessageList/hooks/useMessageList';
-import type { DefaultStreamChatGenerics, UnknownType } from '../../types/types';
+import type { DefaultStreamChatGenerics } from '../../types/types';
 import { DEFAULT_BASE_CONTEXT_VALUE } from '../utils/defaultBaseContextValue';
 
-import { getDisplayName } from '../utils/getDisplayName';
 import { isTestEnvironment } from '../utils/isTestEnvironment';
 
 export type ThreadType<
@@ -65,29 +64,3 @@ export const useThreadContext = <
 
   return contextValue;
 };
-
-/**
- * @deprecated
- *
- * This will be removed in the next major version.
- *
- * Typescript currently does not support partial inference so if ChatContext
- * typing is desired while using the HOC withThreadContext the Props for the
- * wrapped component must be provided as the first generic.
- */
-export const withThreadContext = <
-  P extends UnknownType,
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
->(
-  Component: React.ComponentType<P>,
-): React.ComponentType<Omit<P, keyof ThreadContextValue<StreamChatGenerics>>> => {
-  const WithThreadContextComponent = (
-    props: Omit<P, keyof ThreadContextValue<StreamChatGenerics>>,
-  ) => {
-    const threadContext = useThreadContext<StreamChatGenerics>();
-
-    return <Component {...(props as P)} {...threadContext} />;
-  };
-  WithThreadContextComponent.displayName = `WithThreadContext${getDisplayName(Component)}`;
-  return WithThreadContextComponent;
-};

package/src/contexts/translationContext/TranslationContext.tsx

@@ -7,8 +7,6 @@ import type { Moment } from 'moment-timezone';
 
 import type { TranslationLanguages } from 'stream-chat';
 
-import type { DefaultStreamChatGenerics } from '../../types/types';
-import { getDisplayName } from '../utils/getDisplayName';
 import { isTestEnvironment } from '../utils/isTestEnvironment';
 
 export const DEFAULT_USER_LANGUAGE: TranslationLanguages = 'en';
@@ -60,30 +58,3 @@ export const useTranslationContext = () => {
 
   return contextValue;
 };
-
-/**
- * @deprecated
- *
- * This will be removed in the next major version.
- *
- * Typescript currently does not support partial inference so if ChatContext
- * typing is desired while using the HOC withTranslationContext the Props for the
- * wrapped component must be provided as the first generic.
- */
-export const withTranslationContext = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
->(
-  Component: React.ComponentType<StreamChatGenerics>,
-): React.ComponentType<Omit<StreamChatGenerics, keyof TranslationContextValue>> => {
-  const WithTranslationContextComponent = (
-    props: Omit<StreamChatGenerics, keyof TranslationContextValue>,
-  ) => {
-    const translationContext = useTranslationContext();
-
-    return <Component {...(props as StreamChatGenerics)} {...translationContext} />;
-  };
-  WithTranslationContextComponent.displayName = `WithTranslationContext${getDisplayName(
-    Component as React.ComponentType,
-  )}`;
-  return WithTranslationContextComponent;
-};

package/src/contexts/typingContext/TypingContext.tsx

@@ -2,10 +2,9 @@ import React, { PropsWithChildren, useContext } from 'react';
 
 import type { ChannelState } from 'stream-chat';
 
-import type { DefaultStreamChatGenerics, UnknownType } from '../../types/types';
+import type { DefaultStreamChatGenerics } from '../../types/types';
 import { DEFAULT_BASE_CONTEXT_VALUE } from '../utils/defaultBaseContextValue';
 
-import { getDisplayName } from '../utils/getDisplayName';
 import { isTestEnvironment } from '../utils/isTestEnvironment';
 
 export type TypingContextValue<
@@ -44,29 +43,3 @@ export const useTypingContext = <
 
   return contextValue;
 };
-
-/**
- * @deprecated
- *
- * This will be removed in the next major version.
- *
- * Typescript currently does not support partial inference so if ChatContext
- * typing is desired while using the HOC withTypingContext the Props for the
- * wrapped component must be provided as the first generic.
- */
-export const withTypingContext = <
-  P extends UnknownType,
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
->(
-  Component: React.ComponentType<P>,
-): React.ComponentType<Omit<P, keyof TypingContextValue<StreamChatGenerics>>> => {
-  const WithTypingContextComponent = (
-    props: Omit<P, keyof TypingContextValue<StreamChatGenerics>>,
-  ) => {
-    const typingContext = useTypingContext<StreamChatGenerics>();
-
-    return <Component {...(props as P)} {...typingContext} />;
-  };
-  WithTypingContextComponent.displayName = `WithTypingContext${getDisplayName(Component)}`;
-  return WithTypingContextComponent;
-};

package/src/hooks/__tests__/useTranslatedMessage.test.tsx

@@ -5,10 +5,6 @@ import { render, screen, waitFor } from '@testing-library/react-native';
 
 import type { MessageResponse } from 'stream-chat';
 
-import {
-  MessageOverlayContextValue,
-  MessageOverlayProvider,
-} from '../../contexts/messageOverlayContext/MessageOverlayContext';
 import {
   TranslationContextValue,
   TranslationProvider,
@@ -21,7 +17,7 @@ type TestComponentProps = {
 
 const TestComponent = ({ message }: TestComponentProps) => {
   const translatedMessage = useTranslatedMessage(message);
-  return <Text>{translatedMessage.text}</Text>;
+  return <Text>{translatedMessage?.text}</Text>;
 };
 
 describe('useTranslatedMessage', () => {
@@ -92,11 +88,9 @@ describe('useTranslatedMessage', () => {
      * in the provider.
      * */
     render(
-      <MessageOverlayProvider
-        value={{ userLanguage: 'nl' } as unknown as MessageOverlayContextValue}
-      >
+      <TranslationProvider value={{ userLanguage: 'nl' } as TranslationContextValue}>
         <TestComponent message={message} />
-      </MessageOverlayProvider>,
+      </TranslationProvider>,
     );
 
     await waitFor(() => {

package/src/hooks/useTranslatedMessage.ts

@@ -1,6 +1,5 @@
 import type { FormatMessageResponse, MessageResponse, TranslationLanguages } from 'stream-chat';
 
-import { useMessageOverlayContext } from '../contexts/messageOverlayContext/MessageOverlayContext';
 import { useTranslationContext } from '../contexts/translationContext/TranslationContext';
 import type { DefaultStreamChatGenerics } from '../types/types';
 
@@ -12,10 +11,8 @@ export const useTranslatedMessage = <
   message?: MessageResponse<StreamChatGenerics> | FormatMessageResponse<StreamChatGenerics>,
 ) => {
   const { userLanguage: translationContextUserLanguage } = useTranslationContext();
-  const messageOverlayContextValue = useMessageOverlayContext<StreamChatGenerics>();
 
-  const userLanguage =
-    messageOverlayContextValue.data?.userLanguage || translationContextUserLanguage;
+  const userLanguage = translationContextUserLanguage;
 
   const translationKey: TranslationKey = `${userLanguage}_text`;
 

package/src/icons/PinHeader.tsx

@@ -1,12 +1,18 @@
 import React from 'react';
 
-import { IconProps, RootPath, RootSvg } from './utils/base';
+import Svg, { Path } from 'react-native-svg';
 
-export const PinHeader = (props: IconProps) => (
-  <RootSvg {...props}>
-    <RootPath
-      d='M10.694 1.52908C10.5304 1.36544 10.2937 1.2982 10.0685 1.35137C9.84327 1.40454 9.6616 1.57053 9.5884 1.79006L9.16613 3.05694L6.72027 5.50284C5.12809 5.14216 3.59999 5.79028 2.19557 7.1947C1.93481 7.45543 1.93481 7.87823 2.19557 8.13896L4.55625 10.4997L3.1399 11.916C2.87915 12.1768 2.87915 12.5995 3.1399 12.8603C3.40065 13.1211 3.82342 13.1211 4.08417 12.8603L5.50051 11.4439L7.8612 13.8046C8.12193 14.0654 8.54473 14.0654 8.80547 13.8046C10.2099 12.4002 10.858 10.8721 10.4973 9.2799L12.9432 6.83403L14.2101 6.41173C14.4296 6.33855 14.5956 6.15692 14.6488 5.9317C14.7019 5.70648 14.6347 5.46979 14.4711 5.30616L10.694 1.52908ZM10.3832 3.62876L10.5137 3.23728L12.7629 5.4865L12.3714 5.617C12.2731 5.64977 12.1837 5.705 12.1104 5.7783L9.2776 8.6111C9.09873 8.78996 9.03633 9.05443 9.11627 9.29436C9.43453 10.249 9.2382 11.2566 8.31287 12.3678L3.6324 7.6873C4.74353 6.76196 5.7511 6.56564 6.7058 6.8839C6.94573 6.96383 7.2102 6.90143 7.38906 6.72256L10.2219 3.88975C10.2951 3.81646 10.3504 3.7271 10.3832 3.62876Z'
-      {...props}
+import { IconProps } from './utils/base';
+
+type Props = IconProps & {
+  size: number;
+};
+
+export const PinHeader = ({ size, ...rest }: Props) => (
+  <Svg height={size} viewBox={`0 0 ${size} ${size}`} width={size} {...rest}>
+    <Path
+      d='M9.33325 2.66668V6.00001C9.33325 6.74668 9.57992 7.44001 9.99992 8.00001H5.99992C6.43325 7.42668 6.66659 6.73334 6.66659 6.00001V2.66668H9.33325ZM11.3333 1.33334H4.66659C4.29992 1.33334 3.99992 1.63334 3.99992 2.00001C3.99992 2.36668 4.29992 2.66668 4.66659 2.66668H5.33325V6.00001C5.33325 7.10668 4.43992 8.00001 3.33325 8.00001V9.33334H7.31325V14L7.97992 14.6667L8.64659 14V9.33334H12.6666V8.00001C11.5599 8.00001 10.6666 7.10668 10.6666 6.00001V2.66668H11.3333C11.6999 2.66668 11.9999 2.36668 11.9999 2.00001C11.9999 1.63334 11.6999 1.33334 11.3333 1.33334Z'
+      {...rest}
     />
-  </RootSvg>
+  </Svg>
 );

package/src/index.ts

@@ -3,7 +3,7 @@ import 'intl-pluralrules';
 
 export * from './components';
 export * from './hooks';
-export { registerNativeHandlers, NetInfo, iOS14RefreshGallerySelection } from './native';
+export { registerNativeHandlers, iOS14RefreshGallerySelection } from './native';
 export * from './contexts';
 export * from './emoji-data';
 
@@ -17,7 +17,6 @@ export * from './utils/i18n/Streami18n';
 export * from './utils/queryMembers';
 export * from './utils/queryUsers';
 export * from './utils/utils';
-export * from './utils/StreamChatRN';
 
 export { default as enTranslations } from './i18n/en.json';
 export { default as frTranslations } from './i18n/fr.json';
@@ -28,7 +27,7 @@ export { default as ruTranslations } from './i18n/ru.json';
 export { default as trTranslations } from './i18n/tr.json';
 export { default as heTranslations } from './i18n/he.json';
 
-export { QuickSqliteClient } from './store/QuickSqliteClient';
+export { SqliteClient } from './store/SqliteClient';
 export { version } from './version.json';
 
 import * as OfflineStoreApis from './store/apis';