stream-chat-react-native-core 4.7.0 → 4.7.1-beta.1

package/src/contexts/channelsContext/ChannelsContext.tsx

@@ -19,7 +19,10 @@ import type { EmptyStateProps } from '../../components/Indicators/EmptyStateIndi
 import type { LoadingErrorProps } from '../../components/Indicators/LoadingErrorIndicator';
 import type { LoadingProps } from '../../components/Indicators/LoadingIndicator';
 import type { DefaultStreamChatGenerics, UnknownType } from '../../types/types';
+import { DEFAULT_BASE_CONTEXT_VALUE } from '../utils/defaultBaseContextValue';
+
 import { getDisplayName } from '../utils/getDisplayName';
+import { isTestEnvironment } from '../utils/isTestEnvironment';
 
 export type ChannelsContextValue<
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
@@ -207,7 +210,9 @@ export type ChannelsContextValue<
   PreviewUnreadCount?: React.ComponentType<ChannelPreviewUnreadCountProps<StreamChatGenerics>>;
 };
 
-export const ChannelsContext = React.createContext({} as ChannelsContextValue);
+export const ChannelsContext = React.createContext(
+  DEFAULT_BASE_CONTEXT_VALUE as ChannelsContextValue,
+);
 
 export const ChannelsProvider = <
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
@@ -224,8 +229,19 @@ export const ChannelsProvider = <
 
 export const useChannelsContext = <
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
->() => useContext(ChannelsContext) as unknown as ChannelsContextValue<StreamChatGenerics>;
+>() => {
+  const contextValue = useContext(
+    ChannelsContext,
+  ) as unknown as ChannelsContextValue<StreamChatGenerics>;
 
+  if (contextValue === DEFAULT_BASE_CONTEXT_VALUE && !isTestEnvironment()) {
+    throw new Error(
+      `The useChannelsContext hook was called outside of the ChannelsContext provider. Make sure you have configured ChannelList component correctly - https://getstream.io/chat/docs/sdk/reactnative/basics/hello_stream_chat/#channel-list`,
+    );
+  }
+
+  return contextValue;
+};
 /**
  * Typescript currently does not support partial inference so if ChatContext
  * typing is desired while using the HOC withChannelContext the Props for the

package/src/contexts/channelsStateContext/ChannelsStateContext.tsx

@@ -15,7 +15,10 @@ import type { ChannelContextValue } from '../channelContext/ChannelContext';
 import type { PaginatedMessageListContextValue } from '../paginatedMessageListContext/PaginatedMessageListContext';
 import type { ThreadContextValue } from '../threadContext/ThreadContext';
 import type { TypingContextValue } from '../typingContext/TypingContext';
+import { DEFAULT_BASE_CONTEXT_VALUE } from '../utils/defaultBaseContextValue';
+
 import { getDisplayName } from '../utils/getDisplayName';
+import { isTestEnvironment } from '../utils/isTestEnvironment';
 
 export type ChannelState<
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
@@ -131,15 +134,9 @@ function reducer(state: ChannelsState, action: Action) {
   }
 }
 
-const ChannelsStateContext = React.createContext({
-  removeChannelState: () => {
-    // do nothing.
-  },
-  setState: () => {
-    // do nothing.
-  },
-  state: {},
-} as unknown as ChannelsStateContextValue);
+const ChannelsStateContext = React.createContext(
+  DEFAULT_BASE_CONTEXT_VALUE as ChannelsStateContextValue,
+);
 
 export const ChannelsStateProvider = <
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
@@ -187,7 +184,19 @@ export const ChannelsStateProvider = <
 
 export const useChannelsStateContext = <
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
->() => useContext(ChannelsStateContext) as unknown as ChannelsStateContextValue<StreamChatGenerics>;
+>() => {
+  const contextValue = useContext(
+    ChannelsStateContext,
+  ) as unknown as ChannelsStateContextValue<StreamChatGenerics>;
+
+  if (contextValue === DEFAULT_BASE_CONTEXT_VALUE && !isTestEnvironment()) {
+    throw new Error(
+      `The useChannelStateContext hook was called outside the ChannelStateContext Provider. Make sure you have configured OverlayProvider component correctly - https://getstream.io/chat/docs/sdk/reactnative/basics/hello_stream_chat/#overlay-provider`,
+    );
+  }
+
+  return contextValue;
+};
 
 export const withChannelsStateContext = <
   P extends UnknownType,

package/src/contexts/chatContext/ChatContext.tsx

@@ -3,7 +3,10 @@ import React, { PropsWithChildren, useContext } from 'react';
 import type { AppSettingsAPIResponse, Channel, Mute, StreamChat } from 'stream-chat';
 
 import type { DefaultStreamChatGenerics, UnknownType } from '../../types/types';
+import { DEFAULT_BASE_CONTEXT_VALUE } from '../utils/defaultBaseContextValue';
+
 import { getDisplayName } from '../utils/getDisplayName';
+import { isTestEnvironment } from '../utils/isTestEnvironment';
 
 export type ChatContextValue<
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
@@ -58,7 +61,7 @@ export type ChatContextValue<
   channel?: Channel<StreamChatGenerics>;
 };
 
-export const ChatContext = React.createContext({} as ChatContextValue);
+export const ChatContext = React.createContext(DEFAULT_BASE_CONTEXT_VALUE as ChatContextValue);
 
 export const ChatProvider = <
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
@@ -75,7 +78,17 @@ export const ChatProvider = <
 
 export const useChatContext = <
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
->() => useContext(ChatContext) as unknown as ChatContextValue<StreamChatGenerics>;
+>() => {
+  const contextValue = useContext(ChatContext) as unknown as ChatContextValue<StreamChatGenerics>;
+
+  if (contextValue === DEFAULT_BASE_CONTEXT_VALUE && !isTestEnvironment()) {
+    throw new Error(
+      `The useChatContext hook was called outside the ChatContext Provider. Make sure you have configured Chat component correctly - https://getstream.io/chat/docs/sdk/reactnative/basics/hello_stream_chat/#chat`,
+    );
+  }
+
+  return contextValue;
+};
 
 /**
  * Typescript currently does not support partial inference so if ChatContext

package/src/contexts/imageGalleryContext/ImageGalleryContext.tsx

@@ -2,7 +2,10 @@ import React, { PropsWithChildren, useContext, useState } from 'react';
 
 import type { MessageType } from '../../components/MessageList/hooks/useMessageList';
 import type { DefaultStreamChatGenerics, UnknownType } from '../../types/types';
+import { DEFAULT_BASE_CONTEXT_VALUE } from '../utils/defaultBaseContextValue';
+
 import { getDisplayName } from '../utils/getDisplayName';
+import { isTestEnvironment } from '../utils/isTestEnvironment';
 
 export type ImageGalleryContextValue<
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
@@ -13,8 +16,8 @@ export type ImageGalleryContextValue<
   image?: { messageId?: string; url?: string };
 };
 
-export const ImageGalleryContext = React.createContext<ImageGalleryContextValue>(
-  {} as ImageGalleryContextValue,
+export const ImageGalleryContext = React.createContext(
+  DEFAULT_BASE_CONTEXT_VALUE as ImageGalleryContextValue,
 );
 
 export const ImageGalleryProvider = <
@@ -43,7 +46,19 @@ export const ImageGalleryProvider = <
 
 export const useImageGalleryContext = <
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
->() => useContext(ImageGalleryContext) as unknown as ImageGalleryContextValue<StreamChatGenerics>;
+>() => {
+  const contextValue = useContext(
+    ImageGalleryContext,
+  ) as unknown as ImageGalleryContextValue<StreamChatGenerics>;
+
+  if (contextValue === DEFAULT_BASE_CONTEXT_VALUE && !isTestEnvironment()) {
+    throw new Error(
+      `The useImageGalleryContext hook was called outside the ImageGalleryContext Provider. Make sure you have configured OverlayProvider component correctly - https://getstream.io/chat/docs/sdk/reactnative/basics/hello_stream_chat/#overlay-provider`,
+    );
+  }
+
+  return contextValue as ImageGalleryContextValue<StreamChatGenerics>;
+};
 
 export const withImageGalleryContext = <
   P extends UnknownType,

package/src/contexts/keyboardContext/KeyboardContext.tsx

@@ -1,4 +1,5 @@
 import React, { useContext } from 'react';
+
 import { Keyboard } from 'react-native';
 
 import type { DefaultStreamChatGenerics } from '../../types/types';
@@ -8,7 +9,7 @@ export type KeyboardContextValue = {
   dismissKeyboard: () => void;
 };
 
-export const KeyboardContext = React.createContext<KeyboardContextValue>({
+export const KeyboardContext = React.createContext({
   dismissKeyboard: Keyboard.dismiss,
 });
 

package/src/contexts/messageContext/MessageContext.tsx

@@ -11,7 +11,10 @@ import type { GroupType, MessageType } from '../../components/MessageList/hooks/
 import type { ChannelContextValue } from '../../contexts/channelContext/ChannelContext';
 import type { MessageContentType } from '../../contexts/messagesContext/MessagesContext';
 import type { DefaultStreamChatGenerics, UnknownType } from '../../types/types';
+import { DEFAULT_BASE_CONTEXT_VALUE } from '../utils/defaultBaseContextValue';
+
 import { getDisplayName } from '../utils/getDisplayName';
+import { isTestEnvironment } from '../utils/isTestEnvironment';
 
 export type Alignment = 'right' | 'left';
 
@@ -102,7 +105,9 @@ export type MessageContextValue<
   showAvatar?: boolean;
 } & Pick<ChannelContextValue<StreamChatGenerics>, 'channel' | 'disabled' | 'members'>;
 
-export const MessageContext = React.createContext({} as MessageContextValue);
+export const MessageContext = React.createContext(
+  DEFAULT_BASE_CONTEXT_VALUE as MessageContextValue,
+);
 
 export const MessageProvider = <
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
@@ -119,7 +124,19 @@ export const MessageProvider = <
 
 export const useMessageContext = <
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
->() => useContext(MessageContext) as unknown as MessageContextValue<StreamChatGenerics>;
+>() => {
+  const contextValue = useContext(
+    MessageContext,
+  ) as unknown as MessageContextValue<StreamChatGenerics>;
+
+  if (contextValue === DEFAULT_BASE_CONTEXT_VALUE && !isTestEnvironment()) {
+    throw new Error(
+      `The useMessageContext hook was called outside of the MessageContext provider. Make sure you have configured MessageList component correctly - https://getstream.io/chat/docs/sdk/reactnative/basics/hello_stream_chat/#message-list`,
+    );
+  }
+
+  return contextValue;
+};
 
 /**
  * Typescript currently does not support partial inference so if MessageContext

package/src/contexts/messageInputContext/MessageInputContext.tsx

@@ -1,4 +1,5 @@
 import React, { PropsWithChildren, useContext, useEffect, useRef, useState } from 'react';
+
 import { Alert, Keyboard } from 'react-native';
 
 import type { TextInput, TextInputProps } from 'react-native';
@@ -52,7 +53,10 @@ import { useChatContext } from '../chatContext/ChatContext';
 import { useOwnCapabilitiesContext } from '../ownCapabilitiesContext/OwnCapabilitiesContext';
 import { useThreadContext } from '../threadContext/ThreadContext';
 import { useTranslationContext } from '../translationContext/TranslationContext';
+import { DEFAULT_BASE_CONTEXT_VALUE } from '../utils/defaultBaseContextValue';
+
 import { getDisplayName } from '../utils/getDisplayName';
+import { isTestEnvironment } from '../utils/isTestEnvironment';
 
 export type FileUpload = {
   file: File;
@@ -393,7 +397,9 @@ export type MessageInputContextValue<
 > = LocalMessageInputContext<StreamChatGenerics> &
   Omit<InputMessageInputContextValue<StreamChatGenerics>, 'sendMessage'>;
 
-export const MessageInputContext = React.createContext({} as MessageInputContextValue);
+export const MessageInputContext = React.createContext(
+  DEFAULT_BASE_CONTEXT_VALUE as MessageInputContextValue,
+);
 
 export const MessageInputProvider = <
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
@@ -1129,7 +1135,19 @@ export const MessageInputProvider = <
 
 export const useMessageInputContext = <
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
->() => useContext(MessageInputContext) as unknown as MessageInputContextValue<StreamChatGenerics>;
+>() => {
+  const contextValue = useContext(
+    MessageInputContext,
+  ) as unknown as MessageInputContextValue<StreamChatGenerics>;
+
+  if (contextValue === DEFAULT_BASE_CONTEXT_VALUE && !isTestEnvironment()) {
+    throw new Error(
+      `The useMessageInputContext hook was called outside of the MessageInputContext provider. Make sure you have configured Channel component correctly - https://getstream.io/chat/docs/sdk/reactnative/basics/hello_stream_chat/#channel`,
+    );
+  }
+
+  return contextValue;
+};
 
 /**
  * Typescript currently does not support partial inference so if MessageInputContext

package/src/contexts/messageOverlayContext/MessageOverlayContext.tsx

@@ -18,7 +18,10 @@ import type { ReactionData } from '../../utils/utils';
 import type { Alignment, MessageContextValue } from '../messageContext/MessageContext';
 import type { MessagesContextValue } from '../messagesContext/MessagesContext';
 import type { OwnCapabilitiesContextValue } from '../ownCapabilitiesContext/OwnCapabilitiesContext';
+import { DEFAULT_BASE_CONTEXT_VALUE } from '../utils/defaultBaseContextValue';
+
 import { getDisplayName } from '../utils/getDisplayName';
+import { isTestEnvironment } from '../utils/isTestEnvironment';
 
 export type MessageOverlayData<
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
@@ -71,7 +74,9 @@ export type MessageOverlayContextValue<
   data?: MessageOverlayData<StreamChatGenerics>;
 };
 
-export const MessageOverlayContext = React.createContext({} as MessageOverlayContextValue);
+export const MessageOverlayContext = React.createContext(
+  DEFAULT_BASE_CONTEXT_VALUE as MessageOverlayContextValue,
+);
 
 export const MessageOverlayProvider = <
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
@@ -91,8 +96,19 @@ export const MessageOverlayProvider = <
 
 export const useMessageOverlayContext = <
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
->() =>
-  useContext(MessageOverlayContext) as unknown as MessageOverlayContextValue<StreamChatGenerics>;
+>() => {
+  const contextValue = useContext(
+    MessageOverlayContext,
+  ) as unknown as MessageOverlayContextValue<StreamChatGenerics>;
+
+  if (contextValue === DEFAULT_BASE_CONTEXT_VALUE && !isTestEnvironment()) {
+    throw new Error(
+      `The useMessageOverlayContext hook was called outside the MessageOverlayContext Provider. Make sure you have configured OverlayProvider component correctly - https://getstream.io/chat/docs/sdk/reactnative/basics/hello_stream_chat/#overlay-provider`,
+    );
+  }
+
+  return contextValue;
+};
 
 /**
  * Typescript currently does not support partial inference so if MessageOverlayContext

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

@@ -1,4 +1,5 @@
 import React from 'react';
+
 import { Button, Text } from 'react-native';
 
 import { fireEvent, render, waitFor } from '@testing-library/react-native';

package/src/contexts/messagesContext/MessagesContext.tsx

@@ -49,7 +49,10 @@ 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 { DEFAULT_BASE_CONTEXT_VALUE } from '../utils/defaultBaseContextValue';
+
 import { getDisplayName } from '../utils/getDisplayName';
+import { isTestEnvironment } from '../utils/isTestEnvironment';
 
 export type MessageContentType = 'attachments' | 'files' | 'gallery' | 'quoted_reply' | 'text';
 
@@ -462,7 +465,9 @@ export type MessagesContextValue<
   targetedMessage?: string;
 };
 
-export const MessagesContext = React.createContext({} as MessagesContextValue);
+export const MessagesContext = React.createContext(
+  DEFAULT_BASE_CONTEXT_VALUE as MessagesContextValue,
+);
 
 export const MessagesProvider = <
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
@@ -479,7 +484,19 @@ export const MessagesProvider = <
 
 export const useMessagesContext = <
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
->() => useContext(MessagesContext) as unknown as MessagesContextValue<StreamChatGenerics>;
+>() => {
+  const contextValue = useContext(
+    MessagesContext,
+  ) as unknown as MessagesContextValue<StreamChatGenerics>;
+
+  if (contextValue === DEFAULT_BASE_CONTEXT_VALUE && !isTestEnvironment()) {
+    throw new Error(
+      `The useMessagesContext hook was called outside of the MessagesContext provider. Make sure you have configured MessageList component correctly - https://getstream.io/chat/docs/sdk/reactnative/basics/hello_stream_chat/#message-list`,
+    );
+  }
+
+  return contextValue;
+};
 
 /**
  * Typescript currently does not support partial inference so if MessagesContext

package/src/contexts/overlayContext/OverlayContext.tsx

@@ -13,7 +13,10 @@ import type { AttachmentPickerContextValue } from '../attachmentPickerContext/At
 import type { MessageOverlayContextValue } from '../messageOverlayContext/MessageOverlayContext';
 import type { DeepPartial } from '../themeContext/ThemeContext';
 import type { Theme } from '../themeContext/utils/theme';
+import { DEFAULT_BASE_CONTEXT_VALUE } from '../utils/defaultBaseContextValue';
+
 import { getDisplayName } from '../utils/getDisplayName';
+import { isTestEnvironment } from '../utils/isTestEnvironment';
 
 export type Overlay = 'alert' | 'gallery' | 'message' | 'none';
 
@@ -24,7 +27,9 @@ export type OverlayContextValue = {
   translucentStatusBar?: boolean;
 };
 
-export const OverlayContext = React.createContext<OverlayContextValue>({} as OverlayContextValue);
+export const OverlayContext = React.createContext(
+  DEFAULT_BASE_CONTEXT_VALUE as OverlayContextValue,
+);
 
 export type OverlayProviderProps<
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
@@ -73,7 +78,17 @@ export type OverlayProviderProps<
     value?: Partial<OverlayContextValue>;
   };
 
-export const useOverlayContext = () => useContext(OverlayContext);
+export const useOverlayContext = () => {
+  const contextValue = useContext(OverlayContext);
+
+  if (contextValue === DEFAULT_BASE_CONTEXT_VALUE && !isTestEnvironment()) {
+    throw new Error(
+      `The useOverlayContext hook was called outside the OverlayContext Provider. Make sure you have configured OverlayProvider component correctly - https://getstream.io/chat/docs/sdk/reactnative/basics/hello_stream_chat/#overlay-provider`,
+    );
+  }
+
+  return contextValue;
+};
 
 export const withOverlayContext = <
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,

package/src/contexts/overlayContext/OverlayProvider.tsx

@@ -1,4 +1,5 @@
 import React, { PropsWithChildren, useEffect, useRef, useState } from 'react';
+
 import { BackHandler, Dimensions, StyleSheet, ViewStyle } from 'react-native';
 
 import Animated, {

package/src/contexts/ownCapabilitiesContext/OwnCapabilitiesContext.tsx

@@ -1,5 +1,9 @@
 import React, { PropsWithChildren, useContext } from 'react';
 
+import { DEFAULT_BASE_CONTEXT_VALUE } from '../utils/defaultBaseContextValue';
+
+import { isTestEnvironment } from '../utils/isTestEnvironment';
+
 export const allOwnCapabilities = {
   banChannelMembers: 'ban-channel-members',
   deleteAnyMessage: 'delete-any-message',
@@ -21,7 +25,9 @@ export const allOwnCapabilities = {
 export type OwnCapability = keyof typeof allOwnCapabilities;
 
 export type OwnCapabilitiesContextValue = Record<OwnCapability, boolean>;
-export const OwnCapabilitiesContext = React.createContext({} as OwnCapabilitiesContextValue);
+export const OwnCapabilitiesContext = React.createContext(
+  DEFAULT_BASE_CONTEXT_VALUE as OwnCapabilitiesContextValue,
+);
 
 export const OwnCapabilitiesProvider = ({
   children,
@@ -34,5 +40,14 @@ export const OwnCapabilitiesProvider = ({
   </OwnCapabilitiesContext.Provider>
 );
 
-export const useOwnCapabilitiesContext = () =>
-  useContext(OwnCapabilitiesContext) as unknown as OwnCapabilitiesContextValue;
+export const useOwnCapabilitiesContext = () => {
+  const contextValue = useContext(OwnCapabilitiesContext);
+
+  if (contextValue === DEFAULT_BASE_CONTEXT_VALUE && !isTestEnvironment()) {
+    throw new Error(
+      `The useOwnCapabilitiesContext hook was called outside the Channel Component. Make sure you have configured Channel component correctly - https://getstream.io/chat/docs/sdk/reactnative/basics/hello_stream_chat/#channel`,
+    );
+  }
+
+  return contextValue;
+};

package/src/contexts/paginatedMessageListContext/PaginatedMessageListContext.tsx

@@ -3,7 +3,10 @@ import React, { PropsWithChildren, useContext } from 'react';
 import type { ChannelState } from 'stream-chat';
 
 import type { DefaultStreamChatGenerics, UnknownType } from '../../types/types';
+import { DEFAULT_BASE_CONTEXT_VALUE } from '../utils/defaultBaseContextValue';
+
 import { getDisplayName } from '../utils/getDisplayName';
+import { isTestEnvironment } from '../utils/isTestEnvironment';
 
 export type PaginatedMessageListContextValue<
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
@@ -43,7 +46,7 @@ export type PaginatedMessageListContextValue<
 };
 
 export const PaginatedMessageListContext = React.createContext(
-  {} as PaginatedMessageListContextValue,
+  DEFAULT_BASE_CONTEXT_VALUE as PaginatedMessageListContextValue,
 );
 
 export const PaginatedMessageListProvider = <
@@ -63,11 +66,20 @@ export const PaginatedMessageListProvider = <
 
 export const usePaginatedMessageListContext = <
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
->() =>
-  useContext(
+>() => {
+  const contextValue = useContext(
     PaginatedMessageListContext,
   ) as unknown as PaginatedMessageListContextValue<StreamChatGenerics>;
 
+  if (contextValue === DEFAULT_BASE_CONTEXT_VALUE && !isTestEnvironment()) {
+    throw new Error(
+      `The usePaginatedMessageListContext hook was called outside of the PaginatedMessageList provider. Make sure you have configured Channel component correctly - https://getstream.io/chat/docs/sdk/reactnative/basics/hello_stream_chat/#channel`,
+    );
+  }
+
+  return contextValue;
+};
+
 /**
  * Typescript currently does not support partial inference so if MessageListContextValue
  * typing is desired while using the HOC withMessageListContext the Props for the

package/src/contexts/suggestionsContext/SuggestionsContext.tsx

@@ -7,7 +7,10 @@ import type { AutoCompleteSuggestionItemProps } from '../../components/AutoCompl
 import type { AutoCompleteSuggestionListProps } from '../../components/AutoCompleteInput/AutoCompleteSuggestionList';
 import type { Emoji } from '../../emoji-data/compiled';
 import type { DefaultStreamChatGenerics, UnknownType } from '../../types/types';
+import { DEFAULT_BASE_CONTEXT_VALUE } from '../utils/defaultBaseContextValue';
+
 import { getDisplayName } from '../utils/getDisplayName';
+import { isTestEnvironment } from '../utils/isTestEnvironment';
 
 export type SuggestionComponentType = 'command' | 'emoji' | 'mention';
 
@@ -80,7 +83,9 @@ export type SuggestionsContextValue<
   suggestionsViewActive?: boolean;
 };
 
-export const SuggestionsContext = React.createContext({} as SuggestionsContextValue);
+export const SuggestionsContext = React.createContext(
+  DEFAULT_BASE_CONTEXT_VALUE as SuggestionsContextValue,
+);
 
 /**
  * This provider component exposes the properties stored within the SuggestionsContext.
@@ -130,7 +135,19 @@ export const SuggestionsProvider = <
 
 export const useSuggestionsContext = <
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
->() => useContext(SuggestionsContext) as unknown as SuggestionsContextValue<StreamChatGenerics>;
+>() => {
+  const contextValue = useContext(
+    SuggestionsContext,
+  ) as unknown as SuggestionsContextValue<StreamChatGenerics>;
+
+  if (contextValue === DEFAULT_BASE_CONTEXT_VALUE && !isTestEnvironment()) {
+    throw new Error(
+      `The useSuggestionsContext hook was called outside of the SuggestionsContext provider. Make sure you have configured Channel component correctly - https://getstream.io/chat/docs/sdk/reactnative/basics/hello_stream_chat/#channel`,
+    );
+  }
+
+  return contextValue;
+};
 
 export const withSuggestionsContext = <
   P extends UnknownType,

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

@@ -1,4 +1,5 @@
 import React from 'react';
+
 import { View } from 'react-native';
 
 import { cleanup, render, waitFor } from '@testing-library/react-native';

package/src/contexts/themeContext/ThemeContext.tsx

@@ -1,9 +1,12 @@
-import React, { useContext, useMemo } from 'react';
+import React, { PropsWithChildren, useContext, useMemo } from 'react';
 
 import merge from 'lodash/merge';
 
 import { defaultTheme, Theme } from './utils/theme';
 
+import { DEFAULT_BASE_CONTEXT_VALUE } from '../utils/defaultBaseContextValue';
+import { isTestEnvironment } from '../utils/isTestEnvironment';
+
 export type DeepPartial<T> = {
   [P in keyof T]?: DeepPartial<T[P]>;
 };
@@ -18,6 +21,10 @@ export type MergedThemesParams = {
   theme?: Theme;
 };
 
+export type ThemeContextValue = {
+  theme: Theme;
+};
+
 export const mergeThemes = (params: MergedThemesParams) => {
   const { style, theme } = params;
   const finalTheme = (
@@ -33,11 +40,13 @@ export const mergeThemes = (params: MergedThemesParams) => {
   return finalTheme;
 };
 
-export const ThemeContext = React.createContext({} as Theme);
+export const ThemeContext = React.createContext(DEFAULT_BASE_CONTEXT_VALUE as Theme);
+
+export const ThemeProvider: React.FC<
+  PropsWithChildren<ThemeProviderInputValue & Partial<ThemeContextValue>>
+> = (props) => {
+  const { children, mergedStyle, style, theme } = props;
 
-export const ThemeProvider: React.FC<ThemeProviderInputValue> = (props) => {
-  const { children, mergedStyle, style } = props;
-  const { theme } = useTheme();
   const modifiedTheme = useMemo(() => {
     if (mergedStyle) {
       return mergedStyle;
@@ -52,5 +61,10 @@ export const ThemeProvider: React.FC<ThemeProviderInputValue> = (props) => {
 export const useTheme = () => {
   const theme = useContext(ThemeContext);
 
+  if (theme === DEFAULT_BASE_CONTEXT_VALUE && !isTestEnvironment()) {
+    throw new Error(
+      `The useThemeContext hook was called outside the ThemeContext Provider. Make sure you have configured OverlayProvider component correctly - https://getstream.io/chat/docs/sdk/reactnative/basics/hello_stream_chat/#overlay-provider`,
+    );
+  }
   return { theme };
 };

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

@@ -377,6 +377,12 @@ export type Theme = {
         title: TextStyle;
       };
       noURI: ViewStyle;
+      playButtonStyle: {
+        durationTextStyle: TextStyle;
+        roundedView: ViewStyle;
+        videoContainer: ViewStyle;
+      };
+      playIcon: IconProps;
     };
     container: ViewStyle;
     content: {
@@ -859,6 +865,15 @@ export const defaultTheme: Theme = {
         borderLeftWidth: 2,
         paddingLeft: 8,
       },
+      playButtonStyle: {
+        durationTextStyle: {},
+        roundedView: {},
+        videoContainer: {},
+      },
+      playIcon: {
+        height: 24,
+        width: 24,
+      },
     },
     container: {},
     content: {