stream-chat-react-native-core 9.6.2-beta.4 → 9.7.0-beta.1

package/src/components/Poll/components/CreatePollOptions.tsx

@@ -25,11 +25,9 @@ import Animated, {
 import { PollComposerOption, PollComposerState } from 'stream-chat';
 
 import { useCreatePollContentContext, useTheme, useTranslationContext } from '../../../contexts';
+import { useComponentsContext } from '../../../contexts/componentsContext/ComponentsContext';
 import { useMessageComposer } from '../../../contexts/messageInputContext/hooks/useMessageComposer';
 import { useStateStore } from '../../../hooks/useStateStore';
-import { InfoTooltip } from '../../../icons/info';
-import { CircleMinus } from '../../../icons/minus-circle';
-import { DotGrid } from '../../../icons/reorder';
 import { primitives } from '../../../theme';
 
 export type CurrentOptionPositionsCache = {
@@ -285,6 +283,7 @@ export const CreatePollOption = ({
   onRemoveOption,
 }: CreatePollOptionType) => {
   const { t } = useTranslationContext();
+  const { icons } = useComponentsContext();
   const { createPollOptionGap = 8 } = useCreatePollContentContext();
   const normalizedCreatePollOptionGap =
     Number.isFinite(createPollOptionGap) && createPollOptionGap > 0 ? createPollOptionGap : 0;
@@ -510,7 +509,7 @@ export const CreatePollOption = ({
       <Animated.View layout={LayoutTransition} style={[styles.optionContent, optionStyle.content]}>
         <GestureDetector gesture={gesture}>
           <Animated.View>
-            <DotGrid height={20} width={20} stroke={semantics.inputTextIcon} />
+            <icons.DotGrid height={20} width={20} stroke={semantics.inputTextIcon} />
           </Animated.View>
         </GestureDetector>
         <TextInput
@@ -521,7 +520,7 @@ export const CreatePollOption = ({
           style={[styles.optionInput, optionStyle.input]}
         />
         <Pressable onPress={onRemoveOptionHandler}>
-          <CircleMinus height={20} width={20} stroke={semantics.inputTextIcon} />
+          <icons.CircleMinus height={20} width={20} stroke={semantics.inputTextIcon} />
         </Pressable>
       </Animated.View>
 
@@ -530,7 +529,7 @@ export const CreatePollOption = ({
           onLayout={onErrorLayoutHandler}
           style={[styles.optionValidationErrorContainer, optionStyle.validationErrorContainer]}
         >
-          <InfoTooltip height={20} width={20} fill={semantics.accentError} />
+          <icons.InfoTooltip height={20} width={20} fill={semantics.accentError} />
           <Text style={[styles.optionValidationError, optionStyle.validationErrorText]}>
             {t(error)}
           </Text>

package/src/components/Poll/components/MultipleVotesSettings.tsx

@@ -6,10 +6,10 @@ import Animated, { LinearTransition, StretchInY, StretchOutY } from 'react-nativ
 import { PollComposerState } from 'stream-chat';
 
 import { useCreatePollContentContext, useTheme, useTranslationContext } from '../../../contexts';
+import { useComponentsContext } from '../../../contexts/componentsContext/ComponentsContext';
 import { useMessageComposer } from '../../../contexts/messageInputContext/hooks/useMessageComposer';
 import { useStableCallback } from '../../../hooks';
 import { useStateStore } from '../../../hooks/useStateStore';
-import { Minus, Plus } from '../../../icons';
 import { primitives } from '../../../theme';
 import { useRtlMirrorSwitchStyle } from '../../../utils/rtlMirrorSwitchStyle';
 import { Button } from '../../ui';
@@ -96,6 +96,7 @@ const MaxVotesTextInput = () => {
 export const MultipleVotesSettings = () => {
   const [allowMaxVotesPerPerson, setAllowMaxVotesPerPerson] = useState<boolean>(false);
   const { t } = useTranslationContext();
+  const { icons } = useComponentsContext();
   const { modalStateStore } = useCreatePollContentContext();
   const { isClosing = false } = useStateStore(modalStateStore, modalStateSelector) ?? {};
   const messageComposer = useMessageComposer();
@@ -168,7 +169,7 @@ export const MultipleVotesSettings = () => {
             type='outline'
             size='md'
             iconOnly
-            LeadingIcon={Minus}
+            LeadingIcon={icons.Minus}
             onPress={decrementMaxVotes}
             disabled={decrementDisabled}
             style={decrementDisabled ? styles.buttonDisabled : styles.buttonEnabled}
@@ -181,7 +182,7 @@ export const MultipleVotesSettings = () => {
             type='outline'
             size='md'
             iconOnly
-            LeadingIcon={Plus}
+            LeadingIcon={icons.Plus}
             onPress={incrementMaxVotes}
             disabled={incrementDisabled}
             style={incrementDisabled ? styles.buttonDisabled : styles.buttonEnabled}

package/src/components/Poll/components/PollModalHeader.tsx

@@ -2,7 +2,7 @@ import React, { useMemo } from 'react';
 import { StyleSheet, Text, View } from 'react-native';
 
 import { useTheme } from '../../../contexts';
-import { Cross } from '../../../icons/xmark-1';
+import { useComponentsContext } from '../../../contexts/componentsContext/ComponentsContext';
 import { primitives } from '../../../theme';
 import { Button } from '../../ui';
 
@@ -12,6 +12,7 @@ export type PollModalHeaderProps = {
 };
 
 export const PollModalHeader = ({ onPress, title }: PollModalHeaderProps) => {
+  const { icons } = useComponentsContext();
   const {
     theme: {
       poll: {
@@ -30,7 +31,7 @@ export const PollModalHeader = ({ onPress, title }: PollModalHeaderProps) => {
           type='outline'
           size='md'
           iconOnly
-          LeadingIcon={Cross}
+          LeadingIcon={icons.Cross}
           onPress={onPress}
           testID='poll-results-close-button'
         />

package/src/components/Poll/components/PollOption.tsx

@@ -18,7 +18,6 @@ import {
 } from '../../../contexts';
 import { useComponentsContext } from '../../../contexts/componentsContext/ComponentsContext';
 
-import { Check } from '../../../icons';
 import { primitives } from '../../../theme';
 import { ProgressBar } from '../../ProgressControl/ProgressBar';
 import { UserAvatarStack } from '../../ui/Avatar/AvatarStack';
@@ -165,6 +164,7 @@ export const PollOption = ({ option, showProgressBar = true, forceIncoming }: Po
 };
 
 export const VoteButton = ({ onPress, option }: PollVoteButtonProps) => {
+  const { icons } = useComponentsContext();
   const { message, poll } = usePollContext();
   const { isClosed, ownVotesByOptionId } = usePollState();
   const ownCapabilities = useOwnCapabilitiesContext();
@@ -219,7 +219,7 @@ export const VoteButton = ({ onPress, option }: PollVoteButtonProps) => {
         voteButtonContainer,
       ]}
     >
-      {hasVote ? <Check height={20} stroke={semantics.textOnAccent} width={20} /> : null}
+      {hasVote ? <icons.Check height={20} stroke={semantics.textOnAccent} width={20} /> : null}
     </Pressable>
   ) : null;
 };

package/src/components/ThreadList/ThreadListUnreadBanner.tsx

@@ -4,9 +4,8 @@ import { Pressable, StyleSheet, Text, View } from 'react-native';
 import { ThreadManagerState } from 'stream-chat';
 
 import { useChatContext, useTheme, useTranslationContext } from '../../contexts';
+import { useComponentsContext } from '../../contexts/componentsContext/ComponentsContext';
 import { useStateStore } from '../../hooks';
-import { Loading, Reload } from '../../icons';
-import { ExclamationCircle } from '../../icons/exclamation-circle-fill';
 import { primitives } from '../../theme';
 
 const selector = (nextValue: ThreadManagerState) =>
@@ -16,6 +15,7 @@ export const ThreadListUnreadBanner = () => {
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<Error | null>(null);
   const { client } = useChatContext();
+  const { icons } = useComponentsContext();
   const { t } = useTranslationContext();
   const {
     theme: { semantics },
@@ -40,7 +40,7 @@ export const ThreadListUnreadBanner = () => {
   if (loading) {
     return (
       <View style={styles.container}>
-        <Loading height={20} width={20} />
+        <icons.Loading height={20} width={20} />
         <Text style={styles.text}>{t('Loading...')}</Text>
       </View>
     );
@@ -49,7 +49,7 @@ export const ThreadListUnreadBanner = () => {
   if (error) {
     return (
       <View style={styles.container}>
-        <ExclamationCircle stroke={semantics.textSecondary} height={20} width={20} />
+        <icons.ExclamationCircle stroke={semantics.textSecondary} height={20} width={20} />
         <Text style={styles.text}>{t("Couldn't load new threads. Tap to retry")}</Text>
       </View>
     );
@@ -67,7 +67,7 @@ export const ThreadListUnreadBanner = () => {
         },
       ]}
     >
-      <Reload stroke={semantics.textSecondary} height={20} width={20} />
+      <icons.Reload stroke={semantics.textSecondary} height={20} width={20} />
       <Text style={styles.text}>
         {t('{{count}} new threads', { count: unseenThreadIds.length })}
       </Text>

package/src/components/ThreadList/ThreadMessagePreviewDeliveryStatus.tsx

@@ -4,10 +4,10 @@ import { StyleSheet, Text, View } from 'react-native';
 import { Channel, LocalMessage } from 'stream-chat';
 
 import { useChatContext } from '../../contexts/chatContext/ChatContext';
+import { useComponentsContext } from '../../contexts/componentsContext/ComponentsContext';
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { useTranslationContext } from '../../contexts/translationContext/TranslationContext';
 import { MessageDeliveryStatus, useMessageDeliveryStatus } from '../../hooks';
-import { Check, CheckAll, Time } from '../../icons';
 import { primitives } from '../../theme';
 import { MessageStatusTypes } from '../../utils/utils';
 
@@ -21,6 +21,7 @@ export const ThreadMessagePreviewDeliveryStatus = ({
   message,
 }: ThreadMessagePreviewDeliveryStatusProps) => {
   const { client } = useChatContext();
+  const { icons } = useComponentsContext();
   const { t } = useTranslationContext();
   const channelConfigExists = typeof channel?.getConfig === 'function';
   const styles = useStyles();
@@ -71,14 +72,19 @@ export const ThreadMessagePreviewDeliveryStatus = ({
   return (
     <View style={styles.container}>
       {message.status === MessageStatusTypes.SENDING ? (
-        <Time stroke={semantics.chatTextTimestamp} height={20} width={20} {...timeIcon} />
+        <icons.Time stroke={semantics.chatTextTimestamp} height={20} width={20} {...timeIcon} />
       ) : message.status === MessageStatusTypes.RECEIVED &&
         status === MessageDeliveryStatus.READ ? (
-        <CheckAll stroke={semantics.accentPrimary} height={20} width={20} {...checkAllIcon} />
+        <icons.CheckAll stroke={semantics.accentPrimary} height={20} width={20} {...checkAllIcon} />
       ) : status === MessageDeliveryStatus.DELIVERED ? (
-        <CheckAll stroke={semantics.chatTextTimestamp} height={20} width={20} {...checkAllIcon} />
+        <icons.CheckAll
+          stroke={semantics.chatTextTimestamp}
+          height={20}
+          width={20}
+          {...checkAllIcon}
+        />
       ) : status === MessageDeliveryStatus.SENT ? (
-        <Check stroke={semantics.chatTextTimestamp} height={20} width={20} {...checkIcon} />
+        <icons.Check stroke={semantics.chatTextTimestamp} height={20} width={20} {...checkIcon} />
       ) : null}
       <Text style={styles.text}>{t('You')}:</Text>
     </View>

package/src/components/UIComponents/EmptySearchResult.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import { I18nManager, StyleSheet, Text, View } from 'react-native';
 
+import { useComponentsContext } from '../../contexts/componentsContext/ComponentsContext';
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
-import { Search } from '../../icons/search';
 import { primitives } from '../../theme';
 
 export type EmptySearchResultProps = {
@@ -10,6 +10,7 @@ export type EmptySearchResultProps = {
 };
 
 export const EmptySearchResult = ({ label }: EmptySearchResultProps) => {
+  const { icons } = useComponentsContext();
   const {
     theme: {
       emptySearchResult: { container, text },
@@ -19,7 +20,7 @@ export const EmptySearchResult = ({ label }: EmptySearchResultProps) => {
 
   return (
     <View style={[styles.container, container]} testID='empty-search-result'>
-      <Search height={24} stroke={semantics.textTertiary} width={24} />
+      <icons.Search height={24} stroke={semantics.textTertiary} width={24} />
       <Text style={[styles.text, { color: semantics.textSecondary }, text]}>{label}</Text>
     </View>
   );

package/src/components/UIComponents/SearchInput.tsx

@@ -3,10 +3,9 @@ import { StyleSheet, TextInput, View } from 'react-native';
 
 import { Pressable } from 'react-native-gesture-handler';
 
+import { useComponentsContext } from '../../contexts/componentsContext/ComponentsContext';
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { useTranslationContext } from '../../contexts/translationContext/TranslationContext';
-import { Search } from '../../icons/search';
-import { XCircle } from '../../icons/x-circle';
 import { primitives } from '../../theme';
 import type { IconRenderer } from '../ui/Button/Button';
 import { Input, InputProps } from '../ui/Input/Input';
@@ -15,6 +14,7 @@ export type SearchInputProps = Partial<InputProps>;
 
 export const SearchInput = ({ onChangeText, ...props }: SearchInputProps) => {
   const { t } = useTranslationContext();
+  const { icons } = useComponentsContext();
   const {
     theme: { semantics },
   } = useTheme();
@@ -37,8 +37,8 @@ export const SearchInput = ({ onChangeText, ...props }: SearchInputProps) => {
   }, [onChangeText]);
 
   const LeadingIcon: IconRenderer = useCallback(
-    () => <Search height={20} stroke={semantics.textSecondary} width={20} />,
-    [semantics.textSecondary],
+    () => <icons.Search height={20} stroke={semantics.textSecondary} width={20} />,
+    [icons, semantics.textSecondary],
   );
 
   const ClearIcon: IconRenderer = useCallback(
@@ -50,10 +50,10 @@ export const SearchInput = ({ onChangeText, ...props }: SearchInputProps) => {
         onPress={handleClear}
         testID='clear-search'
       >
-        <XCircle height={15} stroke={semantics.inputTextIcon} width={15} />
+        <icons.XCircle height={15} stroke={semantics.inputTextIcon} width={15} />
       </Pressable>
     ),
-    [handleClear, semantics.inputTextIcon, t],
+    [handleClear, icons, semantics.inputTextIcon, t],
   );
 
   return (

package/src/components/UIComponents/SelectionCircle.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import { StyleSheet, View } from 'react-native';
 
+import { useComponentsContext } from '../../contexts/componentsContext/ComponentsContext';
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
-import { Checkmark } from '../../icons/checkmark-1';
 import { primitives } from '../../theme';
 
 export type SelectionCircleProps = {
@@ -10,6 +10,7 @@ export type SelectionCircleProps = {
 };
 
 export const SelectionCircle = ({ selected }: SelectionCircleProps) => {
+  const { icons } = useComponentsContext();
   const {
     theme: {
       selectionCircle: { circle, circleSelected },
@@ -26,7 +27,7 @@ export const SelectionCircle = ({ selected }: SelectionCircleProps) => {
           circleSelected,
         ]}
       >
-        <Checkmark height={14} pathFill={semantics.textOnAccent} width={14} />
+        <icons.Checkmark height={14} pathFill={semantics.textOnAccent} width={14} />
       </View>
     );
   }

package/src/components/UIComponents/Spinner.tsx

@@ -8,8 +8,8 @@ import Animated, {
   withTiming,
 } from 'react-native-reanimated';
 
+import { useComponentsContext } from '../../contexts/componentsContext/ComponentsContext';
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
-import { Loading } from '../../icons/loading';
 
 export type SpinnerProps = {
   height?: number;
@@ -19,6 +19,7 @@ export type SpinnerProps = {
 
 export const Spinner = (props: SpinnerProps) => {
   const rotation = useSharedValue(0);
+  const { icons } = useComponentsContext();
   const { height, style, width } = props;
 
   const {
@@ -46,7 +47,7 @@ export const Spinner = (props: SpinnerProps) => {
 
   return (
     <Animated.View style={[style, styles.spinner, animatedStyle, spinner, { height, width }]}>
-      <Loading
+      <icons.Loading
         height={height}
         startColor={semantics.accentPrimary}
         stopColor={semantics.accentPrimary}

package/src/components/index.ts

@@ -148,6 +148,7 @@ export * from './MessageInput/components/AttachmentPreview/AudioAttachmentUpload
 export * from './MessageInput/components/AttachmentPreview/FileAttachmentUploadPreview';
 export * from './MessageInput/components/AttachmentPreview/ImageAttachmentUploadPreview';
 export * from './MessageInput/hooks/useAudioRecorder';
+export * from './MessageInput/hooks/useCooldownRemaining';
 
 export * from './MessageList/DateHeader';
 export * from './MessageList/hooks/useMessageList';
@@ -196,6 +197,10 @@ export * from './UIComponents/SvgAwareImage';
 export * from './UIComponents/Spinner';
 export * from './UIComponents/SwipableWrapper';
 export * from './UIComponents/PortalWhileClosingView';
+export * from './UIComponents/EmptyList';
+export * from './UIComponents/EmptySearchResult';
+export * from './UIComponents/SearchInput';
+export * from './UIComponents/SelectionCircle';
 
 export * from './Thread/Thread';
 export * from './Thread/components/ThreadFooterComponent';

package/src/components/ui/Avatar/AvatarGroup.tsx

@@ -9,8 +9,8 @@ import { iconSizes } from './constants';
 
 import { UserAvatar, UserAvatarProps } from './UserAvatar';
 
+import { useComponentsContext } from '../../../contexts/componentsContext/ComponentsContext';
 import { useTheme } from '../../../contexts/themeContext/ThemeContext';
-import { PeopleIcon } from '../../../icons/users';
 import { BadgeCount, BadgeCountProps, OnlineIndicator, OnlineIndicatorProps } from '../Badge';
 
 export type AvatarGroupProps = {
@@ -84,6 +84,7 @@ const badgeCountSize: Record<AvatarGroupProps['size'], BadgeCountProps['size']>
 
 export const AvatarGroup = (props: AvatarGroupProps) => {
   const { size, items = [] } = props;
+  const { icons } = useComponentsContext();
   const {
     theme: { semantics },
   } = useTheme();
@@ -99,7 +100,7 @@ export const AvatarGroup = (props: AvatarGroupProps) => {
           backgroundColor={semantics.avatarBgPlaceholder}
           showBorder={true}
           placeholder={
-            <PeopleIcon
+            <icons.PeopleIcon
               stroke={semantics.avatarTextPlaceholder}
               height={iconSizes[avatarSize[size]]}
               width={iconSizes[avatarSize[size]]}
@@ -109,7 +110,7 @@ export const AvatarGroup = (props: AvatarGroupProps) => {
         />,
       ]);
     },
-    [avatarGroupStyles.userAvatarWrapper, semantics, size],
+    [avatarGroupStyles.userAvatarWrapper, icons, semantics, size],
   );
 
   const buildForMore = useCallback(

package/src/components/ui/Avatar/UserAvatar.tsx

@@ -13,8 +13,8 @@ import {
   numberOfInitials,
 } from './constants';
 
+import { useComponentsContext } from '../../../contexts/componentsContext/ComponentsContext';
 import { useTheme } from '../../../contexts/themeContext/ThemeContext';
-import { PeopleIcon } from '../../../icons/users';
 import { getInitialsFromName, hashStringToNumber } from '../../../utils/utils';
 import { OnlineIndicator } from '../Badge';
 
@@ -28,6 +28,7 @@ export type UserAvatarProps = {
 
 export const UserAvatar = (props: UserAvatarProps) => {
   const { user, size, showBorder = !!user.image, showOnlineIndicator, style } = props;
+  const { icons } = useComponentsContext();
   const {
     theme: { semantics },
   } = useTheme();
@@ -46,10 +47,14 @@ export const UserAvatar = (props: UserAvatarProps) => {
       );
     } else {
       return (
-        <PeopleIcon height={iconSizes[size]} stroke={avatarTextColor} width={iconSizes[size]} />
+        <icons.PeopleIcon
+          height={iconSizes[size]}
+          stroke={avatarTextColor}
+          width={iconSizes[size]}
+        />
       );
     }
-  }, [user?.name, size, avatarTextColor]);
+  }, [user?.name, size, avatarTextColor, icons]);
 
   return (
     <View testID='user-avatar'>

package/src/components/ui/Badge/ErrorBadge.tsx

@@ -1,8 +1,8 @@
 import React, { useMemo } from 'react';
 import { StyleProp, StyleSheet, View, ViewProps, ViewStyle } from 'react-native';
 
+import { useComponentsContext } from '../../../contexts/componentsContext/ComponentsContext';
 import { useTheme } from '../../../contexts/themeContext/ThemeContext';
-import { Exclamation } from '../../../icons/exclamation-mark-fill';
 import { primitives } from '../../../theme';
 
 const sizes = {
@@ -37,13 +37,14 @@ export type ErrorBadgeProps = ViewProps & {
 
 export const ErrorBadge = (props: ErrorBadgeProps) => {
   const { size = 'md', style, ...rest } = props;
+  const { icons } = useComponentsContext();
   const {
     theme: { semantics },
   } = useTheme();
   const styles = useStyles();
   return (
     <View style={[styles.container, sizes[size], style]} {...rest}>
-      <Exclamation
+      <icons.Exclamation
         height={sizes[size].height}
         width={sizes[size].width}
         fill={semantics.textOnAccent}

package/src/components/ui/Badge/GiphyBadge.tsx

@@ -1,15 +1,16 @@
 import React, { useMemo } from 'react';
 import { StyleSheet, Text, View } from 'react-native';
 
+import { useComponentsContext } from '../../../contexts/componentsContext/ComponentsContext';
 import { useTheme } from '../../../contexts/themeContext/ThemeContext';
-import { Giphy } from '../../../icons/giphy';
 import { primitives } from '../../../theme';
 
 export const GiphyBadge = () => {
+  const { icons } = useComponentsContext();
   const styles = useStyles();
   return (
     <View style={styles.container}>
-      <Giphy height={12} width={12} />
+      <icons.Giphy height={12} width={12} />
       <Text style={styles.text}>GIPHY</Text>
     </View>
   );

package/src/components/ui/Badge/ImgurBadge.tsx

@@ -1,15 +1,16 @@
 import React, { useMemo } from 'react';
 import { StyleSheet, Text, View } from 'react-native';
 
+import { useComponentsContext } from '../../../contexts/componentsContext/ComponentsContext';
 import { useTheme } from '../../../contexts/themeContext/ThemeContext';
-import { Imgur } from '../../../icons/imgur';
 import { primitives } from '../../../theme';
 
 export const ImgurBadge = () => {
+  const { icons } = useComponentsContext();
   const styles = useStyles();
   return (
     <View style={styles.container}>
-      <Imgur height={12} width={12} />
+      <icons.Imgur height={12} width={12} />
       <Text style={styles.text}>IMGUR</Text>
     </View>
   );

package/src/components/ui/Badge/RetryBadge.tsx

@@ -1,8 +1,8 @@
 import React, { useMemo } from 'react';
 import { StyleProp, StyleSheet, View, ViewProps, ViewStyle } from 'react-native';
 
+import { useComponentsContext } from '../../../contexts/componentsContext/ComponentsContext';
 import { useTheme } from '../../../contexts/themeContext/ThemeContext';
-import { Reload } from '../../../icons/refresh';
 import { primitives } from '../../../theme';
 
 const sizes = {
@@ -44,13 +44,14 @@ export type RetryBadgeProps = ViewProps & {
 
 export const RetryBadge = (props: RetryBadgeProps) => {
   const { size = 'md', style, ...rest } = props;
+  const { icons } = useComponentsContext();
   const {
     theme: { semantics },
   } = useTheme();
   const styles = useStyles();
   return (
     <View style={[styles.container, sizes[size], style]} {...rest}>
-      <Reload
+      <icons.Reload
         height={iconSizes[size].height}
         width={iconSizes[size].width}
         stroke={semantics.textOnAccent}

package/src/components/ui/GiphyChip.tsx

@@ -3,11 +3,10 @@ import { StyleSheet, View, Text, Pressable } from 'react-native';
 
 import { TextComposerState } from 'stream-chat';
 
+import { useComponentsContext } from '../../contexts/componentsContext/ComponentsContext';
 import { useMessageComposer } from '../../contexts/messageInputContext/hooks/useMessageComposer';
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { useStateStore } from '../../hooks/useStateStore';
-import { Lightning } from '../../icons/bolt';
-import { Cross } from '../../icons/xmark-1';
 import { primitives } from '../../theme';
 
 const textComposerStateSelector = (state: TextComposerState) => ({
@@ -15,6 +14,7 @@ const textComposerStateSelector = (state: TextComposerState) => ({
 });
 
 export const GiphyChip = () => {
+  const { icons } = useComponentsContext();
   const {
     theme: { semantics },
   } = useTheme();
@@ -32,10 +32,10 @@ export const GiphyChip = () => {
 
   return (
     <View style={styles.container}>
-      <Lightning fill={semantics.textOnInverse} height={16} width={16} />
+      <icons.Lightning fill={semantics.textOnInverse} height={16} width={16} />
       <Text style={styles.text}>{commandName}</Text>
       <Pressable onPress={onPressHandler}>
-        <Cross stroke={semantics.textOnInverse} height={16} width={16} />
+        <icons.Cross stroke={semantics.textOnInverse} height={16} width={16} />
       </Pressable>
     </View>
   );

package/src/components/ui/Input/Input.tsx

@@ -14,8 +14,7 @@ import {
 } from 'react-native';
 
 import { useTheme } from '../../../contexts';
-import { Checkmark } from '../../../icons/checkmark-1';
-import { InfoTooltip } from '../../../icons/info';
+import { useComponentsContext } from '../../../contexts/componentsContext/ComponentsContext';
 import { primitives } from '../../../theme';
 import { IconRenderer } from '../Button';
 
@@ -73,6 +72,7 @@ export const Input = React.forwardRef<TextInput, InputProps>(function Input(
   ref,
 ) {
   const [isFocused, setIsFocused] = useState(false);
+  const { icons } = useComponentsContext();
   const {
     theme: { semantics },
   } = useTheme();
@@ -162,9 +162,9 @@ export const Input = React.forwardRef<TextInput, InputProps>(function Input(
       {helperText ? (
         <View style={styles.helperContainer}>
           {state === 'success' ? (
-            <Checkmark height={20} width={20} stroke={semantics.accentSuccess} />
+            <icons.Checkmark height={20} width={20} stroke={semantics.accentSuccess} />
           ) : (
-            <InfoTooltip
+            <icons.InfoTooltip
               height={20}
               width={20}
               fill={state === 'error' ? semantics.accentError : semantics.textTertiary}

package/src/components/ui/VideoPlayIndicator.tsx

@@ -1,8 +1,8 @@
 import React, { useMemo } from 'react';
 import { StyleSheet, View } from 'react-native';
 
+import { useComponentsContext } from '../../contexts/componentsContext/ComponentsContext';
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
-import { Play } from '../../icons/play-fill';
 import { primitives } from '../../theme';
 
 const sizes = {
@@ -32,6 +32,7 @@ export type VideoPlayIndicatorProps = {
 
 export const VideoPlayIndicator = (props: VideoPlayIndicatorProps) => {
   const { size = 'md' } = props;
+  const { icons } = useComponentsContext();
   const {
     theme: { semantics },
   } = useTheme();
@@ -39,7 +40,7 @@ export const VideoPlayIndicator = (props: VideoPlayIndicatorProps) => {
 
   return (
     <View style={[styles.container, sizes[size]]}>
-      <Play
+      <icons.Play
         fill={semantics.controlPlayButtonIcon}
         height={iconSizes[size]}
         width={iconSizes[size]}

package/src/components/ui/index.ts

@@ -2,3 +2,6 @@ export * from './Avatar';
 export * from './VideoPlayIndicator';
 export * from './Button';
 export * from './Badge';
+export * from './Input/Input';
+export * from './SpeedSettingsButton';
+export * from './GiphyChip';

package/src/contexts/attachmentPickerContext/AttachmentPickerContext.tsx

@@ -22,7 +22,7 @@ export type AttachmentPickerContextValue = Pick<
 > & {
   /**
    * `bottomInset` determine the height of the `AttachmentPicker` and the underlying shift to the `MessageList` when it is opened.
-   * This can also be set via the `setBottomInset` function provided by the `useAttachmentPickerContext` hook.
+   * This can be set via the `bottomInset` prop on the `Channel` component.
    *
    * Please check [OverlayProvider](https://github.com/GetStream/stream-chat-react-native/wiki/Cookbook-v3.0#overlayprovider) section in Cookbook
    * for more details.

package/src/contexts/channelsContext/ChannelsContext.tsx

@@ -69,7 +69,7 @@ export type ChannelsContextValue = {
    */
   maxUnreadCount: number;
   /**
-   * Number of skeletons that should show when loading. Default: 6
+   * Number of skeletons that should show when loading. Default: 8
    */
   numberOfSkeletons: number;
   /**