stream-chat-react-native-core 4.7.0-beta.6 → 4.7.1-beta.2

package/lib/module/contexts/utils/isTestEnvironment.js

@@ -0,0 +1,11 @@
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isTestEnvironment = void 0;
+
+var isTestEnvironment = function isTestEnvironment() {
+  return process.env.NODE_ENV === 'test';
+};
+
+exports.isTestEnvironment = isTestEnvironment;
+//# sourceMappingURL=isTestEnvironment.js.map

package/lib/module/contexts/utils/isTestEnvironment.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["isTestEnvironment.ts"],"names":["isTestEnvironment","process","env","NODE_ENV"],"mappings":";;;;;AAAO,IAAMA,iBAAiB,GAAG,SAApBA,iBAAoB;AAAA,SAAMC,OAAO,CAACC,GAAR,CAAYC,QAAZ,KAAyB,MAA/B;AAAA,CAA1B","sourcesContent":["export const isTestEnvironment = () => process.env.NODE_ENV === 'test';\n"]}

package/lib/module/mock-builders/mock.js

@@ -29,6 +29,9 @@ var setUser = function setUser(client, user) {
 };
 
 function mockClient(client) {
+  var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  var _options$disableAppSe = options.disableAppSettings,
+      disableAppSettings = _options$disableAppSe === void 0 ? true : _options$disableAppSe;
   jest.spyOn(client, '_setToken').mockImplementation();
   jest.spyOn(client, '_setupConnection').mockImplementation();
   client.tokenManager = {
@@ -40,31 +43,53 @@ function mockClient(client) {
     })
   };
   client.setUser = setUser.bind(null, client);
+
+  if (disableAppSettings) {
+    client.getAppSettings = jest.fn(function () {
+      return {};
+    });
+  }
+
   return client;
 }
 
 var getTestClient = function getTestClient() {
-  return mockClient(new _streamChat.StreamChat(apiKey));
+  var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return mockClient(new _streamChat.StreamChat(apiKey), options);
 };
 
 exports.getTestClient = getTestClient;
 
 var getTestClientWithUser = function () {
   var _ref = (0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee(user) {
-    var client;
+    var options,
+        _options$disableAppSe2,
+        disableAppSettings,
+        client,
+        _args = arguments;
+
     return _regenerator["default"].wrap(function _callee$(_context) {
       while (1) {
         switch (_context.prev = _context.next) {
           case 0:
+            options = _args.length > 1 && _args[1] !== undefined ? _args[1] : {};
+            _options$disableAppSe2 = options.disableAppSettings, disableAppSettings = _options$disableAppSe2 === void 0 ? true : _options$disableAppSe2;
             client = mockClient(new _streamChat.StreamChat(apiKey));
-            _context.next = 3;
+            _context.next = 5;
             return setUser(client, user);
 
-          case 3:
+          case 5:
             client.wsPromise = Promise.resolve();
+
+            if (disableAppSettings) {
+              client.getAppSettings = jest.fn(function () {
+                return {};
+              });
+            }
+
             return _context.abrupt("return", client);
 
-          case 5:
+          case 8:
           case "end":
             return _context.stop();
         }

package/lib/module/mock-builders/mock.js.map

@@ -1 +1 @@
-{"version":3,"sources":["mock.js"],"names":["apiKey","token","setUser","client","user","Promise","resolve","connectionId","mutes","_user","userID","id","userToken","mockClient","jest","spyOn","mockImplementation","tokenManager","getToken","fn","tokenReady","bind","getTestClient","StreamChat","getTestClientWithUser","wsPromise","getRandomInt","min","max","Math","ceil","floor","random"],"mappings":";;;;;;;;;;;;;AAGA;;AAEA,IAAMA,MAAM,GAAG,SAAf;AACA,IAAMC,KAAK,GAAG,aAAd;;AAEA,IAAMC,OAAO,GAAG,SAAVA,OAAU,CAACC,MAAD,EAASC,IAAT;AAAA,SACd,IAAIC,OAAJ,CAAY,UAACC,OAAD,EAAa;AACvBH,IAAAA,MAAM,CAACI,YAAP,GAAsB,oBAAtB;AACAJ,IAAAA,MAAM,CAACC,IAAP,GAAcA,IAAd;AACAD,IAAAA,MAAM,CAACC,IAAP,CAAYI,KAAZ,GAAoB,EAApB;AACAL,IAAAA,MAAM,CAACM,KAAP,iCAAoBL,IAApB;AACAD,IAAAA,MAAM,CAACO,MAAP,GAAgBN,IAAI,CAACO,EAArB;AACAR,IAAAA,MAAM,CAACS,SAAP,GAAmBX,KAAnB;AACAK,IAAAA,OAAO;AACR,GARD,CADc;AAAA,CAAhB;;AAWA,SAASO,UAAT,CAAoBV,MAApB,EAA4B;AAC1BW,EAAAA,IAAI,CAACC,KAAL,CAAWZ,MAAX,EAAmB,WAAnB,EAAgCa,kBAAhC;AACAF,EAAAA,IAAI,CAACC,KAAL,CAAWZ,MAAX,EAAmB,kBAAnB,EAAuCa,kBAAvC;AACAb,EAAAA,MAAM,CAACc,YAAP,GAAsB;AACpBC,IAAAA,QAAQ,EAAEJ,IAAI,CAACK,EAAL,CAAQ;AAAA,aAAMlB,KAAN;AAAA,KAAR,CADU;AAEpBmB,IAAAA,UAAU,EAAEN,IAAI,CAACK,EAAL,CAAQ;AAAA,aAAM,IAAN;AAAA,KAAR;AAFQ,GAAtB;AAIAhB,EAAAA,MAAM,CAACD,OAAP,GAAiBA,OAAO,CAACmB,IAAR,CAAa,IAAb,EAAmBlB,MAAnB,CAAjB;AACA,SAAOA,MAAP;AACD;;AAEM,IAAMmB,aAAa,GAAG,SAAhBA,aAAgB;AAAA,SAAMT,UAAU,CAAC,IAAIU,sBAAJ,CAAevB,MAAf,CAAD,CAAhB;AAAA,CAAtB;;;;AAEA,IAAMwB,qBAAqB;AAAA,6EAAG,iBAAOpB,IAAP;AAAA;AAAA;AAAA;AAAA;AAAA;AAC7BD,YAAAA,MAD6B,GACpBU,UAAU,CAAC,IAAIU,sBAAJ,CAAevB,MAAf,CAAD,CADU;AAAA;AAAA,mBAE7BE,OAAO,CAACC,MAAD,EAASC,IAAT,CAFsB;;AAAA;AAGnCD,YAAAA,MAAM,CAACsB,SAAP,GAAmBpB,OAAO,CAACC,OAAR,EAAnB;AAHmC,6CAI5BH,MAJ4B;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAAH;;AAAA,kBAArBqB,qBAAqB;AAAA;AAAA;AAAA,GAA3B;;;;AAOA,IAAME,YAAY,GAAG,SAAfA,YAAe,CAACC,GAAD,EAAMC,GAAN,EAAc;AACxCD,EAAAA,GAAG,GAAGE,IAAI,CAACC,IAAL,CAAUH,GAAV,CAAN;AACAC,EAAAA,GAAG,GAAGC,IAAI,CAACE,KAAL,CAAWH,GAAX,CAAN;AACA,SAAOC,IAAI,CAACE,KAAL,CAAWF,IAAI,CAACG,MAAL,MAAiBJ,GAAG,GAAGD,GAAvB,CAAX,IAA0CA,GAAjD;AACD,CAJM","sourcesContent":["/* eslint no-underscore-dangle: 0 */\n/* eslint no-param-reassign: 0 */\n\nimport { StreamChat } from 'stream-chat';\n\nconst apiKey = 'API_KEY';\nconst token = 'dummy_token';\n\nconst setUser = (client, user) =>\n  new Promise((resolve) => {\n    client.connectionId = 'dumm_connection_id';\n    client.user = user;\n    client.user.mutes = [];\n    client._user = { ...user };\n    client.userID = user.id;\n    client.userToken = token;\n    resolve();\n  });\n\nfunction mockClient(client) {\n  jest.spyOn(client, '_setToken').mockImplementation();\n  jest.spyOn(client, '_setupConnection').mockImplementation();\n  client.tokenManager = {\n    getToken: jest.fn(() => token),\n    tokenReady: jest.fn(() => true),\n  };\n  client.setUser = setUser.bind(null, client);\n  return client;\n}\n\nexport const getTestClient = () => mockClient(new StreamChat(apiKey));\n\nexport const getTestClientWithUser = async (user) => {\n  const client = mockClient(new StreamChat(apiKey));\n  await setUser(client, user);\n  client.wsPromise = Promise.resolve();\n  return client;\n};\n\nexport const getRandomInt = (min, max) => {\n  min = Math.ceil(min);\n  max = Math.floor(max);\n  return Math.floor(Math.random() * (max - min)) + min; // The maximum is exclusive and the minimum is inclusive\n};\n"]}
+{"version":3,"sources":["mock.js"],"names":["apiKey","token","setUser","client","user","Promise","resolve","connectionId","mutes","_user","userID","id","userToken","mockClient","options","disableAppSettings","jest","spyOn","mockImplementation","tokenManager","getToken","fn","tokenReady","bind","getAppSettings","getTestClient","StreamChat","getTestClientWithUser","wsPromise","getRandomInt","min","max","Math","ceil","floor","random"],"mappings":"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","sourcesContent":["/* eslint no-underscore-dangle: 0 */\n/* eslint no-param-reassign: 0 */\n\nimport { StreamChat } from 'stream-chat';\n\nconst apiKey = 'API_KEY';\nconst token = 'dummy_token';\n\nconst setUser = (client, user) =>\n  new Promise((resolve) => {\n    client.connectionId = 'dumm_connection_id';\n    client.user = user;\n    client.user.mutes = [];\n    client._user = { ...user };\n    client.userID = user.id;\n    client.userToken = token;\n    resolve();\n  });\n\nfunction mockClient(client, options = {}) {\n  const { disableAppSettings = true } = options;\n\n  jest.spyOn(client, '_setToken').mockImplementation();\n  jest.spyOn(client, '_setupConnection').mockImplementation();\n  client.tokenManager = {\n    getToken: jest.fn(() => token),\n    tokenReady: jest.fn(() => true),\n  };\n  client.setUser = setUser.bind(null, client);\n\n  if (disableAppSettings) {\n    client.getAppSettings = jest.fn(() => ({}));\n  }\n\n  return client;\n}\n\nexport const getTestClient = (options = {}) => mockClient(new StreamChat(apiKey), options);\n\nexport const getTestClientWithUser = async (user, options = {}) => {\n  const { disableAppSettings = true } = options;\n  const client = mockClient(new StreamChat(apiKey));\n  await setUser(client, user);\n  client.wsPromise = Promise.resolve();\n\n  if (disableAppSettings) {\n    client.getAppSettings = jest.fn(() => ({}));\n  }\n\n  return client;\n};\n\nexport const getRandomInt = (min, max) => {\n  min = Math.ceil(min);\n  max = Math.floor(max);\n  return Math.floor(Math.random() * (max - min)) + min; // The maximum is exclusive and the minimum is inclusive\n};\n"]}

package/lib/module/version.json

@@ -1,3 +1,3 @@
 {
-  "version": "4.7.0-beta.6"
+  "version": "4.7.1-beta.2"
 }

package/lib/typescript/contexts/__tests__/index.test.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/typescript/contexts/keyboardContext/KeyboardContext.d.ts

@@ -3,9 +3,13 @@ import type { DefaultStreamChatGenerics } from '../../types/types';
 export declare type KeyboardContextValue = {
     dismissKeyboard: () => void;
 };
-export declare const KeyboardContext: React.Context<KeyboardContextValue>;
+export declare const KeyboardContext: React.Context<{
+    dismissKeyboard: () => void;
+}>;
 export declare const KeyboardProvider: React.FC<{
     value: KeyboardContextValue;
 }>;
-export declare const useKeyboardContext: () => KeyboardContextValue;
+export declare const useKeyboardContext: () => {
+    dismissKeyboard: () => void;
+};
 export declare const withKeyboardContext: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(Component: React.ComponentType<StreamChatGenerics>) => React.FC<Omit<StreamChatGenerics, "dismissKeyboard">>;

package/lib/typescript/contexts/themeContext/ThemeContext.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { PropsWithChildren } from 'react';
 import { Theme } from './utils/theme';
 export declare type DeepPartial<T> = {
     [P in keyof T]?: DeepPartial<T[P]>;
@@ -11,9 +11,12 @@ export declare type MergedThemesParams = {
     style?: DeepPartial<Theme>;
     theme?: Theme;
 };
+export declare type ThemeContextValue = {
+    theme: Theme;
+};
 export declare const mergeThemes: (params: MergedThemesParams) => Theme;
 export declare const ThemeContext: React.Context<Theme>;
-export declare const ThemeProvider: React.FC<ThemeProviderInputValue>;
+export declare const ThemeProvider: React.FC<PropsWithChildren<ThemeProviderInputValue & Partial<ThemeContextValue>>>;
 export declare const useTheme: () => {
     theme: Theme;
 };

package/lib/typescript/contexts/themeContext/utils/theme.d.ts

@@ -373,6 +373,12 @@ export declare type Theme = {
                 title: TextStyle;
             };
             noURI: ViewStyle;
+            playButtonStyle: {
+                durationTextStyle: TextStyle;
+                roundedView: ViewStyle;
+                videoContainer: ViewStyle;
+            };
+            playIcon: IconProps;
         };
         container: ViewStyle;
         content: {

package/lib/typescript/contexts/utils/defaultBaseContextValue.d.ts

@@ -0,0 +1 @@
+export declare const DEFAULT_BASE_CONTEXT_VALUE: {};

package/lib/typescript/contexts/utils/isTestEnvironment.d.ts

@@ -0,0 +1 @@
+export declare const isTestEnvironment: () => boolean;

package/lib/typescript/mock-builders/mock.d.ts

@@ -1,3 +1,3 @@
-export function getTestClient(): any;
-export function getTestClientWithUser(user: any): Promise<any>;
+export function getTestClient(options?: {}): any;
+export function getTestClientWithUser(user: any, options?: {}): Promise<any>;
 export function getRandomInt(min: any, max: any): any;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "stream-chat-react-native-core",
   "description": "The official React Native and Expo components for Stream Chat, a service for building chat applications",
-  "version": "4.7.0-beta.6",
+  "version": "4.7.1-beta.2",
   "author": {
     "company": "Stream.io Inc",
     "name": "Stream.io Inc"

package/src/components/Attachment/Card.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import {
-  Image,
+  ImageBackground,
   ImageStyle,
   StyleProp,
   StyleSheet,
@@ -24,6 +24,7 @@ import {
   useMessagesContext,
 } from '../../contexts/messagesContext/MessagesContext';
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
+import { Play } from '../../icons/Play';
 import type { DefaultStreamChatGenerics } from '../../types/types';
 import { makeImageCompatibleUrl } from '../../utils/utils';
 
@@ -41,13 +42,15 @@ const styles = StyleSheet.create({
   },
   authorNameMask: {
     bottom: 0,
-    left: 8,
+    left: 2,
     position: 'absolute',
   },
   cardCover: {
+    alignItems: 'center',
     borderRadius: 8,
     height: 140,
-    marginHorizontal: 8,
+    justifyContent: 'center',
+    marginHorizontal: 2,
   },
   cardFooter: {
     flexDirection: 'row',
@@ -62,6 +65,14 @@ const styles = StyleSheet.create({
     fontSize: 12,
     marginHorizontal: 8,
   },
+  playButtonStyle: {
+    alignItems: 'center',
+    borderRadius: 50,
+    elevation: 2,
+    height: 36,
+    justifyContent: 'center',
+    width: 36,
+  },
   title: {
     fontSize: 12,
     marginHorizontal: 8,
@@ -116,11 +127,12 @@ const CardWithContext = <
     text,
     thumb_url,
     title,
+    type,
   } = props;
 
   const {
     theme: {
-      colors: { accent_blue, black, blue_alice, transparent },
+      colors: { accent_blue, black, blue_alice, transparent, white },
       messageSimple: {
         card: {
           authorName,
@@ -132,6 +144,8 @@ const CardWithContext = <
           cover,
           footer: { description, title: titleStyle, ...footerStyle },
           noURI,
+          playButtonStyle: { roundedView },
+          playIcon: { height, width },
         },
       },
     },
@@ -141,6 +155,8 @@ const CardWithContext = <
 
   const defaultOnPress = () => openUrlSafely(og_scrape_url || uri);
 
+  const isVideoCard = type === 'video' && og_scrape_url;
+
   return (
     <TouchableOpacity
       disabled={preventPress}
@@ -181,11 +197,18 @@ const CardWithContext = <
       {CardCover && <CardCover {...props} />}
       {uri && !CardCover && (
         <View>
-          <Image
+          <ImageBackground
+            imageStyle={styles.cardCover}
             resizeMode='cover'
             source={{ uri: makeImageCompatibleUrl(uri) }}
             style={[styles.cardCover, cover, stylesProp.cardCover]}
-          />
+          >
+            {isVideoCard ? (
+              <View style={[styles.playButtonStyle, roundedView, { backgroundColor: white }]}>
+                <Play height={height} pathFill={black} width={width} />
+              </View>
+            ) : null}
+          </ImageBackground>
           {author_name && (
             <View style={[styles.authorNameMask, authorNameMask, stylesProp.authorNameMask]}>
               <View

package/src/components/Attachment/__tests__/Attachment.test.js

@@ -8,7 +8,6 @@ import { ThemeProvider } from '../../../contexts/themeContext/ThemeContext';
 import {
   generateAttachmentAction,
   generateAudioAttachment,
-  generateCardAttachment,
   generateFileAttachment,
   generateImageAttachment,
 } from '../../../mock-builders/generator/attachment';
@@ -107,17 +106,4 @@ describe('Attachment', () => {
       expect(handleAction).toHaveBeenCalledTimes(2);
     });
   });
-
-  it('should render "Card" if attachment type is not recognized', async () => {
-    const { getByTestId } = render(
-      getAttachmentComponent({
-        attachment: generateCardAttachment({
-          type: Date.now().toString(),
-        }),
-      }),
-    );
-    await waitFor(() => {
-      expect(getByTestId('card-attachment')).toBeTruthy();
-    });
-  });
 });

package/src/components/Attachment/__tests__/Giphy.test.js

@@ -251,10 +251,12 @@ describe('Giphy', () => {
       </OverlayProvider>,
     );
 
-    expect(queryByTestId('giphy-action-attachment')).toBeTruthy();
-    expect(getByTestId('cancel-action-button')).toBeTruthy();
-    expect(getByTestId('shuffle-action-button')).toBeTruthy();
-    expect(getByTestId('send-action-button')).toBeTruthy();
+    await waitFor(() => {
+      expect(queryByTestId('giphy-action-attachment')).toBeTruthy();
+      expect(getByTestId('cancel-action-button')).toBeTruthy();
+      expect(getByTestId('shuffle-action-button')).toBeTruthy();
+      expect(getByTestId('send-action-button')).toBeTruthy();
+    });
   });
 
   it('giphy attachment UI should render within the message list', async () => {
@@ -285,6 +287,8 @@ describe('Giphy', () => {
       </OverlayProvider>,
     );
 
-    expect(queryByTestId('giphy-attachment')).toBeTruthy();
+    await waitFor(() => {
+      expect(queryByTestId('giphy-attachment')).toBeTruthy();
+    });
   });
 });

package/src/components/AutoCompleteInput/AutoCompleteSuggestionList.tsx

@@ -197,6 +197,7 @@ export const AutoCompleteSuggestionList = <
 ) => {
   const { AutoCompleteSuggestionHeader, AutoCompleteSuggestionItem } =
     useSuggestionsContext<StreamChatGenerics>();
+
   return (
     <MemoizedAutoCompleteSuggestionList
       {...{ AutoCompleteSuggestionHeader, AutoCompleteSuggestionItem }}

package/src/components/ImageGallery/components/__tests__/ImageGalleryHeader.test.tsx

@@ -4,13 +4,13 @@ import { useSharedValue } from 'react-native-reanimated';
 
 import { renderHook } from '@testing-library/react-hooks';
 
-import { render } from '@testing-library/react-native';
+import { render, waitFor } from '@testing-library/react-native';
 
 import { ThemeProvider } from '../../../../contexts/themeContext/ThemeContext';
 
 import { ImageGalleryHeader } from '../ImageGalleryHeader';
 
-it('doesnt fail if fromNow is not available on first render', () => {
+it('doesnt fail if fromNow is not available on first render', async () => {
   try {
     let sharedValueOpacity: Animated.SharedValue<number>;
     let sharedValueVisible: Animated.SharedValue<number>;
@@ -32,7 +32,9 @@ it('doesnt fail if fromNow is not available on first render', () => {
         />
       </ThemeProvider>,
     );
-    expect(getAllByText('Unknown User')).toBeTruthy();
+    await waitFor(() => {
+      expect(getAllByText('Unknown User')).toBeTruthy();
+    });
   } catch (error: unknown) {
     if (error instanceof Error) {
       throw new Error(`Error encountered on first render of ImageGalleryHeader: ${error.message}`);

package/src/components/MessageInput/SendMessageDisallowedIndicator.tsx

@@ -27,6 +27,7 @@ export const SendMessageDisallowedIndicator = () => {
       },
     },
   } = useTheme();
+
   return (
     <View
       style={[

package/src/components/MessageInput/__tests__/FileUploadPreview.test.js

@@ -256,7 +256,7 @@ describe('FileUploadPreview', () => {
       generateFileUploadPreview({ id: 'file-upload-id-1', state: FileState.UPLOADING }),
       generateFileUploadPreview({ id: 'file-upload-id-2', state: FileState.UPLOADED }),
       generateFileUploadPreview({ id: 'file-upload-id-3', state: FileState.UPLOAD_FAILED }),
-      generateFileUploadPreview({ id: 'file-upload-id-3', state: FileState.NOT_SUPPORTED }),
+      generateFileUploadPreview({ id: 'file-upload-id-4', state: FileState.NOT_SUPPORTED }),
     ];
     const removeFile = jest.fn();
     const uploadFile = jest.fn();

package/src/components/Reply/Reply.tsx

@@ -88,12 +88,15 @@ const getMessageType = <
 
   const isLastAttachmentVideo = lastAttachment.type === 'video';
 
-  const isLastAttachmentGiphy = lastAttachment.type === 'giphy' || lastAttachment.type === 'imgur';
+  const isLastAttachmentGiphy =
+    lastAttachment?.type === 'giphy' || lastAttachment?.type === 'imgur';
 
   const isLastAttachmentImageOrGiphy =
-    lastAttachment.type === 'image' && !lastAttachment.title_link && !lastAttachment.og_scrape_url;
+    lastAttachment?.type === 'image' &&
+    !lastAttachment?.title_link &&
+    !lastAttachment?.og_scrape_url;
 
-  const isLastAttachmentImage = lastAttachment.image_url || lastAttachment.thumb_url;
+  const isLastAttachmentImage = lastAttachment?.image_url || lastAttachment?.thumb_url;
 
   if (isLastAttachmentFile) {
     messageType = 'file';

package/src/contexts/__tests__/index.test.tsx

@@ -0,0 +1,103 @@
+import React from 'react';
+import { View } from 'react-native';
+
+import { render } from '@testing-library/react-native';
+
+import {
+  useAttachmentPickerContext,
+  useChannelContext,
+  useChannelsContext,
+  useChatContext,
+  useImageGalleryContext,
+  useMessageContext,
+  useMessageOverlayContext,
+  useMessagesContext,
+  useOverlayContext,
+  useOwnCapabilitiesContext,
+  usePaginatedMessageListContext,
+  useSuggestionsContext,
+  useTheme,
+  useThreadContext,
+  useTypingContext,
+} from '../';
+import { useChannelsStateContext } from '../channelsStateContext/ChannelsStateContext';
+
+jest.mock('../utils/isTestEnvironment', () => ({ isTestEnvironment: jest.fn(() => false) }));
+console.error = jest.fn();
+describe('contexts hooks in a component throws an error with message when not wrapped in a provider', () => {
+  const TestComponent = ({ useContextHook }: { useContextHook(): void }) => {
+    useContextHook();
+    return <View />;
+  };
+
+  it.each([
+    [
+      useOverlayContext,
+      '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',
+    ],
+    [
+      usePaginatedMessageListContext,
+      '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',
+    ],
+    [
+      useChannelsStateContext,
+      `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`,
+    ],
+    [
+      useOwnCapabilitiesContext,
+      `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`,
+    ],
+    [
+      useSuggestionsContext,
+      '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',
+    ],
+    [
+      useTypingContext,
+      `The useTypingContext hook was called outside of the TypingContext provider. Make sure you have configured Channel component correctly - https://getstream.io/chat/docs/sdk/reactnative/basics/hello_stream_chat/#channel`,
+    ],
+    [
+      useTheme,
+      `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`,
+    ],
+    [
+      useChannelContext,
+      `The useChannelContext hook was called outside of the ChannelContext provider. Make sure you have configured Channel component correctly - https://getstream.io/chat/docs/sdk/reactnative/basics/hello_stream_chat/#channel`,
+    ],
+    [
+      useChannelsContext,
+      `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`,
+    ],
+    [
+      useChatContext,
+      `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`,
+    ],
+    [
+      useImageGalleryContext,
+      `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`,
+    ],
+    [
+      useMessageContext,
+      `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`,
+    ],
+    [
+      useMessageOverlayContext,
+      `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`,
+    ],
+    [
+      useMessagesContext,
+      `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`,
+    ],
+    [
+      useThreadContext,
+      `The useThreadContext hook was called outside of the ThreadContext provider. Make sure you have configured Channel component correctly - https://getstream.io/chat/docs/sdk/reactnative/basics/hello_stream_chat/#channel`,
+    ],
+    [
+      useAttachmentPickerContext,
+      `The useAttachmentPickerContext hook was called outside the AttachmentPickerContext provider. Make sure you have configured OverlayProvider component correctly - https://getstream.io/chat/docs/sdk/reactnative/basics/hello_stream_chat/#overlay-provider`,
+    ],
+  ])('calls %p results in error %p', (useContextHook, expectedErrorMessage) => {
+    expect(() => render(<TestComponent useContextHook={useContextHook} />)).toThrowError(
+      expectedErrorMessage,
+    );
+  });
+});

package/src/contexts/activeChannelsRefContext/ActiveChannelsRefContext.tsx

@@ -1,6 +1,7 @@
 import React, { PropsWithChildren, useContext } from 'react';
 
 import type { UnknownType } from '../../types/types';
+
 import { getDisplayName } from '../utils/getDisplayName';
 
 type ActiveChannels = React.MutableRefObject<string[]>;

package/src/contexts/attachmentPickerContext/AttachmentPickerContext.tsx

@@ -1,7 +1,10 @@
 import React, { PropsWithChildren, useContext, useEffect, useState } from 'react';
 
 import type { Asset, DefaultStreamChatGenerics, File } from '../../types/types';
+import { DEFAULT_BASE_CONTEXT_VALUE } from '../utils/defaultBaseContextValue';
+
 import { getDisplayName } from '../utils/getDisplayName';
+import { isTestEnvironment } from '../utils/isTestEnvironment';
 
 export type AttachmentPickerIconProps = {
   numberOfImageUploads: number;
@@ -55,8 +58,8 @@ export type AttachmentPickerContextValue = {
   selectedPicker?: 'images';
 };
 
-export const AttachmentPickerContext = React.createContext<AttachmentPickerContextValue>(
-  {} as AttachmentPickerContextValue,
+export const AttachmentPickerContext = React.createContext(
+  DEFAULT_BASE_CONTEXT_VALUE as AttachmentPickerContextValue,
 );
 
 export const AttachmentPickerProvider = ({
@@ -118,8 +121,19 @@ export const AttachmentPickerProvider = ({
   );
 };
 
-export const useAttachmentPickerContext = () =>
-  useContext(AttachmentPickerContext) as unknown as AttachmentPickerContextValue;
+export const useAttachmentPickerContext = () => {
+  const contextValue = useContext(
+    AttachmentPickerContext,
+  ) as unknown as AttachmentPickerContextValue;
+
+  if (contextValue === DEFAULT_BASE_CONTEXT_VALUE && !isTestEnvironment()) {
+    throw new Error(
+      `The useAttachmentPickerContext hook was called outside the AttachmentPickerContext 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 withAttachmentPickerContext = <
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,

package/src/contexts/channelContext/ChannelContext.tsx

@@ -5,7 +5,10 @@ import type { Channel, ChannelState } from 'stream-chat';
 import type { EmptyStateProps } from '../../components/Indicators/EmptyStateIndicator';
 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 ChannelContextValue<
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
@@ -167,7 +170,9 @@ export type ChannelContextValue<
   watcherCount?: ChannelState<StreamChatGenerics>['watcher_count'];
 };
 
-export const ChannelContext = React.createContext({} as ChannelContextValue);
+export const ChannelContext = React.createContext(
+  DEFAULT_BASE_CONTEXT_VALUE as ChannelContextValue,
+);
 
 export const ChannelProvider = <
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
@@ -184,8 +189,19 @@ export const ChannelProvider = <
 
 export const useChannelContext = <
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
->() => useContext(ChannelContext) as unknown as ChannelContextValue<StreamChatGenerics>;
+>() => {
+  const contextValue = useContext(
+    ChannelContext,
+  ) as unknown as ChannelContextValue<StreamChatGenerics>;
 
+  if (contextValue === DEFAULT_BASE_CONTEXT_VALUE && !isTestEnvironment()) {
+    throw new Error(
+      `The useChannelContext hook was called outside of the ChannelContext 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 ChatContext
  * typing is desired while using the HOC withChannelContext the Props for the