stream-chat-react-native-core 8.10.1 → 8.11.0-beta.3

package/lib/typescript/state-store/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/state-store/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,8BAA8B,CAAC;AAC7C,cAAc,qBAAqB,CAAC"}

package/package.json

@@ -1,14 +1,15 @@
 {
   "name": "stream-chat-react-native-core",
   "description": "The official React Native and Expo components for Stream Chat, a service for building chat applications",
-  "version": "8.10.1",
+  "version": "8.11.0-beta.3",
   "author": {
     "company": "Stream.io Inc",
     "name": "Stream.io Inc"
   },
   "repository": {
     "type": "git",
-    "url": "https://github.com/GetStream/stream-chat-react-native.git"
+    "url": "https://github.com/GetStream/stream-chat-react-native.git",
+    "directory": "package"
   },
   "license": "SEE LICENSE IN LICENSE",
   "main": "lib/commonjs/index.js",
@@ -24,7 +25,7 @@
   "scripts": {
     "install-all": "(yarn install --force && (cd native-package && yarn install --force) && (cd expo-package && yarn install --force))",
     "build": "rimraf lib && yarn run --silent build-translations && bob build && yarn run --silent copy-translations",
-    "build-translations": "i18next",
+    "build-translations": "i18next-cli sync",
     "copy-translations": "echo '\u001b[34mℹ\u001b[0m Copying translation files to \u001b[34mlib/typescript/i18n\u001b[0m' && cp -R -f ./src/i18n ./lib/typescript/i18n && echo '\u001b[32m✓\u001b[0m Done Copying Translations'",
     "eslint": "eslint 'src/**/*.{js,md,ts,jsx,tsx}' --max-warnings 0",
     "lint": "prettier --ignore-path ../.prettierignore --list-different 'src/**/*.{js,ts,tsx,md,json}' eslint.config.mjs ../.prettierrc babel.config.js && eslint 'src/**/*.{js,ts,tsx,md}' --max-warnings 0 && yarn run validate-translations",
@@ -112,11 +113,11 @@
     "@babel/core": "^7.27.4",
     "@babel/runtime": "^7.27.6",
     "@op-engineering/op-sqlite": "^14.0.3",
-    "@shopify/flash-list": "^2.1.0",
     "@react-native-community/eslint-config": "3.2.0",
     "@react-native-community/eslint-plugin": "1.3.0",
     "@react-native-community/netinfo": "^11.4.1",
     "@react-native/babel-preset": "0.79.3",
+    "@shopify/flash-list": "^2.1.0",
     "@testing-library/jest-native": "^5.4.3",
     "@testing-library/react-native": "13.2.0",
     "@types/better-sqlite3": "^7.6.13",
@@ -145,7 +146,7 @@
     "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-hooks": "^5.2.0",
     "eslint-plugin-react-native": "^5.0.0",
-    "i18next-parser": "^9.3.0",
+    "i18next-cli": "^1.31.0",
     "jest": "^30.0.0",
     "moment-timezone": "^0.6.0",
     "prettier": "^3.5.3",

package/src/components/Attachment/AudioAttachment.tsx

@@ -1,254 +1,179 @@
-import React, { RefObject, useEffect, useMemo, useState } from 'react';
+import React, { RefObject, useEffect, useMemo } from 'react';
 import { I18nManager, Pressable, StyleSheet, Text, View } from 'react-native';
 
 import dayjs from 'dayjs';
 import duration from 'dayjs/plugin/duration';
 
-import { AudioAttachment as StreamAudioAttachment } from 'stream-chat';
+import {
+  isVoiceRecordingAttachment,
+  LocalMessage,
+  AudioAttachment as StreamAudioAttachment,
+  VoiceRecordingAttachment as StreamVoiceRecordingAttachment,
+} from 'stream-chat';
 
 import { useTheme } from '../../contexts';
-import { useAudioPlayer } from '../../hooks/useAudioPlayer';
+import { useStateStore } from '../../hooks';
+import { useAudioPlayerControl } from '../../hooks/useAudioPlayerControl';
 import { Audio, Pause, Play } from '../../icons';
 import {
   NativeHandlers,
-  PlaybackStatus,
   SoundReturnType,
   VideoPayloadData,
   VideoProgressData,
   VideoSeekResponse,
 } from '../../native';
-import { AudioConfig, FileTypes } from '../../types/types';
+import { AudioPlayerState } from '../../state-store/audio-player';
+import { AudioConfig } from '../../types/types';
 import { getTrimmedAttachmentTitle } from '../../utils/getTrimmedAttachmentTitle';
 import { ProgressControl } from '../ProgressControl/ProgressControl';
 import { WaveProgressBar } from '../ProgressControl/WaveProgressBar';
 
+const ONE_HOUR_IN_MILLISECONDS = 3600 * 1000;
+const ONE_SECOND_IN_MILLISECONDS = 1000;
+
 dayjs.extend(duration);
 
 export type AudioAttachmentType = AudioConfig &
-  Pick<StreamAudioAttachment, 'waveform_data' | 'asset_url' | 'title'> & {
+  Pick<
+    StreamAudioAttachment | StreamVoiceRecordingAttachment,
+    'waveform_data' | 'asset_url' | 'title' | 'mime_type'
+  > & {
     id: string;
     type: 'audio' | 'voiceRecording';
   };
 
 export type AudioAttachmentProps = {
   item: AudioAttachmentType;
-  onLoad: (index: string, duration: number) => void;
-  onPlayPause: (index: string, pausedStatus?: boolean) => void;
-  onProgress: (index: string, progress: number) => void;
+  message?: LocalMessage;
   titleMaxLength?: number;
   hideProgressBar?: boolean;
+  /**
+   * If true, the speed settings button will be shown.
+   */
   showSpeedSettings?: boolean;
   testID?: string;
+  /**
+   * If true, the audio attachment is in preview mode in the message input.
+   */
+  isPreview?: boolean;
+  /**
+   * Callback to be called when the audio is loaded
+   * @deprecated This is deprecated and will be removed in the future.
+   */
+  onLoad?: (index: string, duration: number) => void;
+  /**
+   * Callback to be called when the audio is played or paused
+   * @deprecated This is deprecated and will be removed in the future.
+   */
+  onPlayPause?: (index: string, pausedStatus?: boolean) => void;
+  /**
+   * Callback to be called when the audio progresses
+   * @deprecated This is deprecated and will be removed in the future.
+   */
+  onProgress?: (index: string, progress: number) => void;
 };
 
+const audioPlayerSelector = (state: AudioPlayerState) => ({
+  currentPlaybackRate: state.currentPlaybackRate,
+  duration: state.duration,
+  isPlaying: state.isPlaying,
+  position: state.position,
+  progress: state.progress,
+});
+
 /**
  * AudioAttachment
  * UI Component to preview the audio files
  */
 export const AudioAttachment = (props: AudioAttachmentProps) => {
-  const [currentSpeed, setCurrentSpeed] = useState<number>(1.0);
-  const [audioFinished, setAudioFinished] = useState(false);
   const soundRef = React.useRef<SoundReturnType | null>(null);
+
   const {
     hideProgressBar = false,
     item,
-    onLoad,
-    onPlayPause,
-    onProgress,
+    message,
     showSpeedSettings = false,
     testID,
     titleMaxLength,
+    isPreview = false,
   } = props;
-  const { changeAudioSpeed, pauseAudio, playAudio, seekAudio } = useAudioPlayer({ soundRef });
-  const isExpoCLI = NativeHandlers.SDK === 'stream-chat-expo';
-  const isVoiceRecording = item.type === FileTypes.VoiceRecording;
+  const isVoiceRecording = isVoiceRecordingAttachment(item);
+
+  const audioPlayer = useAudioPlayerControl({
+    duration: item.duration ?? 0,
+    mimeType: item.mime_type ?? '',
+    requester: isPreview
+      ? 'preview'
+      : message?.id && `${message?.parent_id ?? message?.id}${message?.id}`,
+    type: isVoiceRecording ? 'voiceRecording' : 'audio',
+    uri: item.asset_url ?? '',
+  });
+  const { duration, isPlaying, position, progress, currentPlaybackRate } = useStateStore(
+    audioPlayer.state,
+    audioPlayerSelector,
+  );
+
+  // Initialize the player for native cli apps
+  useEffect(() => {
+    if (soundRef.current) {
+      audioPlayer.initPlayer({ playerRef: soundRef.current });
+    }
+  }, [audioPlayer]);
+
+  // When a audio attachment in preview is removed, we need to remove the player from the pool
+  useEffect(
+    () => () => {
+      if (isPreview) {
+        audioPlayer.onRemove();
+      }
+    },
+    [audioPlayer, isPreview],
+  );
 
   /** This is for Native CLI Apps */
   const handleLoad = (payload: VideoPayloadData) => {
-    // The duration given by the rn-video is not same as the one of the voice recording, so we take the actual duration for voice recording.
-    if (isVoiceRecording && item.duration) {
-      onLoad(item.id, item.duration);
-    } else {
-      onLoad(item.id, item.duration || payload.duration);
+    // If the attachment is a voice recording, we rely on the duration from the attachment as the one from the react-native-video is incorrect.
+    if (isVoiceRecording) {
+      return;
     }
+    audioPlayer.duration = payload.duration * ONE_SECOND_IN_MILLISECONDS;
   };
 
   /** This is for Native CLI Apps */
   const handleProgress = (data: VideoProgressData) => {
-    const { currentTime, seekableDuration } = data;
-    // The duration given by the rn-video is not same as the one of the voice recording, so we take the actual duration for voice recording.
-    if (isVoiceRecording && item.duration) {
-      if (currentTime < item.duration && !audioFinished) {
-        onProgress(item.id, currentTime / item.duration);
-      } else {
-        setAudioFinished(true);
-      }
-    } else {
-      if (currentTime < seekableDuration && !audioFinished) {
-        onProgress(item.id, currentTime / seekableDuration);
-      } else {
-        setAudioFinished(true);
-      }
-    }
+    const { currentTime } = data;
+    audioPlayer.position = currentTime * ONE_SECOND_IN_MILLISECONDS;
   };
 
   /** This is for Native CLI Apps */
   const onSeek = (seekResponse: VideoSeekResponse) => {
-    setAudioFinished(false);
-    onProgress(item.id, seekResponse.currentTime / (item.duration as number));
+    audioPlayer.position = seekResponse.currentTime * ONE_SECOND_IN_MILLISECONDS;
   };
 
-  const handlePlayPause = async () => {
-    if (item.paused) {
-      if (isExpoCLI) {
-        await playAudio();
-      }
-      onPlayPause(item.id, false);
-    } else {
-      if (isExpoCLI) {
-        await pauseAudio();
-      }
-      onPlayPause(item.id, true);
-    }
+  const handlePlayPause = () => {
+    audioPlayer.toggle();
   };
 
   const handleEnd = async () => {
-    setAudioFinished(false);
-    await pauseAudio();
-    onPlayPause(item.id, true);
-    await seekAudio(0);
-  };
-
-  const dragStart = async () => {
-    if (isExpoCLI) {
-      await pauseAudio();
-    }
-    onPlayPause(item.id, true);
+    await audioPlayer.stop();
   };
 
-  const dragProgress = (progress: number) => {
-    onProgress(item.id, progress);
+  const dragStart = () => {
+    audioPlayer.pause();
   };
 
-  const dragEnd = async (progress: number) => {
-    await seekAudio(progress * (item.duration as number));
-    if (isExpoCLI) {
-      await playAudio();
-    }
-    onPlayPause(item.id, false);
+  const dragProgress = (currentProgress: number) => {
+    audioPlayer.progress = currentProgress;
   };
 
-  /** For Expo CLI */
-  const onPlaybackStatusUpdate = (playbackStatus: PlaybackStatus) => {
-    if (!playbackStatus.isLoaded) {
-      // Update your UI for the unloaded state
-      if (playbackStatus.error) {
-        console.log(`Encountered a fatal error during playback: ${playbackStatus.error}`);
-      }
-    } else {
-      const { durationMillis, positionMillis } = playbackStatus;
-      // This is done for Expo CLI where we don't get file duration from file picker
-      if (item.duration === 0) {
-        onLoad(item.id, durationMillis / 1000);
-      } else {
-        // The duration given by the expo-av is not same as the one of the voice recording, so we take the actual duration for voice recording.
-        if (isVoiceRecording && item.duration) {
-          onLoad(item.id, item.duration);
-        } else {
-          onLoad(item.id, durationMillis / 1000);
-        }
-      }
-      // Update your UI for the loaded state
-      if (playbackStatus.isPlaying) {
-        if (isVoiceRecording && item.duration) {
-          if (positionMillis <= item.duration * 1000) {
-            onProgress(item.id, positionMillis / (item.duration * 1000));
-          }
-        } else {
-          if (positionMillis <= durationMillis) {
-            onProgress(item.id, positionMillis / durationMillis);
-          }
-        }
-      } else {
-        // Update your UI for the paused state
-      }
-
-      if (playbackStatus.isBuffering) {
-        // Update your UI for the buffering state
-      }
-
-      if (playbackStatus.didJustFinish && !playbackStatus.isLooping) {
-        onProgress(item.id, 1);
-        // The player has just finished playing and will stop. Maybe you want to play something else?
-        // status: opposite of pause,says i am playing
-        handleEnd();
-      }
-    }
+  const dragEnd = async (currentProgress: number) => {
+    const positionInSeconds = (currentProgress * duration) / ONE_SECOND_IN_MILLISECONDS;
+    await audioPlayer.seek(positionInSeconds);
+    audioPlayer.play();
   };
 
-  // This is for Expo CLI, sound initialization is done here.
-  useEffect(() => {
-    if (isExpoCLI) {
-      const initiateSound = async () => {
-        if (item && item.asset_url && NativeHandlers.Sound?.initializeSound) {
-          soundRef.current = await NativeHandlers.Sound.initializeSound(
-            { uri: item.asset_url },
-            {
-              pitchCorrectionQuality: 'high',
-              progressUpdateIntervalMillis: 100,
-              shouldCorrectPitch: true,
-            },
-            onPlaybackStatusUpdate,
-          );
-        }
-      };
-      initiateSound();
-    }
-
-    return () => {
-      if (soundRef.current?.stopAsync && soundRef.current.unloadAsync) {
-        soundRef.current.stopAsync();
-        soundRef.current.unloadAsync();
-      }
-    };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  // This is needed for expo applications where the rerender doesn't occur on time thefore you need to update the state of the sound.
-  useEffect(() => {
-    const initalPlayPause = async () => {
-      if (!isExpoCLI) {
-        return;
-      }
-      try {
-        if (item.paused) {
-          await pauseAudio();
-        } else {
-          await playAudio();
-        }
-      } catch (e) {
-        console.log('An error has occurred while trying to interact with the audio. ', e);
-      }
-    };
-    // For expo CLI
-    if (!NativeHandlers.Sound?.Player) {
-      initalPlayPause();
-    }
-  }, [item.paused, isExpoCLI, pauseAudio, playAudio]);
-
   const onSpeedChangeHandler = async () => {
-    if (currentSpeed === 2.0) {
-      setCurrentSpeed(1.0);
-      await changeAudioSpeed(1.0);
-    } else {
-      if (currentSpeed === 1.0) {
-        setCurrentSpeed(1.5);
-        await changeAudioSpeed(1.5);
-      } else if (currentSpeed === 1.5) {
-        setCurrentSpeed(2.0);
-        await changeAudioSpeed(2.0);
-      }
-    }
+    await audioPlayer.changePlaybackRate();
   };
 
   const {
@@ -270,19 +195,14 @@ export const AudioAttachment = (props: AudioAttachmentProps) => {
     },
   } = useTheme();
 
-  const progressValueInSeconds = useMemo(
-    () => (item.duration as number) * (item.progress as number),
-    [item.duration, item.progress],
-  );
-
   const progressDuration = useMemo(
     () =>
-      progressValueInSeconds
-        ? progressValueInSeconds / 3600 >= 1
-          ? dayjs.duration(progressValueInSeconds, 'second').format('HH:mm:ss')
-          : dayjs.duration(progressValueInSeconds, 'second').format('mm:ss')
-        : dayjs.duration(item.duration ?? 0, 'second').format('mm:ss'),
-    [progressValueInSeconds, item.duration],
+      position
+        ? position / ONE_HOUR_IN_MILLISECONDS >= 1
+          ? dayjs.duration(position, 'milliseconds').format('HH:mm:ss')
+          : dayjs.duration(position, 'milliseconds').format('mm:ss')
+        : dayjs.duration(duration, 'milliseconds').format('mm:ss'),
+    [duration, position],
   );
 
   return (
@@ -308,7 +228,7 @@ export const AudioAttachment = (props: AudioAttachmentProps) => {
             playPauseButton,
           ]}
         >
-          {item.paused ? (
+          {!isPlaying ? (
             <Play fill={static_black} height={32} width={32} />
           ) : (
             <Pause fill={static_black} height={32} width={32} />
@@ -328,7 +248,7 @@ export const AudioAttachment = (props: AudioAttachmentProps) => {
             filenameText,
           ]}
         >
-          {item.type === FileTypes.VoiceRecording
+          {isVoiceRecordingAttachment(item)
             ? 'Recording'
             : getTrimmedAttachmentTitle(item.title, titleMaxLength)}
         </Text>
@@ -344,17 +264,17 @@ export const AudioAttachment = (props: AudioAttachmentProps) => {
                   onEndDrag={dragEnd}
                   onProgressDrag={dragProgress}
                   onStartDrag={dragStart}
-                  progress={item.progress as number}
+                  progress={progress}
                   waveformData={item.waveform_data}
                 />
               ) : (
                 <ProgressControl
-                  duration={item.duration as number}
+                  duration={duration}
                   filledColor={accent_blue}
                   onEndDrag={dragEnd}
                   onProgressDrag={dragProgress}
                   onStartDrag={dragStart}
-                  progress={item.progress as number}
+                  progress={progress}
                   testID='progress-control'
                 />
               )}
@@ -367,8 +287,8 @@ export const AudioAttachment = (props: AudioAttachmentProps) => {
             onLoad={handleLoad}
             onProgress={handleProgress}
             onSeek={onSeek}
-            paused={item.paused}
-            rate={currentSpeed}
+            paused={!isPlaying}
+            rate={currentPlaybackRate}
             soundRef={soundRef as RefObject<SoundReturnType>}
             testID='sound-player'
             uri={item.asset_url}
@@ -377,7 +297,7 @@ export const AudioAttachment = (props: AudioAttachmentProps) => {
       </View>
       {showSpeedSettings ? (
         <View style={[styles.rightContainer, rightContainer]}>
-          {item.paused ? (
+          {!isPlaying ? (
             <Audio fill={'#ffffff'} />
           ) : (
             <Pressable
@@ -390,7 +310,7 @@ export const AudioAttachment = (props: AudioAttachmentProps) => {
             >
               <Text
                 style={[styles.speedChangeButtonText, speedChangeButtonText]}
-              >{`x${currentSpeed.toFixed(1)}`}</Text>
+              >{`x${currentPlaybackRate.toFixed(1)}`}</Text>
             </Pressable>
           )}
         </View>

package/src/components/Attachment/FileAttachmentGroup.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import { StyleProp, StyleSheet, View, ViewStyle } from 'react-native';
 
-import type { Attachment } from 'stream-chat';
+import { Attachment, isAudioAttachment, isVoiceRecordingAttachment } from 'stream-chat';
 
 import { Attachment as AttachmentDefault } from './Attachment';
 
@@ -17,11 +17,10 @@ import {
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { isSoundPackageAvailable } from '../../native';
 
-import { FileTypes } from '../../types/types';
-
-export type FileAttachmentGroupPropsWithContext = Pick<MessageContextValue, 'files'> &
+export type FileAttachmentGroupPropsWithContext = Pick<MessageContextValue, 'files' | 'message'> &
   Pick<MessagesContextValue, 'Attachment' | 'AudioAttachment'> & {
     /**
+     * @deprecated Use message instead
      * The unique id for the message with file attachments
      */
     messageId: string;
@@ -38,7 +37,8 @@ type FilesToDisplayType = Attachment & {
 };
 
 const FileAttachmentGroupWithContext = (props: FileAttachmentGroupPropsWithContext) => {
-  const { Attachment, AudioAttachment, files, messageId, styles: stylesProp = {} } = props;
+  const { Attachment, AudioAttachment, files, message, styles: stylesProp = {} } = props;
+
   const [filesToDisplay, setFilesToDisplay] = useState<FilesToDisplayType[]>(() =>
     files.map((file) => ({ ...file, duration: file.duration || 0, paused: true, progress: 0 })),
   );
@@ -49,7 +49,14 @@ const FileAttachmentGroupWithContext = (props: FileAttachmentGroupPropsWithConte
     );
   }, [files]);
 
-  // Handler triggered when an audio is loaded in the message input. The initial state is defined for the audio here and the duration is set.
+  /**
+   * Handler triggered when an audio is loaded in the message input. The initial state is defined for the audio here and the duration is set.
+   * @param index - The index of the audio
+   * @param duration - The duration of the audio
+   *
+   * @deprecated This is deprecated and will be removed in the future.
+   * FIXME: Remove this in the next major version.
+   */
   const onLoad = (index: string, duration: number) => {
     setFilesToDisplay((prevFilesToDisplay) =>
       prevFilesToDisplay.map((fileToDisplay, id) => ({
@@ -59,7 +66,14 @@ const FileAttachmentGroupWithContext = (props: FileAttachmentGroupPropsWithConte
     );
   };
 
-  // The handler which is triggered when the audio progresses/ the thumb is dragged in the progress control. The progressed duration is set here.
+  /**
+   * Handler which is triggered when the audio progresses/ the thumb is dragged in the progress control. The progressed duration is set here.
+   * @param index - The index of the audio
+   * @param progress - The progress of the audio
+   *
+   * @deprecated This is deprecated and will be removed in the future.
+   * FIXME: Remove this in the next major version.
+   */
   const onProgress = (index: string, progress: number) => {
     setFilesToDisplay((prevFilesToDisplay) =>
       prevFilesToDisplay.map((filesToDisplay, id) => ({
@@ -69,7 +83,14 @@ const FileAttachmentGroupWithContext = (props: FileAttachmentGroupPropsWithConte
     );
   };
 
-  // The handler which controls or sets the paused/played state of the audio.
+  /**
+   * Handler which controls or sets the paused/played state of the audio.
+   * @param index - The index of the audio
+   * @param pausedStatus - The paused status of the audio
+   *
+   * @deprecated This is deprecated and will be removed in the future.
+   * FIXME: Remove this in the next major version.
+   */
   const onPlayPause = (index: string, pausedStatus?: boolean) => {
     if (pausedStatus === false) {
       // If the status is false we set the audio with the index as playing and the others as paused.
@@ -102,21 +123,18 @@ const FileAttachmentGroupWithContext = (props: FileAttachmentGroupPropsWithConte
     <View style={[styles.container, container, stylesProp.container]}>
       {filesToDisplay.map((file, index) => (
         <View
-          key={`file-by-attachment-group-${messageId}-${index}`}
+          key={`file-by-attachment-group-${message.id}-${index}`}
           style={[
             { paddingBottom: index !== files.length - 1 ? 4 : 0 },
             stylesProp.attachmentContainer,
             attachmentContainer,
           ]}
         >
-          {(file.type === FileTypes.Audio || file.type === FileTypes.VoiceRecording) &&
+          {(isAudioAttachment(file) || isVoiceRecordingAttachment(file)) &&
           isSoundPackageAvailable() ? (
             <AudioAttachment
-              item={{
-                ...file,
-                id: index.toString(),
-                type: file.type,
-              }}
+              item={{ ...file, id: index.toString(), type: file.type }}
+              message={message}
               onLoad={onLoad}
               onPlayPause={onPlayPause}
               onProgress={onProgress}
@@ -154,7 +172,7 @@ export type FileAttachmentGroupProps = Partial<
 export const FileAttachmentGroup = (props: FileAttachmentGroupProps) => {
   const { files: propFiles, messageId } = props;
 
-  const { files: contextFiles } = useMessageContext();
+  const { files: contextFiles, message } = useMessageContext();
 
   const { Attachment = AttachmentDefault, AudioAttachment } = useMessagesContext();
 
@@ -170,6 +188,7 @@ export const FileAttachmentGroup = (props: FileAttachmentGroupProps) => {
         Attachment,
         AudioAttachment,
         files,
+        message,
         messageId,
       }}
     />

package/src/components/AttachmentPicker/components/AttachmentPickerBottomSheetHandle.tsx

@@ -24,6 +24,9 @@ type Props = {
 export const AttachmentPickerBottomSheetHandle = ({ animatedIndex }: Props) => {
   const {
     theme: {
+      attachmentPicker: {
+        handle: { container, indicator },
+      },
       colors: { black, white },
     },
   } = useTheme();
@@ -34,8 +37,8 @@ export const AttachmentPickerBottomSheetHandle = ({ animatedIndex }: Props) => {
   }));
 
   return (
-    <Animated.View style={[styles.container, { backgroundColor: white }, style]}>
-      <View style={[styles.handle, { backgroundColor: `${black}1A` }]} />
+    <Animated.View style={[styles.container, { backgroundColor: white }, style, container]}>
+      <View style={[styles.handle, { backgroundColor: `${black}1A` }, indicator]} />
       {/* ^ 1A = 10% opacity */}
     </Animated.View>
   );