stream-chat-react-native-core 5.39.5 → 5.40.0-rc.2

package/src/components/Message/hooks/useMessageActions.tsx

@@ -6,7 +6,6 @@ import type { ChannelContextValue } from '../../../contexts/channelContext/Chann
 import type { ChatContextValue } from '../../../contexts/chatContext/ChatContext';
 import type { MessageContextValue } from '../../../contexts/messageContext/MessageContext';
 import type { MessagesContextValue } from '../../../contexts/messagesContext/MessagesContext';
-import type { OverlayContextValue } from '../../../contexts/overlayContext/OverlayContext';
 import { useTheme } from '../../../contexts/themeContext/ThemeContext';
 import type { ThreadContextValue } from '../../../contexts/threadContext/ThreadContext';
 import type { TranslationContextValue } from '../../../contexts/translationContext/TranslationContext';
@@ -28,45 +27,15 @@ import { removeReservedFields } from '../../../utils/removeReservedFields';
 import { MessageStatusTypes } from '../../../utils/utils';
 
 import type { MessageType } from '../../MessageList/hooks/useMessageList';
-import type { MessageActionType } from '../../MessageOverlay/MessageActionListItem';
+import type { MessageActionType } from '../../MessageMenu/MessageActionListItem';
 
-export const useMessageActions = <
+export type MessageActionsHookProps<
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
->({
-  channel,
-  client,
-  deleteMessage: deleteMessageFromContext,
-  deleteReaction,
-  enforceUniqueReaction,
-  handleBan,
-  handleBlock,
-  handleCopy,
-  handleDelete,
-  handleEdit,
-  handleFlag,
-  handleMute,
-  handlePinMessage,
-  handleQuotedReply,
-  handleReaction: handleReactionProp,
-  handleRetry,
-  handleThreadReply,
-  message,
-  onThreadSelect,
-  openThread,
-  retrySendMessage,
-  selectReaction,
-  sendReaction,
-  setEditingState,
-  setOverlay,
-  setQuotedMessageState,
-  supportedReactions,
-  t,
-}: Pick<
+> = Pick<
   MessagesContextValue<StreamChatGenerics>,
   | 'deleteMessage'
   | 'sendReaction'
   | 'handleBan'
-  | 'handleBlock'
   | 'handleCopy'
   | 'handleDelete'
   | 'handleEdit'
@@ -88,12 +57,43 @@ export const useMessageActions = <
 > &
   Pick<ChannelContextValue<StreamChatGenerics>, 'channel' | 'enforceUniqueReaction'> &
   Pick<ChatContextValue<StreamChatGenerics>, 'client'> &
-  Pick<OverlayContextValue, 'setOverlay'> &
   Pick<ThreadContextValue<StreamChatGenerics>, 'openThread'> &
-  Pick<MessageContextValue<StreamChatGenerics>, 'message'> &
+  Pick<MessageContextValue<StreamChatGenerics>, 'dismissOverlay' | 'message'> &
   Pick<TranslationContextValue, 't'> & {
     onThreadSelect?: (message: MessageType<StreamChatGenerics>) => void;
-  }) => {
+  };
+
+export const useMessageActions = <
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+>({
+  channel,
+  client,
+  deleteMessage: deleteMessageFromContext,
+  deleteReaction,
+  dismissOverlay,
+  enforceUniqueReaction,
+  handleBan,
+  handleCopy,
+  handleDelete,
+  handleEdit,
+  handleFlag,
+  handleMute,
+  handlePinMessage,
+  handleQuotedReply,
+  handleReaction: handleReactionProp,
+  handleRetry,
+  handleThreadReply,
+  message,
+  onThreadSelect,
+  openThread,
+  retrySendMessage,
+  selectReaction,
+  sendReaction,
+  setEditingState,
+  setQuotedMessageState,
+  supportedReactions,
+  t,
+}: MessageActionsHookProps<StreamChatGenerics>) => {
   const {
     theme: {
       colors: { accent_red, grey },
@@ -141,7 +141,7 @@ export const useMessageActions = <
 
   const banUser: MessageActionType = {
     action: async () => {
-      setOverlay('none');
+      dismissOverlay();
       if (message.user?.id) {
         if (handleBan) {
           handleBan(message);
@@ -155,28 +155,9 @@ export const useMessageActions = <
     title: message.user?.banned ? t('Unban User') : t('Ban User'),
   };
 
-  /**
-   * @deprecated use `banUser` instead
-   */
-  const blockUser: MessageActionType = {
-    action: async () => {
-      setOverlay('none');
-      if (message.user?.id) {
-        if (handleBlock) {
-          handleBlock(message);
-        }
-
-        await handleToggleBanUser();
-      }
-    },
-    actionType: 'blockUser',
-    icon: <UserDelete pathFill={grey} />,
-    title: message.user?.banned ? t('Unblock User') : t('Block User'),
-  };
-
   const copyMessage: MessageActionType = {
     action: () => {
-      setOverlay('none');
+      dismissOverlay();
       if (handleCopy) {
         handleCopy(message);
       }
@@ -189,7 +170,7 @@ export const useMessageActions = <
 
   const deleteMessage: MessageActionType = {
     action: () => {
-      setOverlay('none');
+      dismissOverlay();
       if (handleDelete) {
         handleDelete(message);
       }
@@ -203,7 +184,7 @@ export const useMessageActions = <
 
   const editMessage: MessageActionType = {
     action: () => {
-      setOverlay('none');
+      dismissOverlay();
       if (handleEdit) {
         handleEdit(message);
       }
@@ -216,7 +197,7 @@ export const useMessageActions = <
 
   const pinMessage: MessageActionType = {
     action: () => {
-      setOverlay('none');
+      dismissOverlay();
       if (handlePinMessage) {
         handlePinMessage(message);
       }
@@ -229,7 +210,7 @@ export const useMessageActions = <
 
   const unpinMessage: MessageActionType = {
     action: () => {
-      setOverlay('none');
+      dismissOverlay();
       if (handlePinMessage) {
         handlePinMessage(message);
       }
@@ -242,7 +223,7 @@ export const useMessageActions = <
 
   const flagMessage: MessageActionType = {
     action: () => {
-      setOverlay('none');
+      dismissOverlay();
       if (handleFlag) {
         handleFlag(message);
       }
@@ -268,7 +249,7 @@ export const useMessageActions = <
 
   const muteUser: MessageActionType = {
     action: async () => {
-      setOverlay('none');
+      dismissOverlay();
       if (message.user?.id) {
         if (handleMute) {
           handleMute(message);
@@ -284,7 +265,7 @@ export const useMessageActions = <
 
   const quotedReply: MessageActionType = {
     action: () => {
-      setOverlay('none');
+      dismissOverlay();
       if (handleQuotedReply) {
         handleQuotedReply(message);
       }
@@ -297,7 +278,7 @@ export const useMessageActions = <
 
   const retry: MessageActionType = {
     action: async () => {
-      setOverlay('none');
+      dismissOverlay();
       const messageWithoutReservedFields = removeReservedFields(message);
       if (handleRetry) {
         handleRetry(messageWithoutReservedFields as MessageType<StreamChatGenerics>);
@@ -312,7 +293,7 @@ export const useMessageActions = <
 
   const threadReply: MessageActionType = {
     action: () => {
-      setOverlay('none');
+      dismissOverlay();
       if (handleThreadReply) {
         handleThreadReply(message);
       }
@@ -325,7 +306,6 @@ export const useMessageActions = <
 
   return {
     banUser,
-    blockUser,
     copyMessage,
     deleteMessage,
     editMessage,

package/src/components/Message/hooks/useMessageData.ts

@@ -0,0 +1,59 @@
+import {
+  MessageContextValue,
+  useMessageContext,
+} from '../../../contexts/messageContext/MessageContext';
+
+import { DefaultStreamChatGenerics } from '../../../types/types';
+import { MessageStatusTypes } from '../../../utils/utils';
+
+export type UseMessageDataProps<
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+> = Partial<
+  Pick<
+    MessageContextValue<StreamChatGenerics>,
+    'channel' | 'groupStyles' | 'isMyMessage' | 'message'
+  >
+>;
+
+export const useMessageData = <
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+>({
+  channel: propChannel,
+  groupStyles: propGroupStyles,
+  isMyMessage: propIsMyMessage,
+  message: propMessage,
+}: UseMessageDataProps<StreamChatGenerics>) => {
+  const {
+    channel: contextChannel,
+    groupStyles: contextGroupStyles,
+    isMyMessage: contextIsMyMessage,
+    message: contextMessage,
+  } = useMessageContext();
+
+  const channel = propChannel || contextChannel;
+  const groupStyles = propGroupStyles || contextGroupStyles;
+  const isMyMessage = propIsMyMessage || contextIsMyMessage;
+  const message = propMessage || contextMessage;
+
+  const isVeryLastMessage =
+    channel?.state.messages[channel?.state.messages.length - 1]?.id === message.id;
+
+  const messageGroupedSingleOrBottom =
+    groupStyles.includes('single') || groupStyles.includes('bottom');
+
+  const isMessageErrorType =
+    message.type === 'error' || message.status === MessageStatusTypes.FAILED;
+  const isMessageTypeDeleted = message.type === 'deleted';
+  const isMessageReceivedOrErrorType = !isMyMessage || isMessageErrorType;
+
+  const hasThreadReplies = !!message?.reply_count;
+
+  return {
+    hasThreadReplies,
+    isMessageErrorType,
+    isMessageReceivedOrErrorType,
+    isMessageTypeDeleted,
+    isVeryLastMessage,
+    messageGroupedSingleOrBottom,
+  };
+};

package/src/components/Message/hooks/useProcessReactions.ts

@@ -1,6 +1,6 @@
 import { ComponentType, useMemo } from 'react';
 
-import { ReactionResponse } from 'stream-chat';
+import { ReactionGroupResponse, ReactionResponse } from 'stream-chat';
 
 import { useChatContext } from '../../../contexts';
 import {
@@ -9,7 +9,6 @@ import {
 } from '../../../contexts/messagesContext/MessagesContext';
 import { DefaultStreamChatGenerics } from '../../../types/types';
 import { ReactionData } from '../../../utils/utils';
-import { ReactionListProps } from '../MessageSimple/ReactionList';
 
 export type ReactionSummary = {
   own: boolean;
@@ -24,12 +23,20 @@ export type ReactionSummary = {
 
 export type ReactionsComparator = (a: ReactionSummary, b: ReactionSummary) => number;
 
+export type MessageReactionsData<
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+> = {
+  /** An array of the reaction objects to display in the list */
+  latest_reactions?: ReactionResponse<StreamChatGenerics>[];
+  /** An array of the own reaction objects to distinguish own reactions visually */
+  own_reactions?: ReactionResponse<StreamChatGenerics>[] | null;
+  /** An object containing summary for each reaction type on a message */
+  reaction_groups?: Record<string, ReactionGroupResponse> | null;
+};
+
 type UseProcessReactionsParams<
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
-> = Pick<
-  ReactionListProps<StreamChatGenerics>,
-  'own_reactions' | 'reaction_groups' | 'latest_reactions'
-> &
+> = MessageReactionsData<StreamChatGenerics> &
   Partial<Pick<MessagesContextValue<StreamChatGenerics>, 'supportedReactions'>> & {
     sortReactions?: ReactionsComparator;
   };
@@ -46,7 +53,7 @@ const isOwnReaction = <
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
   reactionType: string,
-  ownReactions?: ReactionResponse<StreamChatGenerics>[] | null,
+  ownReactions?: MessageReactionsData<StreamChatGenerics>['own_reactions'],
   latestReactions?: ReactionResponse<StreamChatGenerics>[] | null,
   userID?: string,
 ) =>
@@ -57,13 +64,13 @@ const isOwnReaction = <
       )
     : false);
 
-const isSupportedReaction = (reactionType: string, supportedReactions: ReactionData[]) =>
+const isSupportedReaction = (reactionType: string, supportedReactions?: ReactionData[]) =>
   supportedReactions
     ? supportedReactions.some((reactionOption) => reactionOption.type === reactionType)
     : false;
 
-const getEmojiByReactionType = (reactionType: string, supportedReactions: ReactionData[]) =>
-  supportedReactions.find(({ type }) => type === reactionType)?.Icon ?? null;
+const getEmojiByReactionType = (reactionType: string, supportedReactions?: ReactionData[]) =>
+  supportedReactions ? supportedReactions.find(({ type }) => type === reactionType)?.Icon : null;
 
 const getLatestReactedUserNames = (reactionType: string, latestReactions?: ReactionResponse[]) =>
   latestReactions

package/src/components/Message/utils/messageActions.ts

@@ -1,8 +1,8 @@
 import type { MessageContextValue } from '../../../contexts/messageContext/MessageContext';
 import type { OwnCapabilitiesContextValue } from '../../../contexts/ownCapabilitiesContext/OwnCapabilitiesContext';
-import { setClipboardString } from '../../../native';
+import { isClipboardAvailable } from '../../../native';
 import type { DefaultStreamChatGenerics } from '../../../types/types';
-import type { MessageActionType } from '../../MessageOverlay/MessageActionListItem';
+import type { MessageActionType } from '../../MessageMenu/MessageActionListItem';
 
 export type MessageActionsParams<
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
@@ -14,26 +14,18 @@ export type MessageActionsParams<
   editMessage: MessageActionType;
   error: boolean | Error;
   flagMessage: MessageActionType;
-  /**
-   * Determines if the message actions are visible.
-   */
-  isMessageActionsVisible: boolean;
   isThreadMessage: boolean;
-  /**
-   * @deprecated use `isMessageActionsVisible` instead.
-   */
-  messageReactions: boolean;
   muteUser: MessageActionType;
   ownCapabilities: OwnCapabilitiesContextValue;
   pinMessage: MessageActionType;
   quotedReply: MessageActionType;
   retry: MessageActionType;
-  threadReply: MessageActionType;
-  unpinMessage: MessageActionType;
   /**
-   * @deprecated use `banUser` instead.
+   * Determines if the message actions are visible.
    */
-  blockUser?: MessageActionType;
+  showMessageReactions: boolean;
+  threadReply: MessageActionType;
+  unpinMessage: MessageActionType;
 } & Pick<MessageContextValue<StreamChatGenerics>, 'message' | 'isMyMessage'>;
 
 export type MessageActionsProp<
@@ -44,25 +36,23 @@ export const messageActions = <
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >({
   banUser,
-  blockUser,
   copyMessage,
   deleteMessage,
   editMessage,
   error,
   flagMessage,
-  isMessageActionsVisible,
   isMyMessage,
   isThreadMessage,
   message,
-  messageReactions,
   ownCapabilities,
   pinMessage,
   quotedReply,
   retry,
+  showMessageReactions,
   threadReply,
   unpinMessage,
 }: MessageActionsParams<StreamChatGenerics>) => {
-  if (messageReactions || !isMessageActionsVisible) {
+  if (showMessageReactions) {
     return [];
   }
 
@@ -87,7 +77,7 @@ export const messageActions = <
     actions.push(editMessage);
   }
 
-  if (setClipboardString !== null && message.text && !error) {
+  if (isClipboardAvailable() && message.text && !error) {
     actions.push(copyMessage);
   }
 
@@ -104,7 +94,7 @@ export const messageActions = <
   }
 
   if (!isMyMessage && ownCapabilities.banChannelMembers) {
-    actions.push(banUser || blockUser);
+    actions.push(banUser);
   }
 
   if (

package/src/components/MessageInput/FileUploadPreview.tsx

@@ -16,7 +16,7 @@ import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { useTranslationContext } from '../../contexts/translationContext/TranslationContext';
 import { Close } from '../../icons/Close';
 import { Warning } from '../../icons/Warning';
-import { isAudioPackageAvailable } from '../../native';
+import { isSoundPackageAvailable } from '../../native';
 import type { DefaultStreamChatGenerics, FileUpload } from '../../types/types';
 import { getTrimmedAttachmentTitle } from '../../utils/getTrimmedAttachmentTitle';
 import {
@@ -235,7 +235,7 @@ const FileUploadPreviewWithContext = <
           style={styles.overlay}
           type={indicatorType}
         >
-          {item.file.mimeType?.startsWith('audio/') && isAudioPackageAvailable() ? (
+          {item.file.mimeType?.startsWith('audio/') && isSoundPackageAvailable() ? (
             <AudioAttachmentUploadPreview
               hideProgressBar={true}
               item={item}

package/src/components/MessageInput/MessageInput.tsx

@@ -693,7 +693,6 @@ const MessageInputWithContext = <
     micButton: useAnimatedStyle(() => ({
       opacity: interpolate(micPositionX.value, [0, X_AXIS_POSITION], [1, 0], Extrapolation.CLAMP),
       transform: [{ translateX: micPositionX.value }, { translateY: micPositionY.value }],
-      zIndex: 2,
     })),
     slideToCancel: useAnimatedStyle(() => ({
       opacity: interpolate(micPositionX.value, [0, X_AXIS_POSITION], [1, 0], Extrapolation.CLAMP),

package/src/components/MessageInput/__tests__/AudioAttachmentUploadPreviewExpo.test.tsx

@@ -16,10 +16,7 @@ import type { FileUpload } from '../../../types/types';
 import { AudioAttachment, AudioAttachmentProps } from '../../Attachment/AudioAttachment';
 
 jest.mock('../../../native.ts', () => ({
-  isAudioPackageAvailable: jest.fn(() => true),
-  NetInfo: {
-    addEventListener: jest.fn(),
-  },
+  isSoundPackageAvailable: jest.fn(() => true),
   Sound: {
     initializeSound: jest.fn(),
     Player: null,

package/src/components/MessageInput/__tests__/AudioAttachmentUploadPreviewNative.test.tsx

@@ -19,10 +19,7 @@ jest.mock('../../../native.ts', () => {
   const View = require('react-native/Libraries/Components/View/View');
 
   return {
-    isAudioPackageAvailable: jest.fn(() => true),
-    NetInfo: {
-      addEventListener: jest.fn(),
-    },
+    isSoundPackageAvailable: jest.fn(() => true),
     Sound: {
       Player: View,
     },

package/src/components/MessageInput/__tests__/FileUploadPreview.test.js

@@ -30,13 +30,11 @@ jest.mock('../../../native.ts', () => {
   const View = require('react-native/Libraries/Components/View/View');
 
   return {
-    isAudioPackageAvailable: jest.fn(() => true),
+    isAudioRecorderAvailable: jest.fn(() => true),
+    isDocumentPickerAvailable: jest.fn(() => true),
     isImageMediaLibraryAvailable: jest.fn(() => true),
     isImagePickerAvailable: jest.fn(() => true),
-    NetInfo: {
-      addEventListener: jest.fn(),
-      fetch: jest.fn(),
-    },
+    isSoundPackageAvailable: jest.fn(() => true),
     Sound: {
       Player: View,
     },

package/src/components/MessageInput/components/AudioRecorder/AudioRecordingButton.tsx

@@ -8,7 +8,11 @@ import {
 import { useTheme } from '../../../../contexts/themeContext/ThemeContext';
 import { useTranslationContext } from '../../../../contexts/translationContext/TranslationContext';
 import { Mic } from '../../../../icons/Mic';
-import { AudioRecordingReturnType, triggerHaptic } from '../../../../native';
+import {
+  AudioRecordingReturnType,
+  isAudioRecorderAvailable,
+  triggerHaptic,
+} from '../../../../native';
 
 import type { DefaultStreamChatGenerics } from '../../../../types/types';
 
@@ -98,6 +102,8 @@ const AudioRecordingButtonWithContext = <
     }
   };
 
+  if (!isAudioRecorderAvailable()) return null;
+
   return (
     <Pressable
       delayLongPress={asyncMessagesMinimumPressDuration}

package/src/components/MessageInput/components/AudioRecorder/AudioRecordingLockIndicator.tsx

@@ -80,6 +80,5 @@ const styles = StyleSheet.create({
     padding: 8,
     position: 'absolute',
     right: 0,
-    zIndex: 1,
   },
 });

package/src/components/MessageInput/hooks/useAudioController.tsx

@@ -84,7 +84,6 @@ export const useAudioController = () => {
   };
 
   const onVoicePlayerPlayPause = async () => {
-    if (!Audio) return;
     if (paused) {
       if (progress === 0) await startVoicePlayer();
       else {
@@ -106,7 +105,6 @@ export const useAudioController = () => {
    * Function to start playing voice recording to preview it after recording.
    */
   const startVoicePlayer = async () => {
-    if (!Audio) return;
     if (!recording) return;
     // For Native CLI
     if (Audio.startPlayer)
@@ -134,7 +132,6 @@ export const useAudioController = () => {
    * Function to stop playing voice recording.
    */
   const stopVoicePlayer = async () => {
-    if (!Audio) return;
     // For Native CLI
     if (Audio.stopPlayer) {
       await Audio.stopPlayer();

package/src/components/MessageList/MessageList.tsx

@@ -666,7 +666,7 @@ const MessageListWithContext = <
         message={message}
         onThreadSelect={onThreadSelect}
         showUnreadUnderlay={showUnreadUnderlay}
-        style={[{ paddingHorizontal: screenPadding }, messageContainer]}
+        style={[messageContainer]}
         threadList={threadList}
       />
     );

package/src/components/MessageList/__tests__/MessageList.test.js

@@ -13,7 +13,6 @@ import { generateMember } from '../../../mock-builders/generator/member';
 import { generateMessage } from '../../../mock-builders/generator/message';
 import { generateUser } from '../../../mock-builders/generator/user';
 import { getTestClientWithUser } from '../../../mock-builders/mock';
-import { registerNativeHandlers } from '../../../native';
 import { Channel } from '../../Channel/Channel';
 import { Chat } from '../../Chat/Chat';
 import { MessageList } from '../MessageList';
@@ -314,16 +313,6 @@ describe('MessageList', () => {
   });
 
   it('should render the is offline error', async () => {
-    registerNativeHandlers({
-      NetInfo: {
-        addEventListener: () => () => null,
-        fetch: () =>
-          new Promise((resolve) => {
-            resolve(false);
-          }),
-      },
-    });
-
     const user1 = generateUser();
     const mockedChannel = generateChannelResponse({
       members: [generateMember({ user: user1 })],
@@ -351,16 +340,6 @@ describe('MessageList', () => {
       expect(getByTestId('error-notification')).toBeTruthy();
       expect(getByText('Reconnecting...')).toBeTruthy();
     });
-
-    registerNativeHandlers({
-      NetInfo: {
-        addEventListener: () => () => null,
-        fetch: () =>
-          new Promise((resolve) => {
-            resolve(true);
-          }),
-      },
-    });
   });
 
   it('should scroll to a message even if out of the loaded window', async () => {

package/src/components/MessageMenu/MessageActionList.tsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import { StyleSheet, View } from 'react-native';
+
+import { MessageActionType } from './MessageActionListItem';
+
+import { MessagesContextValue } from '../../contexts/messagesContext/MessagesContext';
+import { useTheme } from '../../contexts/themeContext/ThemeContext';
+
+export type MessageActionListProps = Pick<MessagesContextValue, 'MessageActionListItem'> & {
+  /**
+   * Function to close the message actions bottom sheet
+   * @returns void
+   */
+  dismissOverlay?: () => void;
+  /**
+   * An array of message actions to render
+   */
+  messageActions?: MessageActionType[];
+};
+
+export const MessageActionList = (props: MessageActionListProps) => {
+  const { MessageActionListItem, messageActions } = props;
+  const {
+    theme: {
+      messageMenu: {
+        actionList: { container },
+      },
+    },
+  } = useTheme();
+
+  if (messageActions?.length === 0) return null;
+
+  return (
+    <View accessibilityLabel='Message action list' style={[styles.container, container]}>
+      {messageActions?.map((messageAction, index) => (
+        <MessageActionListItem
+          key={messageAction.title}
+          {...{ ...messageAction, index, length: messageActions.length }}
+        />
+      ))}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    paddingHorizontal: 16,
+  },
+});