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

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,43 +8,35 @@ 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,
-  DefaultCommandType,
-  DefaultEventType,
-  DefaultMessageType,
-  DefaultReactionType,
-  DefaultUserType,
-  UnknownType,
-} from '../../types/types';
+import type { DefaultStreamChatGenerics } 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.
@@ -67,15 +59,9 @@ import type {
  * @example ./OverlayProvider.md
  */
 export const OverlayProvider = <
-  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<OverlayProviderProps<At, Ch, Co, Ev, Me, Re, Us>>,
+  props: PropsWithChildren<OverlayProviderProps<StreamChatGenerics>>,
 ) => {
   const {
     AttachmentPickerBottomSheetHandle = DefaultAttachmentPickerBottomSheetHandle,
@@ -108,8 +94,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 +104,7 @@ export const OverlayProvider = <
     translucentStatusBar,
     OverlayReactionList,
     OverlayReactions,
+    OverlayReactionsAvatar,
     value,
   } = props;
 
@@ -211,10 +198,10 @@ export const OverlayProvider = <
   return (
     <TranslationProvider value={translators}>
       <OverlayContext.Provider value={overlayContext}>
-        <MessageOverlayProvider<At, Ch, Co, Ev, Me, Re, Us>>
+        <MessageOverlayProvider<StreamChatGenerics>>
           <AttachmentPickerProvider value={attachmentPickerContext}>
             <ImageGalleryProvider>
-              <ChannelsStateProvider<At, Ch, Co, Ev, Me, Re, Us>>{children}</ChannelsStateProvider>
+              <ChannelsStateProvider<StreamChatGenerics>>{children}</ChannelsStateProvider>
               <ThemeProvider style={overlayContext.style}>
                 <Animated.View
                   pointerEvents={overlay === 'none' ? 'none' : 'auto'}
@@ -223,24 +210,27 @@ export const OverlayProvider = <
                   <OverlayBackdrop style={[StyleSheet.absoluteFill, { height, width }]} />
                 </Animated.View>
                 {overlay === 'message' && (
-                  <MessageOverlay<At, Ch, Co, Ev, Me, Re, Us>
+                  <MessageOverlay<StreamChatGenerics>
                     MessageActionList={MessageActionList}
                     MessageActionListItem={MessageActionListItem}
                     messageTextNumberOfLines={messageTextNumberOfLines}
                     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<StreamChatGenerics>
+                    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,28 +1,12 @@
 import React, { PropsWithChildren, useContext } from 'react';
 
-import { getDisplayName } from '../utils/getDisplayName';
-
 import type { ChannelState } from 'stream-chat';
 
-import type {
-  DefaultAttachmentType,
-  DefaultChannelType,
-  DefaultCommandType,
-  DefaultEventType,
-  DefaultMessageType,
-  DefaultReactionType,
-  DefaultUserType,
-  UnknownType,
-} from '../../types/types';
+import type { DefaultStreamChatGenerics, UnknownType } from '../../types/types';
+import { getDisplayName } from '../utils/getDisplayName';
 
 export type PaginatedMessageListContextValue<
-  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,
 > = {
   /**
    * Has more messages to load
@@ -47,7 +31,7 @@ export type PaginatedMessageListContextValue<
   /**
    * Messages from client state
    */
-  messages: ChannelState<At, Ch, Co, Ev, Me, Re, Us>['messages'];
+  messages: ChannelState<StreamChatGenerics>['messages'];
   /**
    * Set loadingMore
    */
@@ -63,18 +47,12 @@ export const PaginatedMessageListContext = React.createContext(
 );
 
 export const PaginatedMessageListProvider = <
-  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,
 >({
   children,
   value,
 }: PropsWithChildren<{
-  value?: PaginatedMessageListContextValue<At, Ch, Co, Ev, Me, Re, Us>;
+  value?: PaginatedMessageListContextValue<StreamChatGenerics>;
 }>) => (
   <PaginatedMessageListContext.Provider
     value={value as unknown as PaginatedMessageListContextValue}
@@ -84,23 +62,11 @@ export const PaginatedMessageListProvider = <
 );
 
 export const usePaginatedMessageListContext = <
-  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,
 >() =>
-  useContext(PaginatedMessageListContext) as unknown as PaginatedMessageListContextValue<
-    At,
-    Ch,
-    Co,
-    Ev,
-    Me,
-    Re,
-    Us
-  >;
+  useContext(
+    PaginatedMessageListContext,
+  ) as unknown as PaginatedMessageListContextValue<StreamChatGenerics>;
 
 /**
  * Typescript currently does not support partial inference so if MessageListContextValue
@@ -109,21 +75,14 @@ export const usePaginatedMessageListContext = <
  */
 export const withPaginatedMessageListContext = <
   P extends UnknownType,
-  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,
 >(
   Component: React.ComponentType<P>,
-): React.FC<Omit<P, keyof PaginatedMessageListContextValue<At, Ch, Co, Ev, Me, Re, Us>>> => {
+): React.FC<Omit<P, keyof PaginatedMessageListContextValue<StreamChatGenerics>>> => {
   const WithPaginatedMessageListContextComponent = (
-    props: Omit<P, keyof PaginatedMessageListContextValue<At, Ch, Co, Ev, Me, Re, Us>>,
+    props: Omit<P, keyof PaginatedMessageListContextValue<StreamChatGenerics>>,
   ) => {
-    const paginatedMessageListContext =
-      usePaginatedMessageListContext<At, Ch, Co, Ev, Me, Re, Us>();
+    const paginatedMessageListContext = usePaginatedMessageListContext<StreamChatGenerics>();
 
     return <Component {...(props as P)} {...paginatedMessageListContext} />;
   };

package/src/contexts/suggestionsContext/SuggestionsContext.tsx

@@ -1,60 +1,63 @@
 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 { DefaultStreamChatGenerics, UnknownType } from '../../types/types';
+import { getDisplayName } from '../utils/getDisplayName';
 
 export type SuggestionComponentType = 'command' | 'emoji' | 'mention';
 
 export const isSuggestionCommand = <
-  Co extends string = DefaultCommandType,
-  Us extends UnknownType = DefaultUserType,
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
-  suggestion: Suggestion<Co, Us>,
-): suggestion is SuggestionCommand<Co> => 'args' in suggestion;
+  suggestion: Suggestion<StreamChatGenerics>,
+): suggestion is SuggestionCommand<StreamChatGenerics> => 'args' in suggestion;
 
 export const isSuggestionEmoji = <
-  Co extends string = DefaultCommandType,
-  Us extends UnknownType = DefaultUserType,
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
-  suggestion: Suggestion<Co, Us>,
+  suggestion: Suggestion<StreamChatGenerics>,
 ): suggestion is Emoji => 'unicode' in suggestion;
 
 export const isSuggestionUser = <
-  Co extends string = DefaultCommandType,
-  Us extends UnknownType = DefaultUserType,
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
-  suggestion: Suggestion<Co, Us>,
-): suggestion is SuggestionUser<Us> => 'id' in suggestion;
+  suggestion: Suggestion<StreamChatGenerics>,
+): suggestion is SuggestionUser<StreamChatGenerics> => 'id' in suggestion;
 
 export type Suggestion<
-  Co extends string = DefaultCommandType,
-  Us extends UnknownType = DefaultUserType,
-> = Emoji | SuggestionCommand<Co> | SuggestionUser<Us>;
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+> = Emoji | SuggestionCommand<StreamChatGenerics> | SuggestionUser<StreamChatGenerics>;
 
-export type SuggestionCommand<Co extends string = DefaultCommandType> = CommandResponse<Co>;
-export type SuggestionUser<Us extends UnknownType = DefaultUserType> = UserResponse<Us>;
+export type SuggestionCommand<
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+> = CommandResponse<StreamChatGenerics>;
+export type SuggestionUser<
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+> = UserResponse<StreamChatGenerics>;
 
 export type Suggestions<
-  Co extends string = DefaultCommandType,
-  Us extends UnknownType = DefaultUserType,
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > = {
-  data: Suggestion<Co, Us>[];
-  onSelect: (item: Suggestion<Co, Us>) => void;
+  data: Suggestion<StreamChatGenerics>[];
+  onSelect: (item: Suggestion<StreamChatGenerics>) => void;
   queryText?: string;
 };
 
 export type SuggestionsContextValue<
-  Co extends string = DefaultCommandType,
-  Us extends UnknownType = DefaultUserType,
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > = {
   AutoCompleteSuggestionHeader: React.ComponentType<AutoCompleteSuggestionHeaderProps>;
-  AutoCompleteSuggestionItem: React.ComponentType<AutoCompleteSuggestionItemProps<Co, Us>>;
-  AutoCompleteSuggestionList: React.ComponentType<AutoCompleteSuggestionListProps<Co, Us>>;
+  AutoCompleteSuggestionItem: React.ComponentType<
+    AutoCompleteSuggestionItemProps<StreamChatGenerics>
+  >;
+  AutoCompleteSuggestionList: React.ComponentType<
+    AutoCompleteSuggestionListProps<StreamChatGenerics>
+  >;
   /** Override handler for closing suggestions (mentions, command autocomplete etc) */
   closeSuggestions: () => void;
   /**
@@ -64,7 +67,7 @@ export type SuggestionsContextValue<
    * @overrideType Function
    */
   openSuggestions: (component: SuggestionComponentType) => Promise<void>;
-  suggestions: Suggestions<Co, Us>;
+  suggestions: Suggestions<StreamChatGenerics>;
   triggerType: SuggestionComponentType;
   /**
    * Override handler for updating suggestions (mentions, command autocomplete etc)
@@ -72,7 +75,7 @@ export type SuggestionsContextValue<
    * @param newSuggestions {Component|element} UI Component for suggestion item.
    * @overrideType Function
    */
-  updateSuggestions: (newSuggestions: Suggestions<Co, Us>) => void;
+  updateSuggestions: (newSuggestions: Suggestions<StreamChatGenerics>) => void;
   queryText?: string;
   suggestionsViewActive?: boolean;
 };
@@ -83,14 +86,13 @@ export const SuggestionsContext = React.createContext({} as SuggestionsContextVa
  * This provider component exposes the properties stored within the SuggestionsContext.
  */
 export const SuggestionsProvider = <
-  Co extends string = DefaultCommandType,
-  Us extends UnknownType = DefaultUserType,
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >({
   children,
   value,
-}: PropsWithChildren<{ value?: Partial<SuggestionsContextValue<Co, Us>> }>) => {
+}: PropsWithChildren<{ value?: Partial<SuggestionsContextValue<StreamChatGenerics>> }>) => {
   const [triggerType, setTriggerType] = useState<SuggestionComponentType | null>(null);
-  const [suggestions, setSuggestions] = useState<Suggestions<Co, Us>>();
+  const [suggestions, setSuggestions] = useState<Suggestions<StreamChatGenerics>>();
   const [suggestionsViewActive, setSuggestionsViewActive] = useState(false);
 
   const openSuggestions = (component: SuggestionComponentType) => {
@@ -98,7 +100,7 @@ export const SuggestionsProvider = <
     setSuggestionsViewActive(true);
   };
 
-  const updateSuggestions = (newSuggestions: Suggestions<Co, Us>) => {
+  const updateSuggestions = (newSuggestions: Suggestions<StreamChatGenerics>) => {
     setSuggestions(newSuggestions);
     setSuggestionsViewActive(!!triggerType);
   };
@@ -127,21 +129,19 @@ export const SuggestionsProvider = <
 };
 
 export const useSuggestionsContext = <
-  Co extends string = DefaultCommandType,
-  Us extends UnknownType = DefaultUserType,
->() => useContext(SuggestionsContext) as unknown as SuggestionsContextValue<Co, Us>;
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+>() => useContext(SuggestionsContext) as unknown as SuggestionsContextValue<StreamChatGenerics>;
 
 export const withSuggestionsContext = <
   P extends UnknownType,
-  Co extends string = DefaultCommandType,
-  Us extends UnknownType = DefaultUserType,
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
   Component: React.ComponentType<P>,
-): React.FC<Omit<P, keyof SuggestionsContextValue<Co, Us>>> => {
+): React.FC<Omit<P, keyof SuggestionsContextValue<StreamChatGenerics>>> => {
   const WithSuggestionsContextComponent = (
-    props: Omit<P, keyof SuggestionsContextValue<Co, Us>>,
+    props: Omit<P, keyof SuggestionsContextValue<StreamChatGenerics>>,
   ) => {
-    const suggestionsContext = useSuggestionsContext<Co, Us>();
+    const suggestionsContext = useSuggestionsContext<StreamChatGenerics>();
 
     return <Component {...(props as P)} {...suggestionsContext} />;
   };

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,27 +405,31 @@ 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: {
+      buttonContainer: ViewStyle;
       cancel: TextStyle;
-      cancelContainer: ViewStyle;
       container: ViewStyle;
       giphy: ImageStyle;
       giphyContainer: ViewStyle;
+      giphyHeaderText: TextStyle;
+      giphyHeaderTitle: TextStyle;
       giphyMask: ViewStyle;
-      giphyText: TextStyle;
+      giphyMaskText: TextStyle;
+      header: ViewStyle;
       selectionContainer: ViewStyle;
-      selector: ViewStyle;
       send: TextStyle;
-      sendContainer: ViewStyle;
-      shuffleButton: ViewStyle;
+      shuffle: TextStyle;
       title: TextStyle;
     };
     pinnedHeader: {
@@ -585,6 +593,11 @@ export const defaultTheme: Theme = {
     message: {
       fontWeight: '400',
     },
+    mutedStatus: {
+      height: 20,
+      iconStyle: {},
+      width: 20,
+    },
     row: {},
     title: {},
     unreadContainer: {},
@@ -825,7 +838,7 @@ export const defaultTheme: Theme = {
       deletedContainer: {},
       deletedContainerInner: {},
       deletedMetaText: {
-        paddingHorizontal: 10,
+        paddingHorizontal: 5,
       },
       deletedText: {
         em: {
@@ -884,27 +897,31 @@ 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: {
+      buttonContainer: {},
       cancel: {},
-      cancelContainer: {},
       container: {},
       giphy: {},
       giphyContainer: {},
+      giphyHeaderText: {},
+      giphyHeaderTitle: {},
       giphyMask: {},
-      giphyText: {},
+      giphyMaskText: {},
+      header: {},
       selectionContainer: {},
-      selector: {},
       send: {},
-      sendContainer: {},
-      shuffleButton: {},
+      shuffle: {},
       title: {},
     },
     pinnedHeader: {