stream-chat-react-native-core 5.27.0-beta.9 → 5.27.1-beta.1

package/src/contexts/messageInputContext/__tests__/sendMessageAsync.test.tsx

@@ -1,7 +1,10 @@
 import React, { PropsWithChildren } from 'react';
 import { act } from 'react-test-renderer';
 
-import { renderHook } from '@testing-library/react-hooks';
+import { renderHook, waitFor } from '@testing-library/react-native';
+
+import { generateMessage } from '../../../mock-builders/generator/message';
+import { generateUser } from '../../../mock-builders/generator/user';
 
 import type { DefaultStreamChatGenerics } from '../../../types/types';
 import { FileState } from '../../../utils/utils';
@@ -30,6 +33,9 @@ const Wrapper = <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultS
   </MessageInputProvider>
 );
 
+const user1 = generateUser();
+const message = generateMessage({ user: user1 });
+const newMessage = generateMessage({ id: 'new-id' });
 describe("MessageInputContext's sendMessageAsync", () => {
   it('sendMessageAsync returns undefined when image state is UPLOAD_FAILED', () => {
     const asyncUploads = {
@@ -38,19 +44,19 @@ describe("MessageInputContext's sendMessageAsync", () => {
         url: 'https://www.test.com',
       },
     };
-
+    const initialProps = {
+      editing: message,
+    };
     const { rerender, result } = renderHook(() => useMessageInputContext(), {
-      initialProps: {
-        editing: true,
-      },
-      wrapper: Wrapper,
+      initialProps,
+      wrapper: (props) => <Wrapper editing={initialProps.editing} {...props} />,
     });
 
     act(() => {
       result.current.setAsyncUploads(asyncUploads);
     });
 
-    rerender({ editing: false });
+    rerender({ editing: newMessage });
 
     let data;
     act(() => {
@@ -62,7 +68,7 @@ describe("MessageInputContext's sendMessageAsync", () => {
 
   it.each([[FileState.UPLOADED], [FileState.FINISHED]])(
     'sendImageAsync is been called with %s file upload state and checked for snapshot)',
-    (fileState) => {
+    async (fileState) => {
       const sendMessageMock = jest.fn();
       const asyncUploads = {
         'test-file': {
@@ -70,22 +76,30 @@ describe("MessageInputContext's sendMessageAsync", () => {
           url: 'https://www.test.com',
         },
       };
+      const initialProps = {
+        editing: message,
+        quotedMessage: false,
+        sendMessage: sendMessageMock,
+      };
       const { rerender, result } = renderHook(() => useMessageInputContext(), {
-        initialProps: {
-          editing: true,
-          quotedMessage: false,
-          sendMessage: sendMessageMock,
-        },
-        wrapper: Wrapper,
+        initialProps,
+        wrapper: (props) => (
+          <Wrapper
+            editing={initialProps.editing}
+            quotedMessage={initialProps.quotedMessage}
+            sendMessage={initialProps.sendMessage}
+            {...props}
+          />
+        ),
       });
 
-      act(() => {
+      await waitFor(() => {
         result.current.setAsyncUploads(asyncUploads);
       });
 
-      rerender({ editing: false, quotedMessage: false, sendMessage: sendMessageMock });
+      rerender({ editing: newMessage, quotedMessage: false, sendMessage: sendMessageMock });
 
-      act(() => {
+      await waitFor(() => {
         result.current.sendMessageAsync('test-file');
       });
 
@@ -93,7 +107,7 @@ describe("MessageInputContext's sendMessageAsync", () => {
     },
   );
 
-  it('sendMessageAsync goes to catch block', () => {
+  it('sendMessageAsync goes to catch block', async () => {
     const sendMessageMock = jest.fn();
     const asyncUploads = {
       'test-file': {
@@ -101,21 +115,28 @@ describe("MessageInputContext's sendMessageAsync", () => {
         url: 'https://www.test.com',
       },
     };
+    const initialProps = {
+      editing: message,
+      quotedMessage: false,
+    };
     const { rerender, result } = renderHook(() => useMessageInputContext(), {
-      initialProps: {
-        editing: true,
-        quotedMessage: false,
-      },
-      wrapper: Wrapper,
+      initialProps,
+      wrapper: (props) => (
+        <Wrapper
+          editing={initialProps.editing}
+          quotedMessage={initialProps.quotedMessage}
+          {...props}
+        />
+      ),
     });
 
     act(() => {
       result.current.setAsyncUploads(asyncUploads);
     });
 
-    rerender({ editing: false, quotedMessage: false });
+    rerender({ editing: newMessage, quotedMessage: false });
 
-    act(() => {
+    await waitFor(() => {
       result.current.sendMessageAsync('test-file');
     });
 

package/src/contexts/messageInputContext/__tests__/updateMessage.test.tsx

@@ -1,7 +1,7 @@
 import React, { PropsWithChildren } from 'react';
 import { act } from 'react-test-renderer';
 
-import { renderHook } from '@testing-library/react-hooks';
+import { renderHook } from '@testing-library/react-native';
 
 import type { StreamChat } from 'stream-chat';
 
@@ -18,6 +18,8 @@ import {
   useMessageInputContext,
 } from '../MessageInputContext';
 
+const message = generateMessage({});
+
 type WrapperType<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> =
   Partial<InputMessageInputContextValue<StreamChatGenerics>>;
 
@@ -29,7 +31,7 @@ const Wrapper = <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultS
     value={
       {
         client: {
-          updateMessage: jest.fn().mockResolvedValue({ message: generateMessage() }),
+          updateMessage: jest.fn().mockResolvedValue({ message }),
         } as unknown as StreamChat<StreamChatGenerics>,
       } as ChatContextValue<StreamChatGenerics>
     }
@@ -51,6 +53,7 @@ describe("MessageInputContext's updateMessage", () => {
   const generatedMessage: boolean | MessageType<DefaultStreamChatGenerics> = generateMessage({
     created_at: 'Sat Jul 02 2022 23:55:13 GMT+0530 (India Standard Time)',
     id: '7a85f744-cc89-4f82-a1d4-5456432cc8bf',
+    text: 'hey',
     updated_at: 'Sat Jul 02 2022 23:55:13 GMT+0530 (India Standard Time)',
     user: generateUser({
       id: '5d6f6322-567e-4e1e-af90-97ef1ed5cc23',
@@ -60,11 +63,12 @@ describe("MessageInputContext's updateMessage", () => {
   }) as unknown as MessageType<DefaultStreamChatGenerics>;
 
   it('updateMessage throws error as clearEditingState is not available', async () => {
+    const initialProps = {
+      editing: generatedMessage,
+    };
     const { result } = renderHook(() => useMessageInputContext(), {
-      initialProps: {
-        editing: generatedMessage,
-      },
-      wrapper: Wrapper,
+      initialProps,
+      wrapper: (props) => <Wrapper editing={initialProps.editing} {...props} />,
     });
 
     await act(async () => {
@@ -75,12 +79,19 @@ describe("MessageInputContext's updateMessage", () => {
   });
 
   it('updateMessage throws error as client.updateMessage is available', async () => {
+    const initialProps = {
+      clearEditingState: clearEditingStateMock,
+      editing: generatedMessage,
+    };
     const { result } = renderHook(() => useMessageInputContext(), {
-      initialProps: {
-        clearEditingState: clearEditingStateMock,
-        editing: generatedMessage,
-      },
-      wrapper: Wrapper,
+      initialProps,
+      wrapper: (props) => (
+        <Wrapper
+          clearEditingState={initialProps.clearEditingState}
+          editing={initialProps.editing}
+          {...props}
+        />
+      ),
     });
 
     await act(async () => {

package/src/contexts/messageInputContext/__tests__/uploadFile.test.tsx

@@ -1,11 +1,11 @@
 import React, { PropsWithChildren } from 'react';
 import { act } from 'react-test-renderer';
 
-import { renderHook } from '@testing-library/react-hooks';
-
-import { waitFor } from '@testing-library/react-native';
+import { renderHook, waitFor } from '@testing-library/react-native';
 
 import { generateFileUploadPreview } from '../../../mock-builders/generator/attachment';
+import { generateMessage } from '../../../mock-builders/generator/message';
+import { generateUser } from '../../../mock-builders/generator/user';
 import type { DefaultStreamChatGenerics } from '../../../types/types';
 import {
   InputMessageInputContextValue,
@@ -17,6 +17,9 @@ import {
 type WrapperType<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> =
   Partial<InputMessageInputContextValue<StreamChatGenerics>>;
 
+const user1 = generateUser();
+const message = generateMessage({ user: user1 });
+
 const Wrapper = <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>({
   children,
   ...rest
@@ -40,12 +43,19 @@ describe("MessageInputContext's uploadFile", () => {
       },
       thumb_url: '',
     });
+    const initialProps = {
+      doDocUploadRequest: doDocUploadRequestMock,
+      editing: message,
+    };
     const { result } = renderHook(() => useMessageInputContext(), {
-      initialProps: {
-        doDocUploadRequest: doDocUploadRequestMock,
-        editing: true,
-      },
-      wrapper: Wrapper,
+      initialProps,
+      wrapper: (props) => (
+        <Wrapper
+          doDocUploadRequest={initialProps.doDocUploadRequest}
+          editing={initialProps.editing}
+          {...props}
+        />
+      ),
     });
 
     await waitFor(() => {
@@ -63,12 +73,19 @@ describe("MessageInputContext's uploadFile", () => {
 
   it('uploadFile catch block gets executed', async () => {
     const doDocUploadRequestMock = jest.fn().mockResolvedValue(new Error('This is an error'));
+    const initialProps = {
+      doDocUploadRequest: doDocUploadRequestMock,
+      editing: message,
+    };
     const { result } = renderHook(() => useMessageInputContext(), {
-      initialProps: {
-        doDocUploadRequest: doDocUploadRequestMock,
-        editing: true,
-      },
-      wrapper: Wrapper,
+      initialProps,
+      wrapper: (props) => (
+        <Wrapper
+          doDocUploadRequest={initialProps.doDocUploadRequest}
+          editing={initialProps.editing}
+          {...props}
+        />
+      ),
     });
 
     await waitFor(() => {

package/src/contexts/messageInputContext/__tests__/uploadImage.test.tsx

@@ -1,9 +1,10 @@
 import React, { PropsWithChildren } from 'react';
-import { act } from 'react-test-renderer';
 
-import { renderHook } from '@testing-library/react-hooks';
+import { renderHook, waitFor } from '@testing-library/react-native';
 
 import { generateImageUploadPreview } from '../../../mock-builders/generator/attachment';
+import { generateMessage } from '../../../mock-builders/generator/message';
+import { generateUser } from '../../../mock-builders/generator/user';
 import type { DefaultStreamChatGenerics } from '../../../types/types';
 import {
   InputMessageInputContextValue,
@@ -30,6 +31,8 @@ const Wrapper = <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultS
   </MessageInputProvider>
 );
 
+const user1 = generateUser();
+const message = generateMessage({ user: user1 });
 describe("MessageInputContext's uploadImage", () => {
   it('uploadImage works', async () => {
     const doImageUploadRequestMock = jest
@@ -38,16 +41,22 @@ describe("MessageInputContext's uploadImage", () => {
 
     const initialProps = {
       doImageUploadRequest: doImageUploadRequestMock,
-      editing: true,
+      editing: message,
     };
 
     const { result } = renderHook(() => useMessageInputContext(), {
       initialProps,
-      wrapper: Wrapper,
+      wrapper: (props) => (
+        <Wrapper
+          doImageUploadRequest={initialProps.doImageUploadRequest}
+          editing={initialProps.editing}
+          {...props}
+        />
+      ),
     });
 
-    await act(async () => {
-      await result.current.uploadImage({ newImage: generateImageUploadPreview() });
+    await waitFor(() => {
+      result.current.uploadImage({ newImage: generateImageUploadPreview() });
     });
 
     expect(doImageUploadRequestMock).toHaveBeenCalledTimes(1);

package/src/contexts/messageInputContext/__tests__/useMessageDetailsForState.test.tsx

@@ -1,6 +1,6 @@
-import { renderHook } from '@testing-library/react-hooks';
-import type { MessageType } from 'src/components';
-import type { DefaultStreamChatGenerics } from 'src/types/types';
+import { renderHook } from '@testing-library/react-native';
+
+import type { MessageType } from '../../../components';
 
 import {
   generateFileAttachment,
@@ -9,6 +9,7 @@ import {
 import { generateMessage } from '../../../mock-builders/generator/message';
 
 import { generateUser } from '../../../mock-builders/generator/user';
+import type { DefaultStreamChatGenerics } from '../../../types/types';
 import { useMessageDetailsForState } from '../hooks/useMessageDetailsForState';
 
 describe('useMessageDetailsForState', () => {

package/src/contexts/messageInputContext/hooks/useCreateMessageInputContext.ts

@@ -97,11 +97,12 @@ export const useCreateMessageInputContext = <
   UploadProgressIndicator,
 }: MessageInputContextValue<StreamChatGenerics> &
   Pick<ThreadContextValue<StreamChatGenerics>, 'thread'>) => {
-  const editingdep = typeof editing === 'boolean' ? editing : editing?.id;
+  const editingdep = editing?.id;
   const fileUploadsValue = fileUploads
     .map(({ duration, paused, progress, state }) => `${state},${paused},${progress},${duration}`)
     .join();
   const imageUploadsValue = imageUploads.map(({ state }) => state).join();
+  const asyncUploadsValue = Object.keys(asyncUploads).join();
   const mentionedUsersLength = mentionedUsers.length;
   const quotedMessageId = quotedMessage
     ? typeof quotedMessage === 'boolean'
@@ -109,6 +110,7 @@ export const useCreateMessageInputContext = <
       : quotedMessage.id
     : '';
   const threadId = thread?.id;
+  const asyncIdsLength = asyncIds.length;
 
   const messageInputContext: MessageInputContextValue<StreamChatGenerics> = useMemo(
     () => ({
@@ -201,6 +203,8 @@ export const useCreateMessageInputContext = <
       UploadProgressIndicator,
     }),
     [
+      asyncIdsLength,
+      asyncUploadsValue,
       cooldownEndsAt,
       disabled,
       editingdep,

package/src/contexts/messageOverlayContext/MessageOverlayContext.tsx

@@ -119,8 +119,12 @@ export const useMessageOverlayContext = <
 };
 
 /**
- * Typescript currently does not support partial inference so if MessageOverlayContext
- * typing is desired while using the HOC withMessageOverlayContextContext the Props for the
+ * @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 withMessageOverlayContext the Props for the
  * wrapped component must be provided as the first generic.
  */
 export const withMessageOverlayContext = <
@@ -128,7 +132,7 @@ export const withMessageOverlayContext = <
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
   Component: React.ComponentType<P>,
-): React.FC<Omit<P, keyof MessageOverlayContextValue<StreamChatGenerics>>> => {
+): React.ComponentType<Omit<P, keyof MessageOverlayContextValue<StreamChatGenerics>>> => {
   const WithMessageOverlayContextComponent = (
     props: Omit<P, keyof MessageOverlayContextValue<StreamChatGenerics>>,
   ) => {

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

@@ -2,7 +2,7 @@ import React from 'react';
 
 import { Button, Text } from 'react-native';
 
-import { fireEvent, render, waitFor } from '@testing-library/react-native';
+import { render, screen, userEvent, waitFor } from '@testing-library/react-native';
 
 import { useResettableState } from './useResettableState';
 
@@ -35,13 +35,14 @@ const waitForOptions = {
 };
 
 test('useResettableState can be reset to its initial state', async () => {
-  const { getByTestId } = render(<TestComponent />);
+  const user = userEvent.setup();
+  render(<TestComponent />);
 
-  await waitFor(() => expect(getByTestId('value').children[0]).toBe('0'), waitForOptions);
+  await waitFor(() => expect(screen.getByTestId('value').children[0]).toBe('0'), waitForOptions);
 
-  fireEvent.press(getByTestId('increment'));
-  await waitFor(() => expect(getByTestId('value').children[0]).toBe('1'), waitForOptions);
+  user.press(screen.getByTestId('increment'));
+  await waitFor(() => expect(screen.getByTestId('value').children[0]).toBe('1'), waitForOptions);
 
-  fireEvent.press(getByTestId('reset'));
-  await waitFor(() => expect(getByTestId('value').children[0]).toBe('0'), waitForOptions);
+  user.press(screen.getByTestId('reset'));
+  await waitFor(() => expect(screen.getByTestId('value').children[0]).toBe('0'), waitForOptions);
 });

package/src/contexts/messagesContext/MessagesContext.tsx

@@ -44,6 +44,7 @@ import type { InlineDateSeparatorProps } from '../../components/MessageList/Inli
 import type { MessageListProps } from '../../components/MessageList/MessageList';
 import type { MessageSystemProps } from '../../components/MessageList/MessageSystem';
 import type { ScrollToBottomButtonProps } from '../../components/MessageList/ScrollToBottomButton';
+import { TypingIndicatorContainerProps } from '../../components/MessageList/TypingIndicatorContainer';
 import type { getGroupStyles } from '../../components/MessageList/utils/getGroupStyles';
 import type { MessageActionType } from '../../components/MessageOverlay/MessageActionListItem';
 import type { OverlayReactionListProps } from '../../components/MessageOverlay/OverlayReactionList';
@@ -251,7 +252,7 @@ export type MessagesContextValue<
    * UI component for TypingIndicatorContainer
    * Defaults to: [TypingIndicatorContainer](https://getstream.io/chat/docs/sdk/reactnative/contexts/messages-context/#typingindicatorcontainer)
    */
-  TypingIndicatorContainer: React.ComponentType;
+  TypingIndicatorContainer: React.ComponentType<TypingIndicatorContainerProps>;
   updateMessage: (
     updatedMessage: MessageResponse<StreamChatGenerics>,
     extraState?: {
@@ -533,7 +534,11 @@ export const useMessagesContext = <
 };
 
 /**
- * Typescript currently does not support partial inference so if MessagesContext
+ * @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 withMessagesContext the Props for the
  * wrapped component must be provided as the first generic.
  */
@@ -542,7 +547,7 @@ export const withMessagesContext = <
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
   Component: React.ComponentType<P>,
-): React.FC<Omit<P, keyof MessagesContextValue<StreamChatGenerics>>> => {
+): React.ComponentType<Omit<P, keyof MessagesContextValue<StreamChatGenerics>>> => {
   const WithMessagesContextComponent = (
     props: Omit<P, keyof MessagesContextValue<StreamChatGenerics>>,
   ) => {

package/src/contexts/overlayContext/OverlayContext.tsx

@@ -91,11 +91,20 @@ export const useOverlayContext = () => {
   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 withOverlayContext the Props for the
+ * wrapped component must be provided as the first generic.
+ */
 export const withOverlayContext = <
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
   Component: React.ComponentType<StreamChatGenerics>,
-): React.FC<Omit<StreamChatGenerics, keyof OverlayContextValue>> => {
+): React.ComponentType<Omit<StreamChatGenerics, keyof OverlayContextValue>> => {
   const WithOverlayContextComponent = (
     props: Omit<StreamChatGenerics, keyof OverlayContextValue>,
   ) => {

package/src/contexts/overlayContext/OverlayProvider.tsx

@@ -65,7 +65,6 @@ export const OverlayProvider = <
 ) => {
   const bottomSheetCloseTimeoutRef = useRef<NodeJS.Timeout>();
   const {
-    autoPlayVideo,
     AttachmentPickerBottomSheetHandle = DefaultAttachmentPickerBottomSheetHandle,
     attachmentPickerBottomSheetHandleHeight,
     attachmentPickerBottomSheetHeight,
@@ -73,8 +72,9 @@ export const OverlayProvider = <
     attachmentPickerErrorButtonText,
     AttachmentPickerErrorImage = DefaultAttachmentPickerErrorImage,
     attachmentPickerErrorText,
-    attachmentSelectionBarHeight,
     AttachmentPickerIOSSelectMorePhotos = DefaultAttachmentPickerIOSSelectMorePhotos,
+    attachmentSelectionBarHeight,
+    autoPlayVideo,
     bottomInset,
     CameraSelectorIcon = DefaultCameraSelectorIcon,
     children,
@@ -118,11 +118,11 @@ export const OverlayProvider = <
         console.warn('bottom and top insets must be set for the image picker to work correctly');
       }
     },
-    topInset,
-    translucentStatusBar,
     OverlayReactionList,
     OverlayReactions,
     OverlayReactionsAvatar,
+    topInset,
+    translucentStatusBar,
     value,
   } = props;
 

package/src/contexts/paginatedMessageListContext/PaginatedMessageListContext.tsx

@@ -85,8 +85,12 @@ export const usePaginatedMessageListContext = <
 };
 
 /**
- * Typescript currently does not support partial inference so if MessageListContextValue
- * typing is desired while using the HOC withMessageListContext the Props for the
+ * @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 withPaginatedMessageListContext the Props for the
  * wrapped component must be provided as the first generic.
  */
 export const withPaginatedMessageListContext = <
@@ -94,7 +98,7 @@ export const withPaginatedMessageListContext = <
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
   Component: React.ComponentType<P>,
-): React.FC<Omit<P, keyof PaginatedMessageListContextValue<StreamChatGenerics>>> => {
+): React.ComponentType<Omit<P, keyof PaginatedMessageListContextValue<StreamChatGenerics>>> => {
   const WithPaginatedMessageListContextComponent = (
     props: Omit<P, keyof PaginatedMessageListContextValue<StreamChatGenerics>>,
   ) => {

package/src/contexts/suggestionsContext/SuggestionsContext.tsx

@@ -149,12 +149,21 @@ export const useSuggestionsContext = <
   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 withSuggestionsContext the Props for the
+ * wrapped component must be provided as the first generic.
+ */
 export const withSuggestionsContext = <
   P extends UnknownType,
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
   Component: React.ComponentType<P>,
-): React.FC<Omit<P, keyof SuggestionsContextValue<StreamChatGenerics>>> => {
+): React.ComponentType<Omit<P, keyof SuggestionsContextValue<StreamChatGenerics>>> => {
   const WithSuggestionsContextComponent = (
     props: Omit<P, keyof SuggestionsContextValue<StreamChatGenerics>>,
   ) => {

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

@@ -1,5 +1,5 @@
-import type { ImageStyle, TextStyle, ViewStyle } from 'react-native';
-import type { CircleProps, Color, StopProps } from 'react-native-svg';
+import type { ColorValue, ImageStyle, TextStyle, ViewStyle } from 'react-native';
+import type { CircleProps, StopProps } from 'react-native-svg';
 
 import type { IconProps } from '../../../icons/utils/base';
 
@@ -127,7 +127,7 @@ export type Theme = {
     gradientStart: StopProps;
     gradientStop: StopProps;
     height: number;
-    maskFillColor?: Color;
+    maskFillColor?: ColorValue;
   };
   channelPreview: {
     checkAllIcon: IconProps;
@@ -268,7 +268,7 @@ export type Theme = {
     };
     imageUploadPreview: {
       dismiss: ViewStyle;
-      dismissIconColor: Color;
+      dismissIconColor: ColorValue;
       flatList: ViewStyle;
       itemContainer: ViewStyle;
       upload: ImageStyle;
@@ -353,7 +353,7 @@ export type Theme = {
       unreadCountNotificationContainer: ViewStyle;
       unreadCountNotificationText: TextStyle;
       wrapper: ViewStyle;
-      chevronColor?: Color;
+      chevronColor?: ColorValue;
     };
     typingIndicatorContainer: ViewStyle;
   };
@@ -478,7 +478,7 @@ export type Theme = {
     };
     reactionList: {
       container: ViewStyle;
-      iconFillColor: Color;
+      iconFillColor: ColorValue;
       middleIcon: ViewStyle;
       radius: number;
       reactionBubble: ViewStyle;
@@ -529,12 +529,14 @@ export type Theme = {
       radius: number;
       reactionBubble: ViewStyle;
       reactionBubbleBackground: ViewStyle;
+      reactionBubbleBorderRadius: number;
       title: TextStyle;
     };
     reactionsList: {
       radius: number;
       reaction: ViewStyle;
       reactionList: ViewStyle;
+      reactionListBorderRadius: number;
       reactionSize: number;
     };
   };
@@ -557,6 +559,7 @@ export type Theme = {
       text: TextStyle;
       backgroundGradientStart?: string;
       backgroundGradientStop?: string;
+      threadHeight?: number;
     };
   };
   typingIndicator: {
@@ -1076,12 +1079,14 @@ export const defaultTheme: Theme = {
       radius: 2,
       reactionBubble: {},
       reactionBubbleBackground: {},
+      reactionBubbleBorderRadius: 24,
       title: {},
     },
     reactionsList: {
       radius: 2.5,
       reaction: {},
       reactionList: {},
+      reactionListBorderRadius: 24,
       reactionSize: 24,
     },
   },