feat: attachment picker rework

examples/SampleApp/src/components/AttachmentPickerContent.tsx

@@ -0,0 +1,53 @@
+import React, { useCallback, useState } from 'react';
+import {
+  useAttachmentPickerState,
+  AttachmentPickerContentProps,
+  AttachmentPickerContent,
+  AttachmentPickerGenericContent,
+  useStableCallback,
+  useTheme,
+  useTranslationContext,
+} from 'stream-chat-react-native';
+import { ShareLocationIcon } from '../icons/ShareLocationIcon.tsx';
+import { LiveLocationCreateModal } from './LocationSharing/CreateLocationModal.tsx';
+
+export const CustomAttachmentPickerContent = (props: AttachmentPickerContentProps) => {
+  const [modalVisible, setModalVisible] = useState(false);
+  const { selectedPicker } = useAttachmentPickerState();
+  const { t } = useTranslationContext();
+  const {
+    theme: { semantics },
+  } = useTheme();
+
+  const Icon = useCallback(
+    () => <ShareLocationIcon stroke={semantics.textTertiary} />,
+    [semantics.textTertiary],
+  );
+
+  const onRequestClose = () => {
+    setModalVisible(false);
+  };
+
+  const onOpenModal = useStableCallback(() => {
+    setModalVisible(true);
+  });
+
+  if (selectedPicker === 'location') {
+    return (
+      <>
+        <AttachmentPickerGenericContent
+          Icon={Icon}
+          onPress={onOpenModal}
+          height={props.height}
+          buttonText={t('Share Location')}
+          description={t('Share your location with everyone')}
+        />
+        {modalVisible ? (
+          <LiveLocationCreateModal visible={modalVisible} onRequestClose={onRequestClose} />
+        ) : null}
+      </>
+    );
+  }
+
+  return <AttachmentPickerContent {...props} />;
+};

examples/SampleApp/src/components/AttachmentPickerSelectionBar.tsx

@@ -1,36 +1,52 @@
-import { useState } from 'react';
-import { Pressable, StyleSheet, View } from 'react-native';
-import { AttachmentPickerSelectionBar, useMessageInputContext } from 'stream-chat-react-native';
+import React, { useState } from 'react';
+import { StyleSheet, View } from 'react-native';
+import {
+  AttachmentTypePickerButton,
+  useAttachmentPickerState,
+  CameraPickerButton,
+  CommandsPickerButton,
+  FilePickerButton,
+  MediaPickerButton,
+  PollPickerButton,
+  useAttachmentPickerContext,
+  useStableCallback,
+} from 'stream-chat-react-native';
 import { ShareLocationIcon } from '../icons/ShareLocationIcon';
 import { LiveLocationCreateModal } from './LocationSharing/CreateLocationModal';
 
 export const CustomAttachmentPickerSelectionBar = () => {
   const [modalVisible, setModalVisible] = useState(false);
-  const { closeAttachmentPicker } = useMessageInputContext();
+  const { attachmentPickerStore } = useAttachmentPickerContext();
+  const { selectedPicker } = useAttachmentPickerState();
 
   const onRequestClose = () => {
     setModalVisible(false);
-    closeAttachmentPicker();
   };
 
-  const onOpenModal = () => {
+  const onOpenModal = useStableCallback(() => {
+    attachmentPickerStore.setSelectedPicker('location');
     setModalVisible(true);
-  };
+  });
 
   return (
     <View style={styles.selectionBar}>
-      <AttachmentPickerSelectionBar />
-      <Pressable style={styles.liveLocationButton} onPress={onOpenModal}>
-        <ShareLocationIcon />
-      </Pressable>
-      <LiveLocationCreateModal visible={modalVisible} onRequestClose={onRequestClose} />
+      <MediaPickerButton />
+      <CameraPickerButton />
+      <FilePickerButton />
+      <PollPickerButton />
+      <CommandsPickerButton />
+      <AttachmentTypePickerButton
+        Icon={ShareLocationIcon}
+        onPress={onOpenModal}
+        selected={selectedPicker === 'location'}
+      />
+      {modalVisible ? (
+        <LiveLocationCreateModal visible={modalVisible} onRequestClose={onRequestClose} />
+      ) : null}
     </View>
   );
 };
 
 const styles = StyleSheet.create({
-  selectionBar: { flexDirection: 'row', alignItems: 'center' },
-  liveLocationButton: {
-    paddingLeft: 4,
-  },
+  selectionBar: { flexDirection: 'row', alignItems: 'center', paddingHorizontal: 16, paddingBottom: 12, },
 });

examples/SampleApp/src/icons/ShareLocationIcon.tsx

@@ -1,24 +1,19 @@
 import Svg, { Path } from 'react-native-svg';
-import { useTheme } from 'stream-chat-react-native';
+import { ColorValue } from 'react-native';
 
 // Icon for "Share Location" button, next to input box.
-export const ShareLocationIcon = () => {
-  const {
-    theme: {
-      colors: { grey },
-    },
-  } = useTheme();
+export const ShareLocationIcon = ({ stroke }: { stroke: ColorValue }) => {
   return (
-    <Svg width={24} height={24} viewBox='0 0 24 24' fill='none'>
+    <Svg width={20} height={20} viewBox='0 0 24 24' fill='none'>
       <Path
         d='M12 12c-1.654 0-3-1.345-3-3 0-1.654 1.346-3 3-3s3 1.346 3 3c0 1.655-1.346 3-3 3zm0-4a1.001 1.001 0 101 1c0-.551-.449-1-1-1z'
-        fill={grey}
+        fill={stroke}
       />
       <Path
         fillRule='evenodd'
         clipRule='evenodd'
         d='M12 22s7-5.455 7-12.727C19 5.636 16.667 2 12 2S5 5.636 5 9.273C5 16.545 12 22 12 22zm1.915-4.857C15.541 15.032 17 12.277 17 9.273c0-1.412-.456-2.75-1.27-3.7C14.953 4.664 13.763 4 12 4s-2.953.664-3.73 1.573C7.456 6.523 7 7.86 7 9.273c0 3.004 1.459 5.759 3.085 7.87.678.88 1.358 1.614 1.915 2.166a21.689 21.689 0 001.915-2.166zm-.683 3.281s0 .001 0 0z'
-        fill={grey}
+        fill={stroke}
       />
     </Svg>
   );

examples/SampleApp/src/screens/ChannelScreen.tsx

@@ -33,6 +33,7 @@ import { MessageLocation } from '../components/LocationSharing/MessageLocation.t
 import { useStreamChatContext } from '../context/StreamChatContext.tsx';
 import { CustomAttachmentPickerSelectionBar } from '../components/AttachmentPickerSelectionBar.tsx';
 import { MessageInfoBottomSheet } from '../components/MessageInfoBottomSheet.tsx';
+import { CustomAttachmentPickerContent } from '../components/AttachmentPickerContent.tsx';
 
 export type ChannelScreenNavigationProp = NativeStackNavigationProp<
   StackNavigatorParamList,
@@ -223,6 +224,7 @@ export const ChannelScreen: React.FC<ChannelScreenProps> = ({
       <Channel
         audioRecordingEnabled={true}
         AttachmentPickerSelectionBar={CustomAttachmentPickerSelectionBar}
+        AttachmentPickerContent={CustomAttachmentPickerContent}
         channel={channel}
         messageInputFloating={messageInputFloating}
         onPressMessage={onPressMessage}

package/jest-setup.js

@@ -40,6 +40,13 @@ jest.mock('react-native-reanimated', () => {
 });
 
 jest.mock('@react-native-community/netinfo', () => mockRNCNetInfo);
+
+const BottomSheetMock = ({ handleComponent, children }) => (
+  <View>
+    {handleComponent()}
+    {children}
+  </View>
+);
 jest.mock('@gorhom/bottom-sheet', () => {
   const react = require('react-native');
   return {
@@ -48,8 +55,9 @@ jest.mock('@gorhom/bottom-sheet', () => {
     BottomSheetModal: react.View,
     BottomSheetModalProvider: react.View,
     BottomSheetScrollView: react.ScrollView,
-    default: react.View,
+    default: BottomSheetMock,
     TouchableOpacity: react.View,
+    useBottomSheetSpringConfigs: jest.fn(() => ({})),
   };
 });
 jest.mock('@op-engineering/op-sqlite', () => {