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

package/src/contexts/messageOverlayContext/hooks/useResettableState.test.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import { Button, Text } from 'react-native';
+
+import { fireEvent, render, waitFor } from '@testing-library/react-native';
+
+import { useResettableState } from './useResettableState';
+
+const TestComponent = () => {
+  const { data, reset, setData } = useResettableState(0);
+
+  return (
+    <>
+      <Text testID='value'>{`${data}`}</Text>
+      <Button
+        onPress={() => {
+          setData(data + 1);
+        }}
+        testID='increment'
+        title='Super useful incrementer'
+      />
+      <Button
+        onPress={() => {
+          reset();
+        }}
+        testID='reset'
+        title='Oh no, go back!'
+      />
+    </>
+  );
+};
+
+const waitForOptions = {
+  timeout: 1000,
+};
+
+test('useResettableState can be reset to its initial state', async () => {
+  const { getByTestId } = render(<TestComponent />);
+
+  await waitFor(() => expect(getByTestId('value').children[0]).toBe('0'), waitForOptions);
+
+  fireEvent.press(getByTestId('increment'));
+  await waitFor(() => expect(getByTestId('value').children[0]).toBe('1'), waitForOptions);
+
+  fireEvent.press(getByTestId('reset'));
+  await waitFor(() => expect(getByTestId('value').children[0]).toBe('0'), waitForOptions);
+});

package/src/contexts/messageOverlayContext/hooks/useResettableState.ts

@@ -0,0 +1,22 @@
+import { useState } from 'react';
+
+import { useIsMountedRef } from '../../../hooks/useIsMountedRef';
+
+/**
+ * Wrapper around useState that provides a `reset`
+ * function to reset the state to its initial value.
+ *
+ * Will not set state after being unmounted.
+ * */
+export const useResettableState = <T>(values: T) => {
+  const [data, setData] = useState(values);
+  const isMounted = useIsMountedRef();
+
+  const reset = () => {
+    if (isMounted.current) {
+      setData(values);
+    }
+  };
+
+  return { data, reset, setData };
+};

package/src/contexts/messagesContext/MessagesContext.tsx

@@ -1,17 +1,10 @@
 import React, { PropsWithChildren, useContext } from 'react';
 
-import { getDisplayName } from '../utils/getDisplayName';
-
 import type { TouchableOpacityProps } from 'react-native';
 
-import type { ChannelState, MessageResponse } from 'stream-chat';
+import type { MessagePinnedHeaderProps } from 'src/components/Message/MessageSimple/MessagePinnedHeader';
 
-import type { Alignment } from '../messageContext/MessageContext';
-import type { MessageActionType } from '../../components/MessageOverlay/MessageActionListItem';
-import type { SuggestionCommand } from '../suggestionsContext/SuggestionsContext';
-import type { DeepPartial } from '../themeContext/ThemeContext';
-import type { Theme } from '../themeContext/utils/theme';
-import type { TDateTimeParserInput } from '../translationContext/TranslationContext';
+import type { ChannelState, MessageResponse } from 'stream-chat';
 
 import type { AttachmentProps } from '../../components/Attachment/Attachment';
 import type { AttachmentActionsProps } from '../../components/Attachment/AttachmentActions';
@@ -29,22 +22,23 @@ import type { MessageAvatarProps } from '../../components/Message/MessageSimple/
 import type { MessageContentProps } from '../../components/Message/MessageSimple/MessageContent';
 import type { MessageDeletedProps } from '../../components/Message/MessageSimple/MessageDeleted';
 import type { MessageFooterProps } from '../../components/Message/MessageSimple/MessageFooter';
-import type { MessagePinnedHeaderProps } from 'src/components/Message/MessageSimple/MessagePinnedHeader';
+
 import type { MessageRepliesProps } from '../../components/Message/MessageSimple/MessageReplies';
 import type { MessageRepliesAvatarsProps } from '../../components/Message/MessageSimple/MessageRepliesAvatars';
-import type { MessageStatusProps } from '../../components/Message/MessageSimple/MessageStatus';
 import type { MessageSimpleProps } from '../../components/Message/MessageSimple/MessageSimple';
+import type { MessageStatusProps } from '../../components/Message/MessageSimple/MessageStatus';
 import type { MessageTextProps } from '../../components/Message/MessageSimple/MessageTextContainer';
+import type { ReactionListProps } from '../../components/Message/MessageSimple/ReactionList';
 import type { MarkdownRules } from '../../components/Message/MessageSimple/utils/renderText';
 import type { MessageActionsParams } from '../../components/Message/utils/messageActions';
 import type { DateHeaderProps } from '../../components/MessageList/DateHeader';
 import type { MessageType } from '../../components/MessageList/hooks/useMessageList';
 import type { InlineDateSeparatorProps } from '../../components/MessageList/InlineDateSeparator';
 import type { MessageListProps } from '../../components/MessageList/MessageList';
-import type { ScrollToBottomButtonProps } from '../../components/MessageList/ScrollToBottomButton';
 import type { MessageSystemProps } from '../../components/MessageList/MessageSystem';
+import type { ScrollToBottomButtonProps } from '../../components/MessageList/ScrollToBottomButton';
+import type { MessageActionType } from '../../components/MessageOverlay/MessageActionListItem';
 import type { OverlayReactionListProps } from '../../components/MessageOverlay/OverlayReactionList';
-import type { ReactionListProps } from '../../components/Message/MessageSimple/ReactionList';
 import type { ReplyProps } from '../../components/Reply/Reply';
 import type { FlatList } from '../../native';
 import type {
@@ -58,6 +52,12 @@ import type {
   UnknownType,
 } from '../../types/types';
 import type { ReactionData } from '../../utils/utils';
+import type { Alignment } from '../messageContext/MessageContext';
+import type { SuggestionCommand } from '../suggestionsContext/SuggestionsContext';
+import type { DeepPartial } from '../themeContext/ThemeContext';
+import type { Theme } from '../themeContext/utils/theme';
+import type { TDateTimeParserInput } from '../translationContext/TranslationContext';
+import { getDisplayName } from '../utils/getDisplayName';
 
 export type MessageContentType = 'attachments' | 'files' | 'gallery' | 'quoted_reply' | 'text';
 

package/src/contexts/overlayContext/OverlayContext.tsx

@@ -1,15 +1,8 @@
 import React, { useContext } from 'react';
 import type Animated from 'react-native-reanimated';
 
-import { getDisplayName } from '../utils/getDisplayName';
-
 import type { BottomSheetMethods } from '@gorhom/bottom-sheet/lib/typescript/types';
 
-import type { AttachmentPickerContextValue } from '../attachmentPickerContext/AttachmentPickerContext';
-import type { MessageOverlayContextValue } from '../messageOverlayContext/MessageOverlayContext';
-import type { DeepPartial } from '../themeContext/ThemeContext';
-import type { Theme } from '../themeContext/utils/theme';
-
 import type { AttachmentPickerProps } from '../../components/AttachmentPicker/AttachmentPicker';
 import type { ImageGalleryCustomComponents } from '../../components/ImageGallery/ImageGallery';
 import type { MessageType } from '../../components/MessageList/hooks/useMessageList';
@@ -24,6 +17,11 @@ import type {
   UnknownType,
 } from '../../types/types';
 import type { Streami18n } from '../../utils/Streami18n';
+import type { AttachmentPickerContextValue } from '../attachmentPickerContext/AttachmentPickerContext';
+import type { MessageOverlayContextValue } from '../messageOverlayContext/MessageOverlayContext';
+import type { DeepPartial } from '../themeContext/ThemeContext';
+import type { Theme } from '../themeContext/utils/theme';
+import { getDisplayName } from '../utils/getDisplayName';
 
 export type Overlay = 'alert' | 'gallery' | 'message' | 'none';
 
@@ -61,7 +59,11 @@ export type OverlayProviderProps<
   Partial<
     Pick<
       MessageOverlayContextValue<At, Ch, Co, Ev, Me, Re, Us>,
-      'MessageActionList' | 'MessageActionListItem' | 'OverlayReactionList' | 'OverlayReactions'
+      | 'MessageActionList'
+      | 'MessageActionListItem'
+      | 'OverlayReactionList'
+      | 'OverlayReactions'
+      | 'OverlayReactionsAvatar'
     >
   > &
   Pick<OverlayContextValue, 'translucentStatusBar'> & {

package/src/contexts/overlayContext/OverlayProvider.tsx

@@ -1,6 +1,6 @@
 import React, { PropsWithChildren, useEffect, useRef, useState } from 'react';
 import { BackHandler, Dimensions, StyleSheet, ViewStyle } from 'react-native';
-import Dayjs from 'dayjs';
+
 import Animated, {
   cancelAnimation,
   useAnimatedStyle,
@@ -8,33 +8,26 @@ import Animated, {
   withTiming,
 } from 'react-native-reanimated';
 
-import { AttachmentPickerProvider } from '../attachmentPickerContext/AttachmentPickerContext';
-import { ImageGalleryProvider } from '../imageGalleryContext/ImageGalleryContext';
-import { MessageOverlayProvider } from '../messageOverlayContext/MessageOverlayContext';
-import { ThemeProvider } from '../themeContext/ThemeContext';
-import {
-  TranslationContextValue,
-  TranslationProvider,
-} from '../translationContext/TranslationContext';
+import type BottomSheet from '@gorhom/bottom-sheet';
+import Dayjs from 'dayjs';
+
+import { OverlayContext, OverlayProviderProps } from './OverlayContext';
 
 import { AttachmentPicker } from '../../components/AttachmentPicker/AttachmentPicker';
-import { AttachmentPickerError as DefaultAttachmentPickerError } from '../../components/AttachmentPicker/components/AttachmentPickerError';
+
 import { AttachmentPickerBottomSheetHandle as DefaultAttachmentPickerBottomSheetHandle } from '../../components/AttachmentPicker/components/AttachmentPickerBottomSheetHandle';
+import { AttachmentPickerError as DefaultAttachmentPickerError } from '../../components/AttachmentPicker/components/AttachmentPickerError';
 import { AttachmentPickerErrorImage as DefaultAttachmentPickerErrorImage } from '../../components/AttachmentPicker/components/AttachmentPickerErrorImage';
 import { CameraSelectorIcon as DefaultCameraSelectorIcon } from '../../components/AttachmentPicker/components/CameraSelectorIcon';
-import { ChannelsStateProvider } from '../../contexts/channelsStateContext/ChannelsStateContext';
 import { FileSelectorIcon as DefaultFileSelectorIcon } from '../../components/AttachmentPicker/components/FileSelectorIcon';
 import { ImageOverlaySelectedComponent as DefaultImageOverlaySelectedComponent } from '../../components/AttachmentPicker/components/ImageOverlaySelectedComponent';
 import { ImageSelectorIcon as DefaultImageSelectorIcon } from '../../components/AttachmentPicker/components/ImageSelectorIcon';
 import { ImageGallery } from '../../components/ImageGallery/ImageGallery';
 import { MessageOverlay } from '../../components/MessageOverlay/MessageOverlay';
 import { OverlayBackdrop } from '../../components/MessageOverlay/OverlayBackdrop';
+import { ChannelsStateProvider } from '../../contexts/channelsStateContext/ChannelsStateContext';
 import { useStreami18n } from '../../hooks/useStreami18n';
 
-import type BottomSheet from '@gorhom/bottom-sheet';
-
-import { OverlayContext, OverlayProviderProps } from './OverlayContext';
-
 import type {
   DefaultAttachmentType,
   DefaultChannelType,
@@ -45,6 +38,14 @@ import type {
   DefaultUserType,
   UnknownType,
 } from '../../types/types';
+import { AttachmentPickerProvider } from '../attachmentPickerContext/AttachmentPickerContext';
+import { ImageGalleryProvider } from '../imageGalleryContext/ImageGalleryContext';
+import { MessageOverlayProvider } from '../messageOverlayContext/MessageOverlayContext';
+import { ThemeProvider } from '../themeContext/ThemeContext';
+import {
+  TranslationContextValue,
+  TranslationProvider,
+} from '../translationContext/TranslationContext';
 
 /**
  * - The highest level of these components is the `OverlayProvider`. The `OverlayProvider` allows users to interact with messages on long press above the underlying views, use the full screen image viewer, and use the `AttachmentPicker` as a keyboard-esk view.
@@ -108,8 +109,8 @@ export const OverlayProvider = <
     numberOfAttachmentPickerImageColumns,
     numberOfImageGalleryGridColumns,
     openPicker = (ref) => {
-      if (ref.current?.snapTo) {
-        ref.current.snapTo(0);
+      if (ref.current?.snapToIndex) {
+        ref.current.snapToIndex(0);
       } else {
         console.warn('bottom and top insets must be set for the image picker to work correctly');
       }
@@ -118,6 +119,7 @@ export const OverlayProvider = <
     translucentStatusBar,
     OverlayReactionList,
     OverlayReactions,
+    OverlayReactionsAvatar,
     value,
   } = props;
 
@@ -230,17 +232,20 @@ export const OverlayProvider = <
                     overlayOpacity={overlayOpacity}
                     OverlayReactionList={OverlayReactionList}
                     OverlayReactions={OverlayReactions}
+                    OverlayReactionsAvatar={OverlayReactionsAvatar}
                     visible={overlay === 'message'}
                   />
                 )}
-                <ImageGallery<At, Ch, Co, Ev, Me, Re, Us>
-                  imageGalleryCustomComponents={imageGalleryCustomComponents}
-                  imageGalleryGridHandleHeight={imageGalleryGridHandleHeight}
-                  imageGalleryGridSnapPoints={imageGalleryGridSnapPoints}
-                  numberOfImageGalleryGridColumns={numberOfImageGalleryGridColumns}
-                  overlayOpacity={overlayOpacity}
-                  visible={overlay === 'gallery'}
-                />
+                {overlay === 'gallery' && (
+                  <ImageGallery<At, Ch, Co, Ev, Me, Re, Us>
+                    imageGalleryCustomComponents={imageGalleryCustomComponents}
+                    imageGalleryGridHandleHeight={imageGalleryGridHandleHeight}
+                    imageGalleryGridSnapPoints={imageGalleryGridSnapPoints}
+                    numberOfImageGalleryGridColumns={numberOfImageGalleryGridColumns}
+                    overlayOpacity={overlayOpacity}
+                    visible={overlay === 'gallery'}
+                  />
+                )}
                 <AttachmentPicker ref={bottomSheetRef} {...attachmentPickerProps} />
               </ThemeProvider>
             </ImageGalleryProvider>

package/src/contexts/paginatedMessageListContext/PaginatedMessageListContext.tsx

@@ -1,7 +1,5 @@
 import React, { PropsWithChildren, useContext } from 'react';
 
-import { getDisplayName } from '../utils/getDisplayName';
-
 import type { ChannelState } from 'stream-chat';
 
 import type {
@@ -14,6 +12,7 @@ import type {
   DefaultUserType,
   UnknownType,
 } from '../../types/types';
+import { getDisplayName } from '../utils/getDisplayName';
 
 export type PaginatedMessageListContextValue<
   At extends UnknownType = DefaultAttachmentType,

package/src/contexts/suggestionsContext/SuggestionsContext.tsx

@@ -1,12 +1,13 @@
 import React, { PropsWithChildren, useContext, useState } from 'react';
+
 import type { CommandResponse, UserResponse } from 'stream-chat';
 
-import { getDisplayName } from '../utils/getDisplayName';
 import type { AutoCompleteSuggestionHeaderProps } from '../../components/AutoCompleteInput/AutoCompleteSuggestionHeader';
-import type { AutoCompleteSuggestionListProps } from '../../components/AutoCompleteInput/AutoCompleteSuggestionList';
 import type { AutoCompleteSuggestionItemProps } from '../../components/AutoCompleteInput/AutoCompleteSuggestionItem';
-import type { DefaultCommandType, DefaultUserType, UnknownType } from '../../types/types';
+import type { AutoCompleteSuggestionListProps } from '../../components/AutoCompleteInput/AutoCompleteSuggestionList';
 import type { Emoji } from '../../emoji-data/compiled';
+import type { DefaultCommandType, DefaultUserType, UnknownType } from '../../types/types';
+import { getDisplayName } from '../utils/getDisplayName';
 
 export type SuggestionComponentType = 'command' | 'emoji' | 'mention';
 

package/src/contexts/suggestionsContext/__tests__/Suggestions.test.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import { View } from 'react-native';
+
 import { cleanup, render, waitFor } from '@testing-library/react-native';
 
 import { SuggestionsProvider, useSuggestionsContext } from '../SuggestionsContext';

package/src/contexts/themeContext/ThemeContext.tsx

@@ -1,4 +1,5 @@
 import React, { useContext, useMemo } from 'react';
+
 import merge from 'lodash/merge';
 
 import { defaultTheme, Theme } from './utils/theme';

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

@@ -1,9 +1,8 @@
-import { vh } from '../../../utils/utils';
-
 import type { ImageStyle, TextStyle, ViewStyle } from 'react-native';
 import type { CircleProps, Color, StopProps } from 'react-native-svg';
 
 import type { IconProps } from '../../../icons/utils/base';
+import { vh } from '../../../utils/utils';
 
 export const DEFAULT_STATUS_ICON_SIZE = 16;
 
@@ -135,6 +134,11 @@ export type Theme = {
     message: TextStyle & {
       fontWeight: TextStyle['fontWeight'];
     };
+    mutedStatus: {
+      height: number;
+      iconStyle: ViewStyle;
+      width: number;
+    };
     row: ViewStyle;
     title: TextStyle;
     unreadContainer: ViewStyle;
@@ -401,13 +405,16 @@ export type Theme = {
     gallery: {
       galleryContainer: ViewStyle;
       galleryItemColumn: ViewStyle;
-      halfSize: ViewStyle['height'];
+      gridHeight: number;
+      gridWidth: number;
       image: ImageStyle;
       imageContainer: ViewStyle;
+      maxHeight: number;
+      maxWidth: number;
+      minHeight: number;
+      minWidth: number;
       moreImagesContainer: ViewStyle;
       moreImagesText: TextStyle;
-      size: ViewStyle['height'];
-      width: ViewStyle['width'];
     };
     giphy: {
       cancel: TextStyle;
@@ -585,6 +592,11 @@ export const defaultTheme: Theme = {
     message: {
       fontWeight: '400',
     },
+    mutedStatus: {
+      height: 20,
+      iconStyle: {},
+      width: 20,
+    },
     row: {},
     title: {},
     unreadContainer: {},
@@ -884,13 +896,16 @@ export const defaultTheme: Theme = {
     gallery: {
       galleryContainer: {},
       galleryItemColumn: {},
-      halfSize: 100,
+      gridHeight: 195,
+      gridWidth: 256,
       image: {},
       imageContainer: {},
+      maxHeight: 300,
+      maxWidth: 256,
+      minHeight: 100,
+      minWidth: 170,
       moreImagesContainer: {},
       moreImagesText: {},
-      size: 200,
-      width: 250,
     },
     giphy: {
       cancel: {},

package/src/contexts/threadContext/ThreadContext.tsx

@@ -1,7 +1,5 @@
 import React, { PropsWithChildren, useContext } from 'react';
 
-import { getDisplayName } from '../utils/getDisplayName';
-
 import type { ChannelState } from 'stream-chat';
 
 import type { MessageType } from '../../components/MessageList/hooks/useMessageList';
@@ -15,6 +13,7 @@ import type {
   DefaultUserType,
   UnknownType,
 } from '../../types/types';
+import { getDisplayName } from '../utils/getDisplayName';
 
 export type ThreadContextValue<
   At extends UnknownType = DefaultAttachmentType,

package/src/contexts/translationContext/TranslationContext.tsx

@@ -1,12 +1,12 @@
 import React, { useContext } from 'react';
-import Dayjs from 'dayjs';
 
-import { getDisplayName } from '../utils/getDisplayName';
+import Dayjs from 'dayjs';
 
 import type { TFunction } from 'i18next';
 import type { Moment } from 'moment';
 
 import type { UnknownType } from '../../types/types';
+import { getDisplayName } from '../utils/getDisplayName';
 
 export const isDayOrMoment = (output: TDateTimeParserOutput): output is Dayjs.Dayjs | Moment =>
   (output as Dayjs.Dayjs | Moment).isSame != null;

package/src/contexts/typingContext/TypingContext.tsx

@@ -1,7 +1,5 @@
 import React, { PropsWithChildren, useContext } from 'react';
 
-import { getDisplayName } from '../utils/getDisplayName';
-
 import type { ChannelState } from 'stream-chat';
 
 import type {
@@ -14,6 +12,7 @@ import type {
   DefaultUserType,
   UnknownType,
 } from '../../types/types';
+import { getDisplayName } from '../utils/getDisplayName';
 
 export type TypingContextValue<
   At extends UnknownType = DefaultAttachmentType,

package/src/contexts/utils/getDisplayName.ts

@@ -1,4 +1,5 @@
 import type { ComponentType } from 'react';
+
 import type { UnknownType } from '../../types/types';
 
 export const getDisplayName = <P extends UnknownType>(Component: ComponentType<P>) =>

package/src/emoji-data/index.js

@@ -1,6 +1,6 @@
 /* eslint-disable no-undef */
-const emojis = require('./emojis.ts');
 const emojiNames = require('./emojiNames.ts');
+const emojis = require('./emojis.ts');
 
 const emojiLib = emojis.reduce((acc, cur) => {
   acc[cur.name] = {

package/src/hooks/useStreami18n.ts

@@ -1,9 +1,9 @@
 import { useEffect, useState } from 'react';
 
 import { useIsMountedRef } from './useIsMountedRef';
-import { Streami18n } from '../utils/Streami18n';
 
 import type { TranslationContextValue } from '../contexts/translationContext/TranslationContext';
+import { Streami18n } from '../utils/Streami18n';
 
 export const useStreami18n = ({
   i18nInstance,

package/src/mock-builders/api/sendMessage.js

@@ -1,4 +1,5 @@
 import { mockedApiResponse } from './utils';
+
 import { generateMessage } from '../generator/message';
 /**
  * Returns the api response for sendMessage api.

package/src/mock-builders/generator/attachment.js

@@ -19,10 +19,8 @@ export const generateVideoAttachment = (a) => ({
 
 export const generateImageAttachment = (a) => ({
   image_url: uuidv4(),
-  text: uuidv4(),
   thumb_url: uuidv4(),
   title: uuidv4(),
-  title_link: 'https://getstream.io',
   type: 'image',
   ...a,
 });