stream-chat-react-native-core 9.6.0 → 9.6.1-beta.2

package/lib/typescript/hooks/index.d.ts

@@ -15,6 +15,7 @@ export * from './useSelectedChannelState';
 export * from './useStreami18n';
 export * from './useViewport';
 export * from './useScreenDimensions';
+export * from './useScreenOrientation';
 export * from './useStateStore';
 export * from './usePendingAttachmentUpload';
 export * from './useStableCallback';

package/lib/typescript/hooks/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC;AAC1B,cAAc,uBAAuB,CAAC;AACtC,cAAc,yBAAyB,CAAC;AACxC,cAAc,kBAAkB,CAAC;AACjC,cAAc,mBAAmB,CAAC;AAClC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,qBAAqB,CAAC;AACpC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,wBAAwB,CAAC;AACvC,cAAc,mBAAmB,CAAC;AAClC,cAAc,sBAAsB,CAAC;AACrC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,iBAAiB,CAAC;AAChC,cAAc,eAAe,CAAC;AAC9B,cAAc,uBAAuB,CAAC;AACtC,cAAc,iBAAiB,CAAC;AAChC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,qBAAqB,CAAC;AACpC,cAAc,mBAAmB,CAAC;AAClC,cAAc,YAAY,CAAC;AAC3B,cAAc,sBAAsB,CAAC;AACrC,cAAc,qBAAqB,CAAC;AACpC,cAAc,gCAAgC,CAAC;AAC/C,cAAc,0BAA0B,CAAC;AACzC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,mCAAmC,CAAC;AAClD,cAAc,4BAA4B,CAAC;AAC3C,cAAc,wBAAwB,CAAC;AACvC,cAAc,kBAAkB,CAAC;AACjC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,2CAA2C,CAAC;AAC1D,cAAc,wCAAwC,CAAC;AACvD,cAAc,wCAAwC,CAAC;AACvD,cAAc,wCAAwC,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC;AAC1B,cAAc,uBAAuB,CAAC;AACtC,cAAc,yBAAyB,CAAC;AACxC,cAAc,kBAAkB,CAAC;AACjC,cAAc,mBAAmB,CAAC;AAClC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,qBAAqB,CAAC;AACpC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,wBAAwB,CAAC;AACvC,cAAc,mBAAmB,CAAC;AAClC,cAAc,sBAAsB,CAAC;AACrC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,iBAAiB,CAAC;AAChC,cAAc,eAAe,CAAC;AAC9B,cAAc,uBAAuB,CAAC;AACtC,cAAc,wBAAwB,CAAC;AACvC,cAAc,iBAAiB,CAAC;AAChC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,qBAAqB,CAAC;AACpC,cAAc,mBAAmB,CAAC;AAClC,cAAc,YAAY,CAAC;AAC3B,cAAc,sBAAsB,CAAC;AACrC,cAAc,qBAAqB,CAAC;AACpC,cAAc,gCAAgC,CAAC;AAC/C,cAAc,0BAA0B,CAAC;AACzC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,mCAAmC,CAAC;AAClD,cAAc,4BAA4B,CAAC;AAC3C,cAAc,wBAAwB,CAAC;AACvC,cAAc,kBAAkB,CAAC;AACjC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,2CAA2C,CAAC;AAC1D,cAAc,wCAAwC,CAAC;AACvD,cAAc,wCAAwC,CAAC;AACvD,cAAc,wCAAwC,CAAC"}

package/lib/typescript/hooks/useScreenOrientation.d.ts

@@ -0,0 +1,10 @@
+export type ScreenOrientation = 'landscape' | 'portrait';
+/**
+ * A custom hook that derives the current screen orientation from the window
+ * dimensions. It updates automatically on device rotation via
+ * `useWindowDimensions`.
+ *
+ * @returns {ScreenOrientation} Either `'landscape'` or `'portrait'`.
+ */
+export declare const useScreenOrientation: () => ScreenOrientation;
+//# sourceMappingURL=useScreenOrientation.d.ts.map

package/lib/typescript/hooks/useScreenOrientation.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useScreenOrientation.d.ts","sourceRoot":"","sources":["../../../src/hooks/useScreenOrientation.ts"],"names":[],"mappings":"AAEA,MAAM,MAAM,iBAAiB,GAAG,WAAW,GAAG,UAAU,CAAC;AAEzD;;;;;;GAMG;AACH,eAAO,MAAM,oBAAoB,QAAO,iBAGvC,CAAC"}

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": "9.6.0",
+  "version": "9.6.1-beta.2",
   "author": {
     "company": "Stream.io Inc",
     "name": "Stream.io Inc"

package/src/components/Channel/Channel.tsx

@@ -218,6 +218,7 @@ export type ChannelPropsWithContext = Pick<ChannelContextValue, 'channel'> &
       | 'compressImageQuality'
       | 'createPollOptionGap'
       | 'doFileUploadRequest'
+      | 'focusInputOnPickerClose'
       | 'handleAttachButtonPress'
       | 'hasCameraPicker'
       | 'hasCommands'
@@ -423,6 +424,7 @@ const ChannelWithContext = (props: PropsWithChildren<ChannelPropsWithContext>) =
     enableSwipeToReply = true,
     enforceUniqueReaction = false,
     FlatList = NativeHandlers.FlatList,
+    focusInputOnPickerClose = true,
     forceAlignMessages,
     getMessageGroupStyle,
     handleAttachButtonPress,
@@ -1651,6 +1653,7 @@ const ChannelWithContext = (props: PropsWithChildren<ChannelPropsWithContext>) =
     createPollOptionGap,
     doFileUploadRequest,
     editMessage,
+    focusInputOnPickerClose,
     handleAttachButtonPress,
     hasCameraPicker,
     hasCommands: hasCommands ?? !!clientChannelConfig?.commands?.length,

package/src/components/Channel/hooks/useCreateInputMessageInputContext.ts

@@ -17,6 +17,7 @@ export const useCreateInputMessageInputContext = ({
   createPollOptionGap,
   doFileUploadRequest,
   editMessage,
+  focusInputOnPickerClose,
   handleAttachButtonPress,
   hasCameraPicker,
   hasCommands,
@@ -49,6 +50,7 @@ export const useCreateInputMessageInputContext = ({
       createPollOptionGap,
       doFileUploadRequest,
       editMessage,
+      focusInputOnPickerClose,
       handleAttachButtonPress,
       hasCameraPicker,
       hasCommands,

package/src/components/MessageInput/__tests__/AttachButton.test.tsx

@@ -180,4 +180,35 @@ describe('AttachButton', () => {
       expect(queryByTestId('attachment-picker-list')).toBeTruthy();
     });
   });
+
+  it('should close the attachment picker on second press when focusInputOnPickerClose is false', async () => {
+    jest.spyOn(NativeHandler, 'isImageMediaLibraryAvailable').mockImplementation(() => true);
+
+    const channelProps = { channel, focusInputOnPickerClose: false };
+    const props = {};
+
+    renderComponent({ channelProps, client, props });
+
+    const { queryByTestId } = screen;
+
+    await waitFor(() => {
+      expect(queryByTestId('attach-button')).toBeTruthy();
+    });
+
+    act(() => {
+      fireEvent.press(screen.getByTestId('attach-button'));
+    });
+
+    await waitFor(() => {
+      expect(queryByTestId('attachment-picker-list')).toBeTruthy();
+    });
+
+    act(() => {
+      fireEvent.press(screen.getByTestId('attach-button'));
+    });
+
+    await waitFor(() => {
+      expect(queryByTestId('attachment-picker-list')).toBeNull();
+    });
+  });
 });

package/src/components/MessageInput/components/InputButtons/AttachButton.tsx

@@ -92,13 +92,23 @@ export type AttachButtonProps = Partial<AttachButtonPropsWithContext>;
  */
 export const AttachButton = (props: AttachButtonProps) => {
   const { disableAttachmentPicker } = useAttachmentPickerContext();
-  const { inputBoxRef, handleAttachButtonPress, openAttachmentPicker } = useMessageInputContext();
+  const {
+    closeAttachmentPicker,
+    focusInputOnPickerClose,
+    handleAttachButtonPress,
+    inputBoxRef,
+    openAttachmentPicker,
+  } = useMessageInputContext();
   const { attachmentPickerStore } = useAttachmentPickerContext();
   const { selectedPicker } = useAttachmentPickerState();
 
   const toggleAttachmentPicker = useStableCallback(() => {
     if (attachmentPickerStore.state.getLatestValue().selectedPicker) {
-      inputBoxRef.current?.focus();
+      if (focusInputOnPickerClose) {
+        inputBoxRef.current?.focus();
+      } else {
+        closeAttachmentPicker();
+      }
     } else {
       openAttachmentPicker();
     }

package/src/components/MessageMenu/EmojiPickerList.tsx

@@ -13,6 +13,7 @@ import { primitives } from '../../theme';
 import { StreamBottomSheetModalFlatList } from '../UIComponents';
 
 const EMOJI_SIZE = Platform.OS === 'ios' ? 32 : 28;
+const EMOJI_CELL_SIZE = 54;
 
 const emojiKeyExtractor = (item: string) => `unicode-${item}`;
 
@@ -54,6 +55,7 @@ export const EmojiPickerList = ({
   renderFullInitially?: boolean;
 }) => {
   const styles = useStyles();
+
   const onSelectEmoji = useStableCallback((emoji: string) => {
     const scalarString = toUnicodeScalarString(emoji);
     onSelectReaction(scalarString);
@@ -94,9 +96,9 @@ const useStyles = () => {
       StyleSheet.create({
         bottomSheetColumnWrapper: {
           alignItems: 'center',
-          justifyContent: 'center',
+          justifyContent: 'space-evenly',
           width: '100%',
-          height: 54,
+          height: EMOJI_CELL_SIZE,
         },
         bottomSheetContentContainer: { paddingBottom: 16 },
         emojiContainer: {

package/src/components/UIComponents/BottomSheetModal.tsx

@@ -18,6 +18,7 @@ import {
   StyleSheet,
   useWindowDimensions,
   View,
+  type ModalProps,
 } from 'react-native';
 import { Gesture, GestureDetector, GestureHandlerRootView } from 'react-native-gesture-handler';
 import Animated, {
@@ -43,9 +44,19 @@ import { useAnnounceOnShow } from '../../a11y/hooks/useAnnounceOnShow';
 import { useResolvedModalAccessibilityProps } from '../../a11y/hooks/useResolvedModalAccessibilityProps';
 import { BottomSheetProvider } from '../../contexts/bottomSheetContext/BottomSheetContext';
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
-import { useStableCallback } from '../../hooks';
+import { useScreenOrientation, useStableCallback } from '../../hooks';
 import { primitives } from '../../theme';
 
+const supportedOrientations: ModalProps['supportedOrientations'] = [
+  'portrait',
+  'portrait-upside-down',
+  'landscape',
+  'landscape-left',
+  'landscape-right',
+];
+
+const LANDSCAPE_MAX_HEIGHT_RATIO = 0.9;
+
 export type BottomSheetModalProps = {
   /**
    * Function to call when the modal is closed or dismissed.
@@ -90,11 +101,16 @@ const BottomSheetModalInner = (props: PropsWithChildren<BottomSheetModalProps>)
     },
   } = useTheme();
   const styles = useStyles();
+  const isLandscape = useScreenOrientation() === 'landscape';
 
-  const maxHeight = Math.max(
+  const availableHeight = Math.max(
     0,
     windowHeight - topInset - (Platform.OS === 'android' ? bottomInset + 16 : 0),
   );
+
+  const maxHeight = isLandscape
+    ? Math.round(availableHeight * LANDSCAPE_MAX_HEIGHT_RATIO)
+    : availableHeight;
   const fixedBaseHeight = Math.min(height, maxHeight);
 
   const contentHeight = useSharedValue<number | undefined>(undefined);
@@ -574,6 +590,7 @@ const BottomSheetModalInner = (props: PropsWithChildren<BottomSheetModalProps>)
     <Modal
       onDismiss={handleNativeModalDismiss}
       onRequestClose={onClose}
+      supportedOrientations={supportedOrientations}
       transparent
       visible={visible && !isDismissing}
     >

package/src/contexts/messageInputContext/MessageInputContext.tsx

@@ -128,6 +128,15 @@ export type InputMessageInputContextValue = {
     options?: UpdateMessageOptions;
   }) => ReturnType<StreamChat['updateMessage']>;
 
+  /**
+   * Controls what happens when the attach button is pressed while the attachment picker is open.
+   * When true (default), the message input is focused, toggling from the picker to the keyboard.
+   * When false, the attachment picker is closed without focusing the input.
+   * @type boolean
+   * @default true
+   */
+  focusInputOnPickerClose: boolean;
+
   /** When false, CameraSelectorIcon will be hidden */
   hasCameraPicker: boolean;
 

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

@@ -18,6 +18,7 @@ export const useCreateMessageInputContext = ({
   compressImageQuality,
   createPollOptionGap,
   editMessage,
+  focusInputOnPickerClose,
   handleAttachButtonPress,
   hasCameraPicker,
   hasCommands,
@@ -61,6 +62,7 @@ export const useCreateMessageInputContext = ({
       compressImageQuality,
       createPollOptionGap,
       editMessage,
+      focusInputOnPickerClose,
       handleAttachButtonPress,
       hasCameraPicker,
       hasCommands,

package/src/hooks/index.ts

@@ -15,6 +15,7 @@ export * from './useSelectedChannelState';
 export * from './useStreami18n';
 export * from './useViewport';
 export * from './useScreenDimensions';
+export * from './useScreenOrientation';
 export * from './useStateStore';
 export * from './usePendingAttachmentUpload';
 export * from './useStableCallback';

package/src/hooks/useScreenOrientation.ts

@@ -0,0 +1,15 @@
+import { useWindowDimensions } from 'react-native';
+
+export type ScreenOrientation = 'landscape' | 'portrait';
+
+/**
+ * A custom hook that derives the current screen orientation from the window
+ * dimensions. It updates automatically on device rotation via
+ * `useWindowDimensions`.
+ *
+ * @returns {ScreenOrientation} Either `'landscape'` or `'portrait'`.
+ */
+export const useScreenOrientation = (): ScreenOrientation => {
+  const { height, width } = useWindowDimensions();
+  return width > height ? 'landscape' : 'portrait';
+};

package/src/version.json

@@ -1,3 +1,3 @@
 {
-  "version": "9.6.0"
+  "version": "9.6.1-beta.2"
 }