feat: bottom sheet dynamic resizing

examples/ExpoMessaging/yarn.lock

@@ -6043,10 +6043,10 @@ stream-chat-react-native-core@8.1.0:
   version "0.0.0"
   uid ""
 
-stream-chat@^9.36.1:
-  version "9.36.2"
-  resolved "https://registry.yarnpkg.com/stream-chat/-/stream-chat-9.36.2.tgz#cd2cfac1f8d7b045c34dce51e2de1cb66bf288f5"
-  integrity sha512-sSCxTXJOf0BLDMZ2/cqvFged/LLbiWoIhs7v3UsRj0EM0T8tTam7zpU77TSccNDlK5j1C1/llSUVyMLc7aCDsA==
+stream-chat@^9.40.0:
+  version "9.41.0"
+  resolved "https://registry.yarnpkg.com/stream-chat/-/stream-chat-9.41.0.tgz#ad88d7919aaf1d3c35b4a431a8cd464cb640f146"
+  integrity sha512-Rgp3vULGKYxHZ/aCeundly6ngdBGttTPz+YknmWhbqvNlEhPB/RM61CpQPHgPyfkSm+osJT3tEV9fKd+I/S77g==
   dependencies:
     "@types/jsonwebtoken" "^9.0.8"
     "@types/ws" "^8.5.14"

examples/SampleApp/src/components/NetworkDownIndicator.tsx

@@ -16,20 +16,19 @@ const styles = StyleSheet.create({
     fontSize: 16,
     fontWeight: '700',
   },
-  spinner: {
-    backgroundColor: 'white',
-  },
 });
 
 export const NetworkDownIndicator: React.FC<{ titleSize: 'small' | 'large' }> = ({
   titleSize = 'small',
 }) => {
-  useTheme();
+  const {
+    theme: { semantics },
+  } = useTheme();
   const { black } = useLegacyColors();
 
   return (
     <View style={styles.networkDownContainer} testID='network-down-indicator'>
-      <Spinner height={12} style={styles.spinner} width={12} />
+      <Spinner height={12} style={{ backgroundColor: semantics.backgroundCoreElevation1 }} width={12} />
       <Text
         style={[
           styles.networkDownText,

examples/SampleApp/src/icons/GoBack.tsx

@@ -1,19 +1,23 @@
 import React from 'react';
-import Svg, { Path } from 'react-native-svg';
+import { I18nManager } from 'react-native';
+import Svg, { G, Path } from 'react-native-svg';
 
 import { IconProps } from '../utils/base';
 import { useLegacyColors } from '../theme/useLegacyColors';
 
 export const GoBack: React.FC<IconProps> = ({ height = 24, width = 24 }) => {
   const { black } = useLegacyColors();
+
   return (
-    <Svg fill='none' height={height} viewBox={`0 0 ${height} ${width}`} width={width}>
-      <Path
-        clipRule='evenodd'
-        d='M15.694 18.6943C16.102 18.2867 16.102 17.6259 15.694 17.2184L10.4699 12L15.694 6.78165C16.102 6.37408 16.102 5.71326 15.694 5.30568C15.2859 4.89811 14.6244 4.8981 14.2164 5.30568L8.30602 11.2096C8.08861 11.4267 7.98704 11.7158 8.00132 12.0002C7.98713 12.2844 8.0887 12.5733 8.30603 12.7904L14.2164 18.6943C14.6244 19.1019 15.2859 19.1019 15.694 18.6943Z'
-        fill={black}
-        fillRule='evenodd'
-      />
+    <Svg fill='none' height={height} viewBox='0 0 24 24' width={width}>
+      <G transform={I18nManager.isRTL ? 'matrix(-1 0 0 1 24 0)' : undefined}>
+        <Path
+          clipRule='evenodd'
+          d='M15.694 18.6943C16.102 18.2867 16.102 17.6259 15.694 17.2184L10.4699 12L15.694 6.78165C16.102 6.37408 16.102 5.71326 15.694 5.30568C15.2859 4.89811 14.6244 4.8981 14.2164 5.30568L8.30602 11.2096C8.08861 11.4267 7.98704 11.7158 8.00132 12.0002C7.98713 12.2844 8.0887 12.5733 8.30603 12.7904L14.2164 18.6943C14.6244 19.1019 15.2859 19.1019 15.694 18.6943Z'
+          fill={black}
+          fillRule='evenodd'
+        />
+      </G>
     </Svg>
   );
 };

examples/SampleApp/src/icons/GoForward.tsx

@@ -1,12 +1,13 @@
 import React from 'react';
+import { I18nManager } from 'react-native';
 import Svg, { G, Path } from 'react-native-svg';
 
 import { IconProps } from '../utils/base';
 
 export const GoForward: React.FC<IconProps> = ({ height = 20, width = 20, ...rest }) => {
   return (
-    <Svg fill='none' height={height} viewBox={`0 0 ${height} ${width}`} width={width}>
-      <G>
+    <Svg fill='none' height={height} viewBox='0 0 20 20' width={width}>
+      <G transform={I18nManager.isRTL ? 'matrix(-1 0 0 1 20 0)' : undefined}>
         <Path
           d='M7.91675 15.2096L13.1251 10.0013L7.91675 4.79297'
           strokeWidth={1.5}

examples/SampleApp/src/screens/ChannelScreen.tsx

@@ -31,7 +31,7 @@ import { useCreateDraftFocusEffect } from '../utils/useCreateDraftFocusEffect.ts
 import { channelMessageActions } from '../utils/messageActions.tsx';
 import { MessageLocation } from '../components/LocationSharing/MessageLocation.tsx';
 import { useStreamChatContext } from '../context/StreamChatContext.tsx';
-import { CustomAttachmentPickerSelectionBar } from '../components/AttachmentPickerSelectionBar.tsx';
+// import { CustomAttachmentPickerSelectionBar } from '../components/AttachmentPickerSelectionBar.tsx';
 import { MessageInfoBottomSheet } from '../components/MessageInfoBottomSheet.tsx';
 import { CustomAttachmentPickerContent } from '../components/AttachmentPickerContent.tsx';
 import { ThreadType } from 'stream-chat-react-native-core';
@@ -103,7 +103,7 @@ const ChannelHeader: React.FC<ChannelHeaderProps> = ({ channel }) => {
             opacity: pressed ? 0.5 : 1,
           })}
         >
-          <ChannelAvatar channel={channel} size='lg' />
+          <ChannelAvatar channel={channel} size='xl' />
         </Pressable>
       )}
       showUnreadCountBadge
@@ -267,7 +267,7 @@ export const ChannelScreen: React.FC<ChannelScreenProps> = ({ navigation, route
     <View style={[styles.flex, { backgroundColor: 'transparent' }]}>
       <Channel
         audioRecordingEnabled={true}
-        AttachmentPickerSelectionBar={CustomAttachmentPickerSelectionBar}
+        // AttachmentPickerSelectionBar={CustomAttachmentPickerSelectionBar}
         AttachmentPickerContent={CustomAttachmentPickerContent}
         channel={channel}
         messageInputFloating={messageInputFloating}

examples/SampleApp/src/screens/NewGroupChannelAddMemberScreen.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback } from 'react';
+import React, { useCallback, useRef } from 'react';
 import { FlatList, StyleSheet, TextInput, TouchableOpacity, View } from 'react-native';
 import { Search, useTheme } from 'stream-chat-react-native';
 
@@ -41,6 +41,12 @@ const styles = StyleSheet.create({
   navigationButton: {
     paddingRight: 8,
   },
+  searchButton: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingLeft: 8,
+    paddingRight: 4,
+  },
   userGridItemContainer: { marginHorizontal: 8, width: 64 },
 });
 
@@ -70,6 +76,7 @@ type Props = {
 
 export const NewGroupChannelAddMemberScreen: React.FC<Props> = ({ navigation }) => {
   const { chatClient } = useAppContext();
+  const searchInputRef = useRef<TextInput>(null);
 
   const {
     theme: { semantics },
@@ -97,6 +104,10 @@ export const NewGroupChannelAddMemberScreen: React.FC<Props> = ({ navigation })
     navigation.navigate('NewGroupChannelAssignNameScreen');
   };
 
+  const focusSearchInput = useCallback(() => {
+    searchInputRef.current?.focus();
+  }, []);
+
   if (!chatClient) {
     return null;
   }
@@ -122,12 +133,12 @@ export const NewGroupChannelAddMemberScreen: React.FC<Props> = ({ navigation })
             },
           ]}
         >
-          <Search pathFill={black} />
           <TextInput
             onChangeText={onChangeSearchText}
             onFocus={onFocusInput}
             placeholder='Search'
             placeholderTextColor={grey}
+            ref={searchInputRef}
             style={[
               styles.inputBox,
               {
@@ -136,6 +147,9 @@ export const NewGroupChannelAddMemberScreen: React.FC<Props> = ({ navigation })
             ]}
             value={searchText}
           />
+          <TouchableOpacity hitSlop={8} onPress={focusSearchInput} style={styles.searchButton}>
+            <Search height={20} pathFill={black} width={20} />
+          </TouchableOpacity>
         </View>
         <FlatList
           data={selectedUsers}

examples/SampleApp/src/screens/ThreadScreen.tsx

@@ -25,7 +25,7 @@ import { useCreateDraftFocusEffect } from '../utils/useCreateDraftFocusEffect.ts
 import { channelMessageActions } from '../utils/messageActions.tsx';
 import { useStreamChatContext } from '../context/StreamChatContext.tsx';
 import { NativeStackNavigationProp } from '@react-navigation/native-stack';
-import { CustomAttachmentPickerSelectionBar } from '../components/AttachmentPickerSelectionBar.tsx';
+// import { CustomAttachmentPickerSelectionBar } from '../components/AttachmentPickerSelectionBar.tsx';
 import { MessageLocation } from '../components/LocationSharing/MessageLocation.tsx';
 import { useAppContext } from '../context/AppContext.ts';
 import { useLegacyColors } from '../theme/useLegacyColors';
@@ -150,7 +150,7 @@ export const ThreadScreen: React.FC<ThreadScreenProps> = ({
     <View style={[styles.container, { backgroundColor: white }]}>
       <Channel
         audioRecordingEnabled={true}
-        AttachmentPickerSelectionBar={CustomAttachmentPickerSelectionBar}
+        // AttachmentPickerSelectionBar={CustomAttachmentPickerSelectionBar}
         channel={channel}
         enforceUniqueReaction
         keyboardVerticalOffset={0}

examples/SampleApp/src/theme/useLegacyColors.ts

@@ -18,7 +18,7 @@ export const useLegacyColors = () => {
       grey: semantics.textSecondary,
       grey_gainsboro: semantics.borderCoreDefault,
       grey_whisper: semantics.backgroundCoreSurfaceDefault,
-      icon_background: semantics.backgroundCoreApp,
+      icon_background: semantics.backgroundCoreElevation1,
       overlay: semantics.badgeBgOverlay,
       white: semantics.backgroundCoreApp,
       white_smoke: semantics.backgroundCoreSurfaceSubtle,

examples/SampleApp/src/utils/messageActions.tsx

@@ -1,21 +1,21 @@
-import React from 'react';
-import { Alert } from 'react-native';
+// import React from 'react';
+// import { Alert } from 'react-native';
 import { LocalMessage, StreamChat } from 'stream-chat';
 import {
   Colors,
   messageActions,
   MessageActionsParams,
   TranslationContextValue,
-  Bell,
+  // Bell,
 } from 'stream-chat-react-native';
 import { Theme } from 'stream-chat-react-native';
 
 export function channelMessageActions({
   params,
-  chatClient,
-  t,
-  // handleMessageInfo,
-  semantics,
+  // chatClient,
+  // t,
+  // // handleMessageInfo,
+  // semantics,
 }: {
   params: MessageActionsParams;
   chatClient: StreamChat;
@@ -24,11 +24,11 @@ export function channelMessageActions({
   handleMessageInfo: (message: LocalMessage) => void;
   semantics: Theme['semantics'];
 }) {
-  const { dismissOverlay, error /*deleteForMeMessage*/ } = params;
+  // const { dismissOverlay, error /*deleteForMeMessage*/ } = params;
   const actions = messageActions(params);
 
   // We cannot use the useMessageReminder hook here because it is a hook.
-  const reminder = chatClient.reminders.getFromState(params.message.id);
+  // const reminder = chatClient.reminders.getFromState(params.message.id);
 
   // actions.push({
   //   action: async () => {
@@ -48,54 +48,54 @@ export function channelMessageActions({
   //   icon: <Time width={20} height={20} stroke={semantics.textSecondary} />,
   //   type: 'standard',
   // });
-  if (!error) {
-    actions.push({
-      action: () => {
-        if (reminder) {
-          Alert.alert('Remove Reminder', 'Are you sure you want to remove this reminder?', [
-            {
-              text: 'Cancel',
-              style: 'cancel',
-            },
-            {
-              text: 'Remove',
-              onPress: () => {
-                chatClient.reminders.deleteReminder(reminder.id).catch((err) => {
-                  console.error('Error deleting reminder:', err);
-                });
-              },
-              style: 'destructive',
-            },
-          ]);
-        } else {
-          Alert.alert(
-            'Select Reminder Time',
-            'When would you like to be reminded?',
-            chatClient.reminders.scheduledOffsetsMs.map((offsetMs) => ({
-              text: t('duration/Remind Me', { milliseconds: offsetMs }),
-              onPress: () => {
-                chatClient.reminders
-                  .upsertReminder({
-                    messageId: params.message.id,
-                    remind_at: new Date(new Date().getTime() + offsetMs).toISOString(),
-                  })
-                  .catch((_error) => {
-                    console.error('Error creating reminder:', _error);
-                  });
-              },
-              style: 'default',
-            })),
-          );
-        }
-
-        dismissOverlay();
-      },
-      actionType: reminder ? 'remove-reminder' : 'remind-me',
-      title: reminder ? 'Remove Reminder' : 'Remind Me',
-      icon: <Bell height={20} width={20} stroke={semantics.textSecondary} />,
-      type: 'standard',
-    });
-  }
+  // if (!error) {
+  //   actions.push({
+  //     action: () => {
+  //       if (reminder) {
+  //         Alert.alert('Remove Reminder', 'Are you sure you want to remove this reminder?', [
+  //           {
+  //             text: 'Cancel',
+  //             style: 'cancel',
+  //           },
+  //           {
+  //             text: 'Remove',
+  //             onPress: () => {
+  //               chatClient.reminders.deleteReminder(reminder.id).catch((err) => {
+  //                 console.error('Error deleting reminder:', err);
+  //               });
+  //             },
+  //             style: 'destructive',
+  //           },
+  //         ]);
+  //       } else {
+  //         Alert.alert(
+  //           'Select Reminder Time',
+  //           'When would you like to be reminded?',
+  //           chatClient.reminders.scheduledOffsetsMs.map((offsetMs) => ({
+  //             text: t('duration/Remind Me', { milliseconds: offsetMs }),
+  //             onPress: () => {
+  //               chatClient.reminders
+  //                 .upsertReminder({
+  //                   messageId: params.message.id,
+  //                   remind_at: new Date(new Date().getTime() + offsetMs).toISOString(),
+  //                 })
+  //                 .catch((_error) => {
+  //                   console.error('Error creating reminder:', _error);
+  //                 });
+  //             },
+  //             style: 'default',
+  //           })),
+  //         );
+  //       }
+  //
+  //       dismissOverlay();
+  //     },
+  //     actionType: reminder ? 'remove-reminder' : 'remind-me',
+  //     title: reminder ? 'Remove Reminder' : 'Remind Me',
+  //     icon: <Bell height={20} width={20} stroke={semantics.textSecondary} />,
+  //     type: 'standard',
+  //   });
+  // }
   // actions.push({
   //   action: async () => {
   //     Alert.alert('Delete for me', 'Are you sure you want to delete this message for me?', [

package/src/components/Channel/Channel.tsx

@@ -575,7 +575,7 @@ const ChannelWithContext = (props: PropsWithChildren<ChannelPropsWithContext>) =
     asyncMessagesLockDistance = 50,
     asyncMessagesMinimumPressDuration = 500,
     asyncMessagesSlideToCancelDistance = 75,
-    audioRecordingSendOnComplete = true,
+    audioRecordingSendOnComplete = false,
     AttachButton = AttachButtonDefault,
     Attachment = AttachmentDefault,
     attachmentPickerBottomSheetHeight = disableAttachmentPicker ? 72 : 333,