diff --git a/package/src/components/Attachment/VideoThumbnail.tsx b/package/src/components/Attachment/VideoThumbnail.tsx
index 43210eea6f..f255c32531 100644
--- a/package/src/components/Attachment/VideoThumbnail.tsx
+++ b/package/src/components/Attachment/VideoThumbnail.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { ImageBackground, ImageStyle, StyleProp, StyleSheet, ViewStyle } from 'react-native';
 
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
-import { VideoPlayIndicator } from '../ui';
+import { VideoPlayIndicator } from '../ui/VideoPlayIndicator';
 
 const styles = StyleSheet.create({
   container: {
diff --git a/package/src/components/AttachmentPicker/components/AttachmentMediaPicker/AttachmentMediaPicker.tsx b/package/src/components/AttachmentPicker/components/AttachmentMediaPicker/AttachmentMediaPicker.tsx
index 95d7491f07..86e7fac67c 100644
--- a/package/src/components/AttachmentPicker/components/AttachmentMediaPicker/AttachmentMediaPicker.tsx
+++ b/package/src/components/AttachmentPicker/components/AttachmentMediaPicker/AttachmentMediaPicker.tsx
@@ -2,6 +2,7 @@ import React, { useEffect, useMemo, useRef, useState } from 'react';
 import { Linking, StyleSheet } from 'react-native';
 
 import { renderAttachmentPickerItem } from './AttachmentPickerItem';
+import { IOS_LIMITED_DEEPLINK, type PhotoContentItemType } from './shared';
 
 import { useAttachmentPickerContext, useTheme, useTranslationContext } from '../../../../contexts';
 
@@ -9,21 +10,11 @@ import { useStableCallback } from '../../../../hooks';
 import { Picture } from '../../../../icons';
 
 import { NativeHandlers } from '../../../../native';
-import type { File } from '../../../../types/types';
 import { BottomSheetFlatList } from '../../../BottomSheetCompatibility/BottomSheetFlatList';
 import {
-  AttachmentPickerContentProps,
   AttachmentPickerGenericContent,
-} from '../AttachmentPickerContent';
-
-export const IOS_LIMITED_DEEPLINK = '@getstream/ios-limited-button' as const;
-
-export type IosLimitedItemType = { uri: typeof IOS_LIMITED_DEEPLINK };
-
-export type PhotoContentItemType = File | IosLimitedItemType;
-
-export const isIosLimited = (item: PhotoContentItemType): item is IosLimitedItemType =>
-  'uri' in item && item.uri === '@getstream/ios-limited-button';
+  type AttachmentPickerContentProps,
+} from '../AttachmentPickerGenericContent';
 
 const keyExtractor = (item: PhotoContentItemType) => item.uri;
 
diff --git a/package/src/components/AttachmentPicker/components/AttachmentMediaPicker/AttachmentPickerItem.tsx b/package/src/components/AttachmentPicker/components/AttachmentMediaPicker/AttachmentPickerItem.tsx
index 63e8e0700e..e546d40409 100644
--- a/package/src/components/AttachmentPicker/components/AttachmentMediaPicker/AttachmentPickerItem.tsx
+++ b/package/src/components/AttachmentPicker/components/AttachmentMediaPicker/AttachmentPickerItem.tsx
@@ -4,7 +4,7 @@ import { Alert, ImageBackground, StyleSheet, Text, View } from 'react-native';
 
 import { FileReference, isLocalImageAttachment, isLocalVideoAttachment } from 'stream-chat';
 
-import { isIosLimited, PhotoContentItemType } from './AttachmentMediaPicker';
+import { isIosLimited, type PhotoContentItemType } from './shared';
 
 import { useAttachmentPickerContext } from '../../../../contexts';
 import { useAttachmentManagerState } from '../../../../contexts/messageInputContext/hooks/useAttachmentManagerState';
diff --git a/package/src/components/AttachmentPicker/components/AttachmentMediaPicker/shared.ts b/package/src/components/AttachmentPicker/components/AttachmentMediaPicker/shared.ts
new file mode 100644
index 0000000000..4f2cf9ebaa
--- /dev/null
+++ b/package/src/components/AttachmentPicker/components/AttachmentMediaPicker/shared.ts
@@ -0,0 +1,10 @@
+import type { File } from '../../../../types/types';
+
+export const IOS_LIMITED_DEEPLINK = '@getstream/ios-limited-button' as const;
+
+export type IosLimitedItemType = { uri: typeof IOS_LIMITED_DEEPLINK };
+
+export type PhotoContentItemType = File | IosLimitedItemType;
+
+export const isIosLimited = (item: PhotoContentItemType): item is IosLimitedItemType =>
+  'uri' in item && item.uri === IOS_LIMITED_DEEPLINK;
diff --git a/package/src/components/AttachmentPicker/components/AttachmentPickerContent.tsx b/package/src/components/AttachmentPicker/components/AttachmentPickerContent.tsx
index 6a26aeffe8..35233862f2 100644
--- a/package/src/components/AttachmentPicker/components/AttachmentPickerContent.tsx
+++ b/package/src/components/AttachmentPicker/components/AttachmentPickerContent.tsx
@@ -1,5 +1,5 @@
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { Linking, Platform, Pressable, StyleSheet, Text, View } from 'react-native';
+import { Linking, Platform, Pressable, StyleSheet, Text } from 'react-native';
 
 import { FlatList } from 'react-native-gesture-handler';
 
@@ -7,6 +7,11 @@ import { CommandSearchSource, CommandSuggestion } from 'stream-chat';
 
 import { AttachmentMediaPicker } from './AttachmentMediaPicker/AttachmentMediaPicker';
 
+import {
+  AttachmentPickerGenericContent,
+  type AttachmentPickerContentProps,
+} from './AttachmentPickerGenericContent';
+
 import {
   useAttachmentPickerContext,
   useBottomSheetContext,
@@ -16,90 +21,9 @@ import {
 } from '../../../contexts';
 import { useTheme } from '../../../contexts/themeContext/ThemeContext';
 import { useAttachmentPickerState, useStableCallback } from '../../../hooks';
-import { Camera, FilePickerIcon, IconProps, PollThumbnail, Recorder } from '../../../icons';
+import { Camera, FilePickerIcon, PollThumbnail, Recorder } from '../../../icons';
 import { primitives } from '../../../theme';
 import { CommandSuggestionItem } from '../../AutoCompleteInput/AutoCompleteSuggestionItem';
-import { Button } from '../../ui';
-
-const useStyles = () => {
-  const {
-    theme: { semantics },
-  } = useTheme();
-
-  return useMemo(
-    () =>
-      StyleSheet.create({
-        container: {
-          alignItems: 'center',
-          justifyContent: 'center',
-          backgroundColor: semantics.backgroundCoreElevation1,
-          paddingHorizontal: primitives.spacing2xl,
-          paddingBottom: primitives.spacing3xl,
-        },
-        infoContainer: { flex: 1, alignItems: 'center', justifyContent: 'center' },
-        text: {
-          fontSize: primitives.typographyFontSizeMd,
-          color: semantics.textSecondary,
-          marginTop: 8,
-          marginHorizontal: 24,
-          textAlign: 'center',
-          maxWidth: 200,
-        },
-      }),
-    [semantics.backgroundCoreElevation1, semantics.textSecondary],
-  );
-};
-
-export type AttachmentPickerGenericContentProps = {
-  Icon: React.ComponentType<IconProps>;
-  onPress: () => void;
-  height?: number;
-  buttonText?: string;
-  description?: string;
-};
-
-export const AttachmentPickerGenericContent = (props: AttachmentPickerGenericContentProps) => {
-  const { height, buttonText, Icon, description, onPress } = props;
-  const styles = useStyles();
-
-  const {
-    theme: {
-      semantics,
-      attachmentPicker: {
-        content: { container, text, infoContainer },
-      },
-    },
-  } = useTheme();
-
-  const ThemedIcon = useCallback(
-    () => <Icon width={22} height={22} stroke={semantics.textTertiary} />,
-    [Icon, semantics.textTertiary],
-  );
-
-  return (
-    <View
-      style={[
-        styles.container,
-        {
-          height,
-        },
-        container,
-      ]}
-    >
-      <View style={[styles.infoContainer, infoContainer]}>
-        <ThemedIcon />
-        <Text style={[styles.text, text]}>{description}</Text>
-      </View>
-      <Button
-        variant={'secondary'}
-        type={'outline'}
-        size={'lg'}
-        label={buttonText}
-        onPress={onPress}
-      />
-    </View>
-  );
-};
 
 const keyExtractor = (item: { id: string }) => item.id;
 
@@ -298,7 +222,7 @@ export const AttachmentFilePicker = (props: AttachmentPickerContentProps) => {
   );
 };
 
-export type AttachmentPickerContentProps = Pick<AttachmentPickerGenericContentProps, 'height'>;
+export type { AttachmentPickerContentProps } from './AttachmentPickerGenericContent';
 
 export const AttachmentPickerContent = (props: AttachmentPickerContentProps) => {
   const { height } = props;
diff --git a/package/src/components/AttachmentPicker/components/AttachmentPickerGenericContent.tsx b/package/src/components/AttachmentPicker/components/AttachmentPickerGenericContent.tsx
new file mode 100644
index 0000000000..768680a576
--- /dev/null
+++ b/package/src/components/AttachmentPicker/components/AttachmentPickerGenericContent.tsx
@@ -0,0 +1,90 @@
+import React, { useCallback, useMemo } from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+
+import { useTheme } from '../../../contexts/themeContext/ThemeContext';
+import { IconProps } from '../../../icons';
+import { primitives } from '../../../theme';
+import { Button } from '../../ui';
+
+const useStyles = () => {
+  const {
+    theme: { semantics },
+  } = useTheme();
+
+  return useMemo(
+    () =>
+      StyleSheet.create({
+        container: {
+          alignItems: 'center',
+          justifyContent: 'center',
+          backgroundColor: semantics.backgroundCoreElevation1,
+          paddingHorizontal: primitives.spacing2xl,
+          paddingBottom: primitives.spacing3xl,
+        },
+        infoContainer: { flex: 1, alignItems: 'center', justifyContent: 'center' },
+        text: {
+          fontSize: primitives.typographyFontSizeMd,
+          color: semantics.textSecondary,
+          marginTop: 8,
+          marginHorizontal: 24,
+          textAlign: 'center',
+          maxWidth: 200,
+        },
+      }),
+    [semantics.backgroundCoreElevation1, semantics.textSecondary],
+  );
+};
+
+export type AttachmentPickerContentProps = {
+  height?: number;
+};
+
+export type AttachmentPickerGenericContentProps = AttachmentPickerContentProps & {
+  Icon: React.ComponentType<IconProps>;
+  onPress: () => void;
+  buttonText?: string;
+  description?: string;
+};
+
+export const AttachmentPickerGenericContent = (props: AttachmentPickerGenericContentProps) => {
+  const { height, buttonText, Icon, description, onPress } = props;
+  const styles = useStyles();
+
+  const {
+    theme: {
+      semantics,
+      attachmentPicker: {
+        content: { container, text, infoContainer },
+      },
+    },
+  } = useTheme();
+
+  const ThemedIcon = useCallback(
+    () => <Icon width={22} height={22} stroke={semantics.textTertiary} />,
+    [Icon, semantics.textTertiary],
+  );
+
+  return (
+    <View
+      style={[
+        styles.container,
+        {
+          height,
+        },
+        container,
+      ]}
+    >
+      <View style={[styles.infoContainer, infoContainer]}>
+        <ThemedIcon />
+        <Text style={[styles.text, text]}>{description}</Text>
+      </View>
+      <Button
+        variant={'secondary'}
+        type={'outline'}
+        size={'lg'}
+        label={buttonText}
+        onPress={onPress}
+      />
+    </View>
+  );
+};
diff --git a/package/src/components/Channel/Channel.tsx b/package/src/components/Channel/Channel.tsx
index 16f3a3bba0..ec851251d1 100644
--- a/package/src/components/Channel/Channel.tsx
+++ b/package/src/components/Channel/Channel.tsx
@@ -215,13 +215,11 @@ import { emojis } from '../MessageMenu/emojis';
 import { MessageActionList as MessageActionListDefault } from '../MessageMenu/MessageActionList';
 import { MessageActionListItem as MessageActionListItemDefault } from '../MessageMenu/MessageActionListItem';
 import { MessageMenu as MessageMenuDefault } from '../MessageMenu/MessageMenu';
-import {
-  MessageReactionPicker as MessageReactionPickerDefault,
-  toUnicodeScalarString,
-} from '../MessageMenu/MessageReactionPicker';
+import { MessageReactionPicker as MessageReactionPickerDefault } from '../MessageMenu/MessageReactionPicker';
 import { MessageUserReactions as MessageUserReactionsDefault } from '../MessageMenu/MessageUserReactions';
 import { MessageUserReactionsAvatar as MessageUserReactionsAvatarDefault } from '../MessageMenu/MessageUserReactionsAvatar';
 import { MessageUserReactionsItem as MessageUserReactionsItemDefault } from '../MessageMenu/MessageUserReactionsItem';
+import { toUnicodeScalarString } from '../MessageMenu/utils/toUnicodeScalarString';
 import { Reply as ReplyDefault } from '../Reply/Reply';
 
 export type MarkReadFunctionOptions = {
diff --git a/package/src/components/ImageGallery/components/ImageGalleryFooter.tsx b/package/src/components/ImageGallery/components/ImageGalleryFooter.tsx
index ec3f101d1e..4b1d994e5e 100644
--- a/package/src/components/ImageGallery/components/ImageGalleryFooter.tsx
+++ b/package/src/components/ImageGallery/components/ImageGalleryFooter.tsx
@@ -1,16 +1,10 @@
 import React, { useMemo, useRef, useState } from 'react';
 import { ActivityIndicator, StyleSheet, Text, View, ViewStyle } from 'react-native';
-import Animated, {
-  Extrapolation,
-  interpolate,
-  SharedValue,
-  useAnimatedStyle,
-} from 'react-native-reanimated';
+import Animated, { Extrapolation, interpolate, useAnimatedStyle } from 'react-native-reanimated';
 
-import {
-  ImageGalleryProviderProps,
-  useImageGalleryContext,
-} from '../../../contexts/imageGalleryContext/ImageGalleryContext';
+import type { ImageGalleryFooterProps, ImageGalleryVideoControlProps } from './types';
+
+import { useImageGalleryContext } from '../../../contexts/imageGalleryContext/ImageGalleryContextBase';
 import { useTheme } from '../../../contexts/themeContext/ThemeContext';
 import { useTranslationContext } from '../../../contexts/translationContext/TranslationContext';
 import { useStateStore } from '../../../hooks/useStateStore';
@@ -38,24 +32,10 @@ export type ImageGalleryFooterCustomComponent = ({
   shareMenuOpen: boolean;
 }) => React.ReactElement | null;
 
-export type ImageGalleryVideoControlProps = {
-  attachmentId: string;
-};
-
 export type ImageGalleryVideoControlComponent = ({
   attachmentId,
 }: ImageGalleryVideoControlProps) => React.ReactElement | null;
 
-export type ImageGalleryFooterProps = Pick<
-  ImageGalleryProviderProps,
-  'ImageGalleryVideoControls'
-> & {
-  accessibilityLabel: string;
-  opacity: SharedValue<number>;
-  openGridView: () => void;
-  visible: SharedValue<number>;
-};
-
 const imageGallerySelector = (state: ImageGalleryState) => ({
   asset: state.assets[state.currentIndex],
   currentIndex: state.currentIndex,
diff --git a/package/src/components/ImageGallery/components/ImageGalleryHeader.tsx b/package/src/components/ImageGallery/components/ImageGalleryHeader.tsx
index fafef3c6a0..2dc59715dd 100644
--- a/package/src/components/ImageGallery/components/ImageGalleryHeader.tsx
+++ b/package/src/components/ImageGallery/components/ImageGalleryHeader.tsx
@@ -2,14 +2,11 @@ import React, { useEffect, useMemo, useState } from 'react';
 
 import { StyleSheet, Text, View, ViewStyle } from 'react-native';
 
-import Animated, {
-  Extrapolation,
-  interpolate,
-  SharedValue,
-  useAnimatedStyle,
-} from 'react-native-reanimated';
+import Animated, { Extrapolation, interpolate, useAnimatedStyle } from 'react-native-reanimated';
 
-import { useImageGalleryContext } from '../../../contexts/imageGalleryContext/ImageGalleryContext';
+import type { ImageGalleryHeaderProps } from './types';
+
+import { useImageGalleryContext } from '../../../contexts/imageGalleryContext/ImageGalleryContextBase';
 import { useOverlayContext } from '../../../contexts/overlayContext/OverlayContext';
 import { useTheme } from '../../../contexts/themeContext/ThemeContext';
 import { useTranslationContext } from '../../../contexts/translationContext/TranslationContext';
@@ -26,11 +23,6 @@ const ReanimatedSafeAreaView = Animated.createAnimatedComponent
   ? Animated.createAnimatedComponent(SafeAreaView)
   : SafeAreaView;
 
-export type ImageGalleryHeaderProps = {
-  opacity: SharedValue<number>;
-  visible: SharedValue<number>;
-};
-
 const imageGallerySelector = (state: ImageGalleryState) => ({
   asset: state.assets[state.currentIndex],
 });
diff --git a/package/src/components/ImageGallery/components/ImageGalleryVideoControl.tsx b/package/src/components/ImageGallery/components/ImageGalleryVideoControl.tsx
index 0659349ba4..36501e6121 100644
--- a/package/src/components/ImageGallery/components/ImageGalleryVideoControl.tsx
+++ b/package/src/components/ImageGallery/components/ImageGalleryVideoControl.tsx
@@ -1,7 +1,7 @@
 import React, { useCallback, useMemo } from 'react';
 import { StyleSheet, Text, View } from 'react-native';
 
-import { ImageGalleryVideoControlProps } from './ImageGalleryFooter';
+import type { ImageGalleryVideoControlProps } from './types';
 
 import { useTheme } from '../../../contexts/themeContext/ThemeContext';
 
diff --git a/package/src/components/ImageGallery/components/ImageGrid.tsx b/package/src/components/ImageGallery/components/ImageGrid.tsx
index e74563a18d..9e7df0a1f2 100644
--- a/package/src/components/ImageGallery/components/ImageGrid.tsx
+++ b/package/src/components/ImageGallery/components/ImageGrid.tsx
@@ -1,8 +1,10 @@
 import React, { useMemo } from 'react';
 import { Image, Pressable, StyleSheet, View } from 'react-native';
 
+import type { ImageGalleryGridProps } from './types';
+
 import { VideoThumbnail } from '../../../components/Attachment/VideoThumbnail';
-import { useImageGalleryContext } from '../../../contexts/imageGalleryContext/ImageGalleryContext';
+import { useImageGalleryContext } from '../../../contexts/imageGalleryContext/ImageGalleryContextBase';
 import { useTheme } from '../../../contexts/themeContext/ThemeContext';
 import { useStateStore } from '../../../hooks/useStateStore';
 import { useViewport } from '../../../hooks/useViewport';
@@ -11,7 +13,7 @@ import type {
   ImageGalleryState,
 } from '../../../state-store/image-gallery-state-store';
 import { FileTypes } from '../../../types/types';
-import { StreamBottomSheetModalFlatList } from '../../UIComponents';
+import { StreamBottomSheetModalFlatList } from '../../UIComponents/StreamBottomSheetModalFlatList';
 
 export type ImageGalleryGridImageComponent = ({
   item,
@@ -51,11 +53,6 @@ const GridImage = ({ item }: { item: GridImageItem }) => {
 
 const renderItem = ({ item }: { item: GridImageItem }) => <GridImage item={item} />;
 
-export type ImageGalleryGridProps = {
-  closeGridView: () => void;
-  numberOfImageGalleryGridColumns?: number;
-};
-
 const imageGallerySelector = (state: ImageGalleryState) => ({
   assets: state.assets,
 });
diff --git a/package/src/components/ImageGallery/components/types.ts b/package/src/components/ImageGallery/components/types.ts
new file mode 100644
index 0000000000..68fce8877e
--- /dev/null
+++ b/package/src/components/ImageGallery/components/types.ts
@@ -0,0 +1,25 @@
+import type React from 'react';
+
+import type { SharedValue } from 'react-native-reanimated';
+
+export type ImageGalleryVideoControlProps = {
+  attachmentId: string;
+};
+
+export type ImageGalleryHeaderProps = {
+  opacity: SharedValue<number>;
+  visible: SharedValue<number>;
+};
+
+export type ImageGalleryFooterProps = {
+  accessibilityLabel: string;
+  ImageGalleryVideoControls?: React.ComponentType<ImageGalleryVideoControlProps>;
+  opacity: SharedValue<number>;
+  openGridView: () => void;
+  visible: SharedValue<number>;
+};
+
+export type ImageGalleryGridProps = {
+  closeGridView: () => void;
+  numberOfImageGalleryGridColumns?: number;
+};
diff --git a/package/src/components/ImageGallery/hooks/useImageGalleryVideoPlayer.ts b/package/src/components/ImageGallery/hooks/useImageGalleryVideoPlayer.ts
index 1961497070..e4e073212c 100644
--- a/package/src/components/ImageGallery/hooks/useImageGalleryVideoPlayer.ts
+++ b/package/src/components/ImageGallery/hooks/useImageGalleryVideoPlayer.ts
@@ -1,6 +1,6 @@
 import { useMemo } from 'react';
 
-import { useImageGalleryContext } from '../../../contexts/imageGalleryContext/ImageGalleryContext';
+import { useImageGalleryContext } from '../../../contexts/imageGalleryContext/ImageGalleryContextBase';
 import { VideoPlayerOptions } from '../../../state-store/video-player';
 
 export type UseImageGalleryVideoPlayerProps = VideoPlayerOptions;
diff --git a/package/src/components/MessageMenu/EmojiPickerList.tsx b/package/src/components/MessageMenu/EmojiPickerList.tsx
index 144a68304b..af00387c4e 100644
--- a/package/src/components/MessageMenu/EmojiPickerList.tsx
+++ b/package/src/components/MessageMenu/EmojiPickerList.tsx
@@ -5,9 +5,9 @@ import { Pressable } from 'react-native-gesture-handler';
 import { emojis } from './emojis';
 
 import { useHasOwnReaction } from './hooks/useHasOwnReaction';
-import { toUnicodeScalarString } from './MessageReactionPicker';
+import { toUnicodeScalarString } from './utils/toUnicodeScalarString';
 
-import { useTheme } from '../../contexts';
+import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { useStableCallback } from '../../hooks';
 import { primitives } from '../../theme';
 import { StreamBottomSheetModalFlatList } from '../UIComponents';
diff --git a/package/src/components/MessageMenu/MessageReactionPicker.tsx b/package/src/components/MessageMenu/MessageReactionPicker.tsx
index 7c10f83255..332258edf6 100644
--- a/package/src/components/MessageMenu/MessageReactionPicker.tsx
+++ b/package/src/components/MessageMenu/MessageReactionPicker.tsx
@@ -133,14 +133,6 @@ export const EmojiViewerButton = ({
   );
 };
 
-// TODO: V9: Move this to utils and also clean it up a bit.
-//  This was done quickly and in a bit of a hurry.
-export const toUnicodeScalarString = (emoji: string): string => {
-  const out: number[] = [];
-  for (const ch of emoji) out.push(ch.codePointAt(0)!);
-  return out.map((cp) => `U+${cp.toString(16).toUpperCase().padStart(4, '0')}`).join('-');
-};
-
 /**
  * MessageReactionPicker - A high level component which implements all the logic required for a message overlay reaction list
  */
diff --git a/package/src/components/MessageMenu/utils/toUnicodeScalarString.ts b/package/src/components/MessageMenu/utils/toUnicodeScalarString.ts
new file mode 100644
index 0000000000..bd35ad2029
--- /dev/null
+++ b/package/src/components/MessageMenu/utils/toUnicodeScalarString.ts
@@ -0,0 +1,5 @@
+export const toUnicodeScalarString = (emoji: string): string => {
+  const out: number[] = [];
+  for (const ch of emoji) out.push(ch.codePointAt(0)!);
+  return out.map((cp) => `U+${cp.toString(16).toUpperCase().padStart(4, '0')}`).join('-');
+};
diff --git a/package/src/components/index.ts b/package/src/components/index.ts
index d4fe5f1bce..1cf41c4af6 100644
--- a/package/src/components/index.ts
+++ b/package/src/components/index.ts
@@ -13,6 +13,7 @@ export * from './Attachment/utils/buildGallery/buildGallery';
 export * from './AttachmentPicker/AttachmentPicker';
 export * from './AttachmentPicker/components/AttachmentPickerContent';
 export * from './AttachmentPicker/components/AttachmentMediaPicker';
+export * from './AttachmentPicker/components/AttachmentMediaPicker/shared';
 export * from './AttachmentPicker/components/AttachmentPickerSelectionBar';
 export * from './AttachmentPicker/components/AttachmentTypePickerButton';
 export * from './AttachmentPicker/components/ImageOverlaySelectedComponent';
@@ -68,6 +69,7 @@ export * from './ImageGallery/components/ImageGalleryFooter';
 export * from './ImageGallery/components/ImageGalleryHeader';
 export * from './ImageGallery/components/ImageGrid';
 export * from './ImageGallery/components/ImageGalleryVideoControl';
+export * from './ImageGallery/components/types';
 export * from './ImageGallery/hooks/useImageGalleryVideoPlayer';
 
 export * from './Indicators/EmptyStateIndicator';
@@ -165,6 +167,7 @@ export * from './MessageMenu/MessageMenu';
 export * from './MessageMenu/MessageUserReactions';
 export * from './MessageMenu/MessageUserReactionsAvatar';
 export * from './MessageMenu/MessageReactionPicker';
+export * from './MessageMenu/utils/toUnicodeScalarString';
 export * from './MessageMenu/hooks/useFetchReactions';
 
 export * from './ProgressControl/ProgressControl';
diff --git a/package/src/components/ui/SpeedSettingsButton.tsx b/package/src/components/ui/SpeedSettingsButton.tsx
index 9c4515e1bc..3a9170465f 100644
--- a/package/src/components/ui/SpeedSettingsButton.tsx
+++ b/package/src/components/ui/SpeedSettingsButton.tsx
@@ -2,7 +2,7 @@ import React, { useMemo } from 'react';
 
 import { Pressable, StyleProp, StyleSheet, Text, ViewStyle } from 'react-native';
 
-import { useTheme } from '../../contexts';
+import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { primitives } from '../../theme';
 
 export type SpeedSettingsButtonProps = {
diff --git a/package/src/components/ui/VideoPlayIndicator.tsx b/package/src/components/ui/VideoPlayIndicator.tsx
index 0a6dff217b..0c30dd0f67 100644
--- a/package/src/components/ui/VideoPlayIndicator.tsx
+++ b/package/src/components/ui/VideoPlayIndicator.tsx
@@ -1,7 +1,7 @@
 import React, { useMemo } from 'react';
 import { StyleSheet, View } from 'react-native';
 
-import { useTheme } from '../../contexts';
+import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { Play } from '../../icons/Play';
 import { primitives } from '../../theme';
 
diff --git a/package/src/contexts/imageGalleryContext/ImageGalleryContext.tsx b/package/src/contexts/imageGalleryContext/ImageGalleryContext.tsx
index 32cb7a8710..4626097b8b 100644
--- a/package/src/contexts/imageGalleryContext/ImageGalleryContext.tsx
+++ b/package/src/contexts/imageGalleryContext/ImageGalleryContext.tsx
@@ -1,42 +1,17 @@
-import React, { PropsWithChildren, useContext, useEffect, useMemo, useState } from 'react';
-
-import { Attachment } from 'stream-chat';
+import React, { PropsWithChildren, useEffect, useMemo, useState } from 'react';
 
 import {
-  ImageGalleryFooterProps,
-  ImageGalleryVideoControlProps,
-} from '../../components/ImageGallery/components/ImageGalleryFooter';
+  ImageGalleryContext,
+  type ImageGalleryContextValue,
+  type ImageGalleryProviderProps,
+  useImageGalleryContext,
+} from './ImageGalleryContextBase';
+
 import { ImageGalleryFooter as ImageGalleryFooterDefault } from '../../components/ImageGallery/components/ImageGalleryFooter';
-import { ImageGalleryHeaderProps } from '../../components/ImageGallery/components/ImageGalleryHeader';
 import { ImageGalleryHeader as ImageGalleryHeaderDefault } from '../../components/ImageGallery/components/ImageGalleryHeader';
 import { ImageGalleryVideoControl as ImageGalleryVideoControlDefault } from '../../components/ImageGallery/components/ImageGalleryVideoControl';
-import { ImageGalleryGridProps } from '../../components/ImageGallery/components/ImageGrid';
 import { ImageGalleryGrid as ImageGalleryGridDefault } from '../../components/ImageGallery/components/ImageGrid';
 import { ImageGalleryStateStore } from '../../state-store/image-gallery-state-store';
-import { DEFAULT_BASE_CONTEXT_VALUE } from '../utils/defaultBaseContextValue';
-
-import { isTestEnvironment } from '../utils/isTestEnvironment';
-
-export type ImageGalleryProviderProps = {
-  autoPlayVideo?: boolean;
-  /**
-   * The giphy version to render - check the keys of the [Image Object](https://developers.giphy.com/docs/api/schema#image-object) for possible values. Uses 'fixed_height' by default
-   * */
-  giphyVersion?: keyof NonNullable<Attachment['giphy']>;
-  numberOfImageGalleryGridColumns?: number;
-  ImageGalleryHeader?: React.ComponentType<ImageGalleryHeaderProps>;
-  ImageGalleryFooter?: React.ComponentType<ImageGalleryFooterProps>;
-  ImageGalleryVideoControls?: React.ComponentType<ImageGalleryVideoControlProps>;
-  ImageGalleryGrid?: React.ComponentType<ImageGalleryGridProps>;
-};
-
-export type ImageGalleryContextValue = ImageGalleryProviderProps & {
-  imageGalleryStateStore: ImageGalleryStateStore;
-};
-
-export const ImageGalleryContext = React.createContext(
-  DEFAULT_BASE_CONTEXT_VALUE as ImageGalleryContextValue,
-);
 
 export const ImageGalleryProvider = ({
   children,
@@ -72,15 +47,5 @@ export const ImageGalleryProvider = ({
     </ImageGalleryContext.Provider>
   );
 };
-
-export const useImageGalleryContext = () => {
-  const contextValue = useContext(ImageGalleryContext) as unknown as ImageGalleryContextValue;
-
-  if (contextValue === DEFAULT_BASE_CONTEXT_VALUE && !isTestEnvironment()) {
-    throw new Error(
-      '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',
-    );
-  }
-
-  return contextValue as ImageGalleryContextValue;
-};
+export { ImageGalleryContext, useImageGalleryContext };
+export type { ImageGalleryContextValue, ImageGalleryProviderProps };
diff --git a/package/src/contexts/imageGalleryContext/ImageGalleryContextBase.tsx b/package/src/contexts/imageGalleryContext/ImageGalleryContextBase.tsx
new file mode 100644
index 0000000000..2ca8473ac8
--- /dev/null
+++ b/package/src/contexts/imageGalleryContext/ImageGalleryContextBase.tsx
@@ -0,0 +1,44 @@
+import React, { useContext } from 'react';
+
+import type { Attachment } from 'stream-chat';
+
+import type {
+  ImageGalleryFooterProps,
+  ImageGalleryGridProps,
+  ImageGalleryHeaderProps,
+  ImageGalleryVideoControlProps,
+} from '../../components/ImageGallery/components/types';
+import { ImageGalleryStateStore } from '../../state-store/image-gallery-state-store';
+import { DEFAULT_BASE_CONTEXT_VALUE } from '../utils/defaultBaseContextValue';
+
+import { isTestEnvironment } from '../utils/isTestEnvironment';
+
+export type ImageGalleryProviderProps = {
+  autoPlayVideo?: boolean;
+  giphyVersion?: keyof NonNullable<Attachment['giphy']>;
+  numberOfImageGalleryGridColumns?: number;
+  ImageGalleryHeader?: React.ComponentType<ImageGalleryHeaderProps>;
+  ImageGalleryFooter?: React.ComponentType<ImageGalleryFooterProps>;
+  ImageGalleryVideoControls?: React.ComponentType<ImageGalleryVideoControlProps>;
+  ImageGalleryGrid?: React.ComponentType<ImageGalleryGridProps>;
+};
+
+export type ImageGalleryContextValue = ImageGalleryProviderProps & {
+  imageGalleryStateStore: ImageGalleryStateStore;
+};
+
+export const ImageGalleryContext = React.createContext(
+  DEFAULT_BASE_CONTEXT_VALUE as ImageGalleryContextValue,
+);
+
+export const useImageGalleryContext = () => {
+  const contextValue = useContext(ImageGalleryContext) as unknown as ImageGalleryContextValue;
+
+  if (contextValue === DEFAULT_BASE_CONTEXT_VALUE && !isTestEnvironment()) {
+    throw new Error(
+      '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',
+    );
+  }
+
+  return contextValue as ImageGalleryContextValue;
+};
diff --git a/package/src/hooks/messagePreview/useMessagePreviewText.tsx b/package/src/hooks/messagePreview/useMessagePreviewText.tsx
index 34d8271685..9e5d246da6 100644
--- a/package/src/hooks/messagePreview/useMessagePreviewText.tsx
+++ b/package/src/hooks/messagePreview/useMessagePreviewText.tsx
@@ -10,7 +10,7 @@ import {
 import { useGroupedAttachments } from './useGroupedAttachments';
 
 import { useChatContext } from '../../contexts/chatContext/ChatContext';
-import { useStateStore } from '../../hooks';
+import { useStateStore } from '../../hooks/useStateStore';
 
 const selector = (nextValue: PollState) => ({
   name: nextValue.name,
diff --git a/package/src/hooks/useAttachmentPickerState.ts b/package/src/hooks/useAttachmentPickerState.ts
index 1dee9f01c3..14591f856c 100644
--- a/package/src/hooks/useAttachmentPickerState.ts
+++ b/package/src/hooks/useAttachmentPickerState.ts
@@ -1,6 +1,6 @@
 import { useStateStore } from './useStateStore';
 
-import { useAttachmentPickerContext } from '../contexts';
+import { useAttachmentPickerContext } from '../contexts/attachmentPickerContext/AttachmentPickerContext';
 import { AttachmentPickerState } from '../state-store/attachment-picker-store';
 
 const selector = (nextState: AttachmentPickerState) => ({