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

package/src/components/Attachment/Gallery.tsx

@@ -5,6 +5,8 @@ import { buildGallery } from './utils/buildGallery/buildGallery';
 
 import { getGalleryImageBorderRadius } from './utils/getGalleryImageBorderRadius';
 
+import { openUrlSafely } from './utils/openUrlSafely';
+
 import type { MessageType } from '../../components/MessageList/hooks/useMessageList';
 import {
   ImageGalleryContextValue,
@@ -23,6 +25,7 @@ import {
   useOverlayContext,
 } from '../../contexts/overlayContext/OverlayContext';
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
+import { isVideoPackageAvailable } from '../../native';
 import type { DefaultStreamChatGenerics } from '../../types/types';
 import { getUrlWithoutParams, makeImageCompatibleUrl } from '../../utils/utils';
 
@@ -205,11 +208,11 @@ const GalleryWithContext = <
             testID={`gallery-${invertedDirections ? 'row' : 'column'}-${colIndex}`}
           >
             {rows.map(({ height, resizeMode, type, url, width }, rowIndex) => {
-              const defaultOnPress = () => {
-                // Added if-else to keep the logic readable, instead of DRY.
-                // if - legacyImageViewerSwipeBehaviour is disabled
-                // else - legacyImageViewerSwipeBehaviour is enabled
+              const openImageViewer = () => {
                 if (!legacyImageViewerSwipeBehaviour && message) {
+                  // Added if-else to keep the logic readable, instead of DRY.
+                  // if - legacyImageViewerSwipeBehaviour is disabled
+                  // else - legacyImageViewerSwipeBehaviour is enabled
                   setImages([message]);
                   setImage({ messageId: message.id, url });
                   setOverlay('gallery');
@@ -219,6 +222,16 @@ const GalleryWithContext = <
                 }
               };
 
+              const defaultOnPress = () => {
+                if (type === 'video' && !isVideoPackageAvailable()) {
+                  // This condition is kinda unreachable, since we render videos as file attachment if the video
+                  // library is not installed. But doesn't hurt to have extra safeguard, in case of some customizations.
+                  openUrlSafely(url);
+                } else {
+                  openImageViewer();
+                }
+              };
+
               const borderRadius = getGalleryImageBorderRadius({
                 alignment,
                 colIndex,

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

@@ -1,8 +1,5 @@
 import React from 'react';
 
-import { Linking } from 'react-native';
-
-import { act, renderHook } from '@testing-library/react-hooks';
 import { fireEvent, render, waitFor } from '@testing-library/react-native';
 import { v4 as uuidv4 } from 'uuid';
 
@@ -11,14 +8,12 @@ import { ThemeProvider } from '../../../contexts/themeContext/ThemeContext';
 import {
   generateAttachmentAction,
   generateAudioAttachment,
-  generateCardAttachment,
   generateFileAttachment,
   generateImageAttachment,
 } from '../../../mock-builders/generator/attachment';
 import { generateMessage } from '../../../mock-builders/generator/message';
 import { Attachment } from '../Attachment';
 import { AttachmentActions } from '../AttachmentActions';
-import { useGoToURL } from '../hooks/useGoToURL';
 
 const getAttachmentComponent = (props) => {
   const message = generateMessage();
@@ -111,52 +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();
-    });
-  });
-
-  it('should open the URL in the browser', async () => {
-    jest.spyOn(Linking, 'canOpenURL').mockImplementation(jest.fn().mockResolvedValue(true));
-
-    jest.spyOn(Linking, 'openURL').mockImplementation(jest.fn().mockResolvedValue(false));
-
-    const { result, waitFor } = renderHook(() => useGoToURL('www.google.com'));
-
-    const [error, openURL] = result.current;
-
-    await act(openURL);
-
-    await waitFor(() => {
-      expect(Linking.canOpenURL).toHaveBeenCalled();
-      expect(error).not.toBeTruthy();
-      expect(Linking.openURL).toHaveBeenCalled();
-    });
-  });
-
-  it('should open the URL in the browser when no url', async () => {
-    jest.spyOn(Linking, 'canOpenURL').mockImplementation(jest.fn().mockResolvedValue(false));
-
-    jest.spyOn(Linking, 'openURL').mockImplementation(jest.fn().mockResolvedValue(true));
-
-    const { result, waitForNextUpdate } = await renderHook(() => useGoToURL());
-    const [error, openURL] = result.current;
-
-    act(openURL);
-
-    await waitForNextUpdate(() => {
-      expect(Linking.canOpenURL).toHaveBeenCalled();
-      expect(error).toBeTruthy();
-      expect(Linking.openURL).not.toHaveBeenCalled();
-    });
-  });
 });

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/Attachment/__tests__/openUrlSafely.test.ts

@@ -0,0 +1,48 @@
+import { Linking } from 'react-native';
+
+import { waitFor } from '@testing-library/react-native';
+
+import { openUrlSafely } from '../utils/openUrlSafely';
+
+describe('openUrlSafely', () => {
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('should open a valid url', async () => {
+    jest.spyOn(Linking, 'canOpenURL').mockImplementation(jest.fn().mockResolvedValue(true));
+    jest.spyOn(Linking, 'openURL').mockImplementation(jest.fn());
+
+    const url = 'https://www.google.com';
+    await openUrlSafely(url);
+    await waitFor(() => {
+      expect(Linking.canOpenURL).toHaveBeenCalled();
+      expect(Linking.openURL).toHaveBeenCalled();
+    });
+  });
+
+  it('should not call openUrl if url is not supported', async () => {
+    jest.spyOn(Linking, 'canOpenURL').mockImplementation(jest.fn().mockResolvedValue(false));
+    jest.spyOn(Linking, 'openURL').mockImplementation(jest.fn());
+
+    Linking.openURL = jest.fn();
+    const url = 'basjkdbkjasbdkjabskdjabsjkdbasjkda---asdkjasjkdabsk';
+    await openUrlSafely(url);
+    await waitFor(() => {
+      expect(Linking.canOpenURL).toHaveBeenCalled();
+      expect(Linking.openURL).not.toHaveBeenCalled();
+    });
+  });
+
+  it('should append http if missing', async () => {
+    jest.spyOn(Linking, 'canOpenURL').mockImplementation(jest.fn());
+    jest.spyOn(Linking, 'openURL').mockImplementation(jest.fn());
+
+    Linking.openURL = jest.fn();
+    const url = 'google.com';
+    await openUrlSafely(url);
+    await waitFor(() => {
+      expect(Linking.canOpenURL).toHaveBeenCalledWith('http://google.com');
+    });
+  });
+});

package/src/components/Attachment/utils/openUrlSafely.ts

@@ -0,0 +1,17 @@
+import { Linking } from 'react-native';
+
+export const openUrlSafely = async (url?: string) => {
+  let finalUrl = url as string;
+  const pattern = new RegExp(/^\S+:\/\//);
+
+  if (!pattern.test(finalUrl)) {
+    finalUrl = 'http://' + url;
+  }
+  const supported = await Linking.canOpenURL(finalUrl);
+
+  if (supported) {
+    Linking.openURL(finalUrl);
+  } else {
+    console.warn(`Don't know how to open URI: ${finalUrl}`);
+  }
+};

package/src/components/AttachmentPicker/AttachmentPicker.tsx

@@ -26,7 +26,7 @@ import type { AttachmentPickerErrorProps } from './components/AttachmentPickerEr
 import { useAttachmentPickerContext } from '../../contexts/attachmentPickerContext/AttachmentPickerContext';
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { Recorder } from '../../icons';
-import { getPhotos } from '../../native';
+import { getLocalAssetUri, getPhotos } from '../../native';
 import type { Asset, File } from '../../types/types';
 import { vh, vw } from '../../utils/utils';
 
@@ -109,7 +109,9 @@ const AttachmentVideo: React.FC<AttachmentVideoProps> = (props) => {
 
   const size = vw(100) / (numberOfAttachmentPickerImageColumns || 3) - 2;
 
-  const onPressVideo = () => {
+  const onPressVideo = async () => {
+    // For the case of expo messaging app where you need to fetch the asset uri from asset id
+    const localAssetURI = asset.id && (await getLocalAssetUri(asset.id));
     if (selected) {
       setSelectedFiles((files) => files.filter((file) => file.uri !== asset.uri));
     } else {
@@ -125,7 +127,7 @@ const AttachmentVideo: React.FC<AttachmentVideoProps> = (props) => {
             name: asset.filename,
             size: asset.fileSize,
             type: 'video',
-            uri: asset.uri,
+            uri: localAssetURI || asset.uri,
           },
         ];
       });

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/ImageGallery.tsx

@@ -55,7 +55,12 @@ import {
   useOverlayContext,
 } from '../../contexts/overlayContext/OverlayContext';
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
-import type { VideoPayloadData, VideoProgressData, VideoType } from '../../native';
+import {
+  isVideoPackageAvailable,
+  VideoPayloadData,
+  VideoProgressData,
+  VideoType,
+} from '../../native';
 import type { DefaultStreamChatGenerics } from '../../types/types';
 import { getResizedImageUrl } from '../../utils/getResizedImageUrl';
 import { getUrlOfImageAttachment } from '../../utils/getUrlOfImageAttachment';
@@ -252,7 +257,6 @@ export const ImageGallery = <
    */
 
   const photos = images.reduce((acc: Photo<StreamChatGenerics>[], cur) => {
-    console.log(cur);
     const attachmentImages =
       cur.attachments?.filter(
         (attachment) =>
@@ -264,7 +268,7 @@ export const ImageGallery = <
             !attachment.title_link &&
             !attachment.og_scrape_url &&
             getUrlOfImageAttachment(attachment)) ||
-          attachment.type === 'video',
+          (isVideoPackageAvailable() && attachment.type === 'video'),
       ) || [];
 
     const attachmentPhotos = attachmentImages.map((a) => {

package/src/components/ImageGallery/components/AnimatedGalleryVideo.tsx

@@ -4,6 +4,7 @@ import type { StyleProp } from 'react-native';
 import Animated, { useAnimatedStyle } from 'react-native-reanimated';
 
 import {
+  isVideoPackageAvailable,
   PlaybackStatus,
   Video,
   VideoPayloadData,
@@ -173,19 +174,21 @@ export const AnimatedGalleryVideo: React.FC<Props> = React.memo(
           },
         ]}
       >
-        <Video
-          onBuffer={onBuffer}
-          onEnd={onEnd}
-          onLoad={onLoad}
-          onLoadStart={onLoadStart}
-          onPlaybackStatusUpdate={onPlayBackStatusUpdate}
-          onProgress={onProgress}
-          paused={paused}
-          resizeMode='cover'
-          style={style}
-          uri={source.uri}
-          videoRef={videoRef}
-        />
+        {isVideoPackageAvailable() && (
+          <Video
+            onBuffer={onBuffer}
+            onEnd={onEnd}
+            onLoad={onLoad}
+            onLoadStart={onLoadStart}
+            onPlaybackStatusUpdate={onPlayBackStatusUpdate}
+            onProgress={onProgress}
+            paused={paused}
+            resizeMode='contain'
+            style={style}
+            uri={source.uri}
+            videoRef={videoRef}
+          />
+        )}
         <Animated.View
           style={[
             styles.activityIndicator,

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/Message/Message.tsx

@@ -42,7 +42,7 @@ import {
   useTranslationContext,
 } from '../../contexts/translationContext/TranslationContext';
 
-import { triggerHaptic } from '../../native';
+import { isVideoPackageAvailable, triggerHaptic } from '../../native';
 import type { DefaultStreamChatGenerics } from '../../types/types';
 import { emojiRegex, MessageStatusTypes } from '../../utils/utils';
 
@@ -332,9 +332,12 @@ const MessageWithContext = <
             if (cur.type === 'file') {
               acc.files.push(cur);
               acc.other = []; // remove other attachments if a file exists
-            } else if (cur.type === 'video' && !cur.og_scrape_url) {
+            } else if (cur.type === 'video' && !cur.og_scrape_url && isVideoPackageAvailable()) {
               acc.videos.push({ image_url: cur.asset_url, type: 'video' });
               acc.other = [];
+            } else if (cur.type === 'video' && !cur.og_scrape_url) {
+              acc.files.push(cur);
+              acc.other = []; // remove other attachments if a file exists
             } else if (cur.type === 'image' && !cur.title_link && !cur.og_scrape_url) {
               /**
                * this next if is not combined with the above one for cases where we have

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