@amityco/react-native-social-uikit 4.1.0 → 4.1.1-d7da0c5c.0

package/src/social/features/chat/features/shared/components/ContentReportReason/ContentReportReason.tsx

@@ -0,0 +1,308 @@
+// ContentReportReason — ported from AmityUiKitWeb
+// core/design/components/ContentReportReason/ContentReportReason.tsx, scoped to the
+// message-report flow (web's component also handled post/comment; RN only needs
+// message here). Web rendered it inside a Drawer (mobile) / Popup (desktop); the RN
+// bug being fixed was that the report UI appeared as a partial bottom sheet, so this
+// is a full-screen Modal — matching the sibling MessageFullTextScreen overlay pattern
+// and how every other chat overlay is threaded through useChatMessage.
+//
+// RN adaptations vs web:
+//   - web's `useFlagMessageQuery` (react-query) is inlined here as a direct
+//     `MessageRepository.flagMessage(messageId, reason)` call — RN has no react-query
+//     wrapper for messages and the report screen only reports (never toggles/unreports).
+//   - web's deleted/error branch (`FailedToShow` + a Close button on NOT_FOUND /
+//     400400) is dropped — RN has no `FailedToShow`; failures surface as an error
+//     toast instead (documented deviation).
+//   - web's offline info-toast `useEffect` is dropped; the Submit button already
+//     stays disabled while offline (documented deviation).
+
+// 1. React / RN imports
+import { useState } from 'react';
+import { Modal, Pressable, ScrollView, View } from 'react-native';
+
+// 2. Third-party imports
+import {
+  ContentFlagReasonEnum,
+  MessageRepository,
+} from '@amityco/ts-sdk-react-native';
+import { useQueryClient } from '@tanstack/react-query';
+
+// 3. Internal imports
+import { Typography } from '../../../../../../../core/design/components/Typography';
+import { AmityIcon } from '../../../../../../../core/design/icons';
+import { AmityColorToken } from '../../../../../../../core/design/tokens/amity-color-tokens';
+import { Selection } from '../../../../../../../core/design/atoms/Selection';
+import { Input } from '../../../../../../../core/design/atoms/Input';
+import { Button } from '../../../../../../../core/design/atoms/Button';
+import {
+  resolveString,
+  useString,
+} from '../../../../../../../core/localization';
+import { useChatNotifications } from '../../../../hooks/useChatNotifications';
+import { flagMessageQueryKey } from '../../../../hooks/queries';
+import { useNetworkOnline } from '../../../../hooks/useNetworkOnline';
+import Toast from '../../../../../../components/Toast';
+import { useStyles } from './styles';
+
+// 4. Types
+type ContentReportReasonProps = {
+  visible: boolean;
+  message: Amity.Message;
+  onClose: () => void;
+};
+
+const MAX_LENGTH_DESCRIBE = 300;
+
+// Mirrors web's `reportReasons` memo. The trailing "Others" entry is rendered as a
+// separate row with a chevron (it opens the free-text sub-view), not as a radio.
+const REPORT_REASONS: { value: ContentFlagReasonEnum; labelKey: string }[] = [
+  {
+    value: ContentFlagReasonEnum.CommunityGuidelines,
+    labelKey: 'amity_social_label_report_reason_community_guidelines',
+  },
+  {
+    value: ContentFlagReasonEnum.HarassmentOrBullying,
+    labelKey: 'amity_social_label_report_reason_harassment_or_bullying',
+  },
+  {
+    value: ContentFlagReasonEnum.SelfHarmOrSuicide,
+    labelKey: 'amity_social_label_report_reason_self_harm_or_suicide',
+  },
+  {
+    value: ContentFlagReasonEnum.ViolenceOrThreateningContent,
+    labelKey: 'amity_social_label_report_reason_violence_or_threatening',
+  },
+  {
+    value: ContentFlagReasonEnum.SellingRestrictedItems,
+    labelKey: 'amity_social_label_report_reason_selling_restricted',
+  },
+  {
+    value: ContentFlagReasonEnum.SexualContentOrNudity,
+    labelKey: 'amity_social_label_report_reason_sexual_content_or_nudity',
+  },
+  {
+    value: ContentFlagReasonEnum.SpamOrScams,
+    labelKey: 'amity_social_label_report_reason_spam_or_scams',
+  },
+  {
+    value: ContentFlagReasonEnum.FalseInformation,
+    labelKey: 'amity_social_label_report_reason_false_information',
+  },
+];
+
+// 5. Named function component
+export function ContentReportReason({
+  visible,
+  message,
+  onClose,
+}: ContentReportReasonProps) {
+  const { styles } = useStyles();
+  const { success, error } = useChatNotifications();
+  const queryClient = useQueryClient();
+  const { online } = useNetworkOnline();
+
+  const [isShowOthersOption, setIsShowOthersOption] = useState(false);
+  const [otherReasonText, setOtherReasonText] = useState('');
+  const [selectedReason, setSelectedReason] = useState<
+    Amity.ContentFlagReason | undefined
+  >(undefined);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  const othersTitle = useString('amity_social_button_others');
+  const reportReasonTitle = useString('amity_social_button_report_reason');
+  const reportOtherReasonDesc = useString(
+    'amity_social_label_report_other_reason_desc'
+  );
+  const reportOtherReasonOptional = useString(
+    'amity_social_button_report_other_reason_optional'
+  );
+  const reportTextPlaceholder = useString(
+    'amity_social_placeholder_report_text_placeholder'
+  );
+  const reportListDescription = useString(
+    'amity_social_report_list_screen_description'
+  );
+  const closeButtonText = useString('amity_social_modal_dialog_close_button');
+  const submitButtonText = useString(
+    'amity_social_button_report_submit_button'
+  );
+  const reportSuccessToast = useString('amity_chat_toast_message_reported');
+  const reportErrorToast = useString('amity_chat_toast_message_reported_error');
+
+  const isDisabledSubmitButton = !selectedReason || !online || isSubmitting;
+
+  function handleBack() {
+    // Web resets both the selected reason and the sub-view flag.
+    setSelectedReason(undefined);
+    setIsShowOthersOption(false);
+  }
+
+  function handleRadioChange(value: ContentFlagReasonEnum) {
+    setSelectedReason(value);
+  }
+
+  async function handleSubmitReport() {
+    if (!message.messageId || !selectedReason || isSubmitting) return;
+
+    // Web sends the free text for Others, the enum value otherwise.
+    const reason =
+      selectedReason === ContentFlagReasonEnum.Others
+        ? otherReasonText
+        : selectedReason;
+
+    setIsSubmitting(true);
+    try {
+      await MessageRepository.flagMessage(message.messageId, reason);
+      // Refresh the bubble menu's flag state so Report flips to Unreport
+      // (reinforces the menu's own refetch-on-open; see useFlagMessageQuery).
+      queryClient.invalidateQueries({
+        queryKey: flagMessageQueryKey(message.messageId),
+      });
+      success({ content: reportSuccessToast });
+      onClose();
+    } catch {
+      error({ content: reportErrorToast });
+    } finally {
+      setIsSubmitting(false);
+    }
+  }
+
+  return (
+    <Modal
+      visible={visible}
+      animationType="slide"
+      onRequestClose={onClose}
+      transparent={false}
+    >
+      <View style={styles.screen}>
+        <View style={styles.header}>
+          <View style={[styles.headerSlot, styles.headerSlotLeft]}>
+            {isShowOthersOption ? (
+              <Pressable
+                style={styles.iconButton}
+                onPress={handleBack}
+                accessibilityRole="button"
+                accessibilityLabel="Back"
+              >
+                <AmityIcon
+                  name="chevron-left"
+                  size={24}
+                  tokenColor={
+                    AmityColorToken.IconIconButtonGhostSecondaryDefault
+                  }
+                />
+              </Pressable>
+            ) : null}
+          </View>
+          <View style={[styles.headerSlot, styles.headerSlotCenter]}>
+            <Typography
+              variant="titleBold"
+              style={styles.title}
+              numberOfLines={1}
+            >
+              {isShowOthersOption ? othersTitle : reportReasonTitle}
+            </Typography>
+          </View>
+          <View style={[styles.headerSlot, styles.headerSlotRight]}>
+            {isShowOthersOption ? (
+              <Pressable
+                style={styles.iconButton}
+                onPress={onClose}
+                accessibilityRole="button"
+                accessibilityLabel={closeButtonText}
+              >
+                <AmityIcon
+                  name="cross-l"
+                  size={24}
+                  tokenColor={
+                    AmityColorToken.IconIconButtonGhostSecondaryDefault
+                  }
+                />
+              </Pressable>
+            ) : null}
+          </View>
+        </View>
+
+        <ScrollView
+          style={styles.content}
+          contentContainerStyle={styles.contentContainer}
+        >
+          {isShowOthersOption ? (
+            <View style={styles.othersField}>
+              <Input.Text
+                title={reportOtherReasonDesc}
+                optionalLabel={reportOtherReasonOptional}
+                showCharacterCount
+                maxLength={MAX_LENGTH_DESCRIBE}
+                placeholder={reportTextPlaceholder}
+                value={otherReasonText}
+                onChange={setOtherReasonText}
+                // LEADS WEB (PDT-4142): web's ContentReportReason also omits
+                // multiLine — its Input.Text then renders a single-line <input>,
+                // which is the bug the ticket reports, still open there.
+                // Without this the field stays single-line, so a reason typed up
+                // to MAX_LENGTH_DESCRIBE scrolls sideways instead of wrapping.
+                // multiLine also top-aligns the row so the label sits level with
+                // the first line.
+                multiLine
+              />
+            </View>
+          ) : (
+            <>
+              <Typography variant="caption" style={styles.description}>
+                {reportListDescription}
+              </Typography>
+              {REPORT_REASONS.map((reason) => (
+                <View key={reason.value} style={styles.rowSurface}>
+                  <Selection.Radio
+                    isSelected={selectedReason === reason.value}
+                    onSelect={() => handleRadioChange(reason.value)}
+                    accessibilityLabel={resolveString(reason.labelKey)}
+                  >
+                    <Typography variant="bodyBold" style={styles.option}>
+                      {resolveString(reason.labelKey)}
+                    </Typography>
+                  </Selection.Radio>
+                </View>
+              ))}
+              <Pressable
+                style={styles.row}
+                onPress={() => {
+                  setSelectedReason(ContentFlagReasonEnum.Others);
+                  setIsShowOthersOption(true);
+                }}
+                accessibilityRole="button"
+                accessibilityLabel={othersTitle}
+              >
+                <Typography variant="bodyBold" style={styles.option}>
+                  {othersTitle}
+                </Typography>
+                <AmityIcon
+                  name="chevron-right"
+                  size={24}
+                  tokenColor={AmityColorToken.IconListLeadingDefaultDefault}
+                />
+              </Pressable>
+            </>
+          )}
+        </ScrollView>
+
+        <View style={styles.bottomBar}>
+          <Button
+            hierarchy="primary"
+            size="lg"
+            fullWidth
+            label={submitButtonText}
+            disabled={isDisabledSubmitButton}
+            onPress={handleSubmitReport}
+          />
+        </View>
+        {/* The global <Toast /> is mounted outside this Modal, so RN renders it
+            beneath the native Modal layer. Mount a Toast inside the Modal too so
+            the report-error toast (Modal stays open on failure) is visible; it
+            reads the same redux toast state via context. */}
+        <Toast />
+      </View>
+    </Modal>
+  );
+}

package/src/social/features/chat/features/shared/components/ContentReportReason/index.ts

@@ -0,0 +1 @@
+export { ContentReportReason } from './ContentReportReason';

package/src/social/features/chat/features/shared/components/ContentReportReason/styles.ts

@@ -0,0 +1,95 @@
+// Styles for ContentReportReason — ported from AmityUiKitWeb
+// core/design/components/ContentReportReason/ContentReportReason.module.css.
+// Web is a full-viewport sheet (`height: 100vh`); RN uses a full-screen Modal.
+// Geometry: header padding 0.75rem/1rem → 12/16; description padding 12/16; list
+// rows padding 1rem → 16; bottom bar padding 1rem → 16; others field padding
+// 1.5rem 1rem 0 → paddingTop 24 / paddingHorizontal 16. Web token
+// `text-list-textdescription-default-default` → RN `TextListTextDescriptionDefaultDefault`.
+
+import { StyleSheet } from 'react-native';
+import { useToken } from '../../../../../../../core/design/theme/useToken';
+import { AmityColorToken } from '../../../../../../../core/design/tokens/amity-color-tokens';
+
+export const useStyles = () => {
+  const token = useToken();
+
+  const styles = StyleSheet.create({
+    screen: {
+      flex: 1,
+      backgroundColor: token(AmityColorToken.SurfaceSheetsBackgroundGeneral),
+    },
+    header: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'space-between',
+      paddingVertical: 12,
+      paddingHorizontal: 16,
+      borderBottomWidth: 1,
+      borderBottomColor: token(AmityColorToken.LineDividerPostDefault),
+      backgroundColor: token(AmityColorToken.SurfaceSheetsBackgroundGeneral),
+    },
+    headerSlot: {
+      flex: 1,
+      flexDirection: 'row',
+      alignItems: 'center',
+    },
+    headerSlotLeft: {
+      justifyContent: 'flex-start',
+    },
+    headerSlotCenter: {
+      justifyContent: 'center',
+    },
+    headerSlotRight: {
+      justifyContent: 'flex-end',
+    },
+    iconButton: {
+      width: 24,
+      height: 24,
+      alignItems: 'center',
+      justifyContent: 'center',
+    },
+    title: {
+      textAlign: 'center',
+      color: token(AmityColorToken.TextSheetsHeaderTitleDefault),
+    },
+    content: {
+      flex: 1,
+    },
+    contentContainer: {
+      paddingBottom: 48,
+    },
+    description: {
+      paddingVertical: 12,
+      paddingHorizontal: 16,
+      color: token(AmityColorToken.TextListTextDescriptionDefaultDefault),
+    },
+    // Others row (a plain Pressable) — matches the padded, space-between list row.
+    row: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'space-between',
+      padding: 16,
+      backgroundColor: token(AmityColorToken.SurfaceListDefaultDefault),
+    },
+    // Background behind a Selection.Radio (the atom owns its own padded row layout).
+    rowSurface: {
+      backgroundColor: token(AmityColorToken.SurfaceListDefaultDefault),
+    },
+    option: {
+      flex: 1,
+      color: token(AmityColorToken.TextListHeaderDefaultDefault),
+    },
+    othersField: {
+      paddingTop: 24,
+      paddingHorizontal: 16,
+    },
+    bottomBar: {
+      padding: 16,
+      borderTopWidth: 1,
+      borderTopColor: token(AmityColorToken.LineDividerPostDefault),
+      backgroundColor: token(AmityColorToken.SurfaceSheetsBackgroundGeneral),
+    },
+  });
+
+  return { styles, token };
+};

package/src/social/features/chat/features/shared/components/DateSeparator/DateSeparator.tsx

@@ -0,0 +1,29 @@
+// DateSeparator — ported from AmityUiKitWeb features/shared/components/DateSeparator.
+// A centered date pill shown between message groups. Web div→View, span→Typography.
+
+// 1. React / RN imports
+import { View } from 'react-native';
+
+// 2. Internal imports
+import { Typography } from '../../../../../../../core/design/components/Typography';
+import { useStyles } from './styles';
+
+// 3. Types
+type DateSeparatorProps = {
+  label: string;
+};
+
+// 4. Named function component
+export function DateSeparator({ label }: DateSeparatorProps) {
+  const { styles } = useStyles();
+
+  return (
+    <View style={styles.dateSeparator} accessibilityRole="text">
+      <View style={styles.pill}>
+        <Typography variant="caption" style={styles.label}>
+          {label}
+        </Typography>
+      </View>
+    </View>
+  );
+}

package/src/social/features/chat/features/shared/components/DateSeparator/index.ts

@@ -0,0 +1 @@
+export { DateSeparator } from './DateSeparator';

package/src/social/features/chat/features/shared/components/DateSeparator/styles.ts

@@ -0,0 +1,46 @@
+// Styles for DateSeparator — ported from DateSeparator.module.css.
+// Geometry: outer paddingVertical 0.5rem→8; pill padding 0.25rem/0.5rem→4/8,
+// border-radius 1rem→16. Colours via tokens.
+//
+// Shadow: web's pill relies on a box-shadow for definition — without it the pill
+// blends into a light message-list background. Web's shadow colours are RAW rgba
+// (NOT design tokens — there is no shadow token to map to), so we port them verbatim
+// as rgb()+opacity. rgb()/rgba() (no `#`) is intentionally allowed by the no-hex gate;
+// dropping the shadow would be an unfaithful silent simplification.
+// web: 0 0 2px rgb(40 41 61 /10%), 0 2px 4px rgb(96 97 112 /16%) → RN approximates the
+// dominant drop layer (iOS shadow* + Android elevation).
+
+import { StyleSheet } from 'react-native';
+import { useToken } from '../../../../../../../core/design/theme/useToken';
+import { AmityColorToken } from '../../../../../../../core/design/tokens/amity-color-tokens';
+
+export const useStyles = () => {
+  const token = useToken();
+
+  const styles = StyleSheet.create({
+    dateSeparator: {
+      alignItems: 'center',
+      justifyContent: 'center',
+      paddingVertical: 8,
+    },
+    pill: {
+      paddingVertical: 4,
+      paddingHorizontal: 8,
+      borderRadius: 16,
+      backgroundColor: token(
+        AmityColorToken.SurfaceDateAndTimeDateSeparatorDefault
+      ),
+      // web box-shadow (raw rgba, non-tokenized) — ported so the pill reads on light bg
+      shadowColor: 'rgb(96, 97, 112)',
+      shadowOffset: { width: 0, height: 2 },
+      shadowOpacity: 0.16,
+      shadowRadius: 4,
+      elevation: 2,
+    },
+    label: {
+      color: token(AmityColorToken.TextDateAndTimeDateSeparatorDefault),
+    },
+  });
+
+  return { styles, token };
+};

package/src/social/features/chat/features/shared/components/DeletedMessagePill/DeletedMessagePill.tsx

@@ -0,0 +1,39 @@
+// DeletedMessagePill — ported from AmityUiKitWeb features/shared/components/DeletedMessagePill.
+// An outlined pill with a trash glyph + "This message was deleted". Web relies on
+// CSS `currentcolor` to tint icon/text/border from one `color` per data-user side;
+// RN has no `currentcolor`, so the side colour is resolved explicitly for the icon
+// (tokenColor) and for the border/label (styles).
+
+// 1. React / RN imports
+import { View } from 'react-native';
+
+// 2. Internal imports
+import { Typography } from '../../../../../../../core/design/components/Typography';
+import { AmityIcon } from '../../../../../../../core/design/icons';
+import { AmityColorToken } from '../../../../../../../core/design/tokens/amity-color-tokens';
+import { useString } from '../../../../../../../core/localization';
+import { useStyles } from './styles';
+
+// 3. Types
+type DeletedMessagePillProps = {
+  isUser: boolean;
+};
+
+// 4. Named function component
+export function DeletedMessagePill({ isUser }: DeletedMessagePillProps) {
+  const { styles } = useStyles(isUser);
+  const deletedLabel = useString('amity_chat_message_deleted');
+
+  const iconColor = isUser
+    ? AmityColorToken.TextChatBubbleOutboundMessagesDeleted
+    : AmityColorToken.TextChatBubbleInboundMessagesDeleted;
+
+  return (
+    <View style={styles.pill}>
+      <AmityIcon name="trash-r" size={16} tokenColor={iconColor} />
+      <Typography variant="caption" style={styles.label} numberOfLines={1}>
+        {deletedLabel}
+      </Typography>
+    </View>
+  );
+}

package/src/social/features/chat/features/shared/components/DeletedMessagePill/index.ts

@@ -0,0 +1 @@
+export { DeletedMessagePill } from './DeletedMessagePill';

package/src/social/features/chat/features/shared/components/DeletedMessagePill/styles.ts

@@ -0,0 +1,43 @@
+// Styles for DeletedMessagePill — ported from DeletedMessagePill.module.css.
+// Geometry: gap 0.25rem→4, padding 0.25rem/0.5rem→4/8, border 0.0625rem→1,
+// border-radius 1.25rem→20. `inline-flex` → alignSelf 'flex-start' so the pill
+// hugs its content instead of stretching the row. Per-side colour resolved here
+// (web `currentcolor` cascade has no RN equivalent).
+
+import { StyleSheet } from 'react-native';
+import { useToken } from '../../../../../../../core/design/theme/useToken';
+import { AmityColorToken } from '../../../../../../../core/design/tokens/amity-color-tokens';
+
+export const useStyles = (isUser: boolean) => {
+  const token = useToken();
+
+  const labelColor = token(
+    isUser
+      ? AmityColorToken.TextChatBubbleOutboundMessagesDeleted
+      : AmityColorToken.TextChatBubbleInboundMessagesDeleted
+  );
+  const borderColor = token(
+    isUser
+      ? AmityColorToken.BorderChatBubbleOutboundDeleted
+      : AmityColorToken.BorderChatBubbleInboundDeleted
+  );
+
+  const styles = StyleSheet.create({
+    pill: {
+      alignSelf: 'flex-start',
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: 4,
+      paddingVertical: 4,
+      paddingHorizontal: 8,
+      borderWidth: 1,
+      borderColor,
+      borderRadius: 20,
+    },
+    label: {
+      color: labelColor,
+    },
+  });
+
+  return { styles, token };
+};

package/src/social/features/chat/features/shared/components/EmptyState/EmptyState.tsx

@@ -0,0 +1,63 @@
+// EmptyState — ported from AmityUiKitWeb features/shared/components/EmptyState.
+// A centered icon + title for the various chat empty/prompt states. Web icons
+// (Search.Light / SearchCross / ListRadio / Inbox) map to the SoT icon registry.
+// The `min-height: calc(100svh - …)` fill → flex:1 (no svh in RN).
+
+// 1. React / RN imports
+import { View } from 'react-native';
+
+// 2. Internal imports
+import { Typography } from '../../../../../../../core/design/components/Typography';
+import {
+  AmityIcon,
+  type AmityIconName,
+} from '../../../../../../../core/design/icons';
+import { AmityColorToken } from '../../../../../../../core/design/tokens/amity-color-tokens';
+import { useString } from '../../../../../../../core/localization';
+import { useStyles } from './styles';
+
+// 3. Types
+type EmptyStateVariant =
+  | 'prompt'
+  | 'no-results'
+  | 'no-members'
+  | 'no-banned-users'
+  | 'no-archived-chats';
+
+type EmptyStateProps = {
+  variant: EmptyStateVariant;
+};
+
+function getIconName(variant: EmptyStateVariant): AmityIconName {
+  if (variant === 'prompt') return 'search-l';
+  if (variant === 'no-banned-users') return 'list-radio-l';
+  if (variant === 'no-archived-chats') return 'inbox-l';
+  return 'search-cross-l';
+}
+
+// 4. Named function component
+export function EmptyState({ variant }: EmptyStateProps) {
+  const { styles } = useStyles();
+
+  // Resolved unconditionally (matches web) to respect rules-of-hooks.
+  const content: Record<EmptyStateVariant, string> = {
+    'prompt': useString('amity_chat_search_min_chars'),
+    'no-results': useString('amity_chat_search_no_results'),
+    'no-members': useString('amity_chat_no_members_found'),
+    'no-banned-users': useString('amity_chat_banned_members_empty'),
+    'no-archived-chats': useString('amity_chat_archived_empty_title'),
+  };
+
+  return (
+    <View style={styles.emptyState}>
+      <AmityIcon
+        name={getIconName(variant)}
+        size={64}
+        tokenColor={AmityColorToken.IconEmptyStateIconDefault}
+      />
+      <Typography variant="titleBold" style={styles.text}>
+        {content[variant]}
+      </Typography>
+    </View>
+  );
+}

package/src/social/features/chat/features/shared/components/EmptyState/index.ts

@@ -0,0 +1 @@
+export { EmptyState } from './EmptyState';

package/src/social/features/chat/features/shared/components/EmptyState/styles.ts

@@ -0,0 +1,30 @@
+// Styles for EmptyState — ported from EmptyState.module.css.
+// Geometry: gap 0.5rem→8, padding 1.5rem→24, icon 4rem→64, title max-width
+// 15.75rem→252. `min-height: calc(100svh - …)` → flex:1 fill + center. Colours
+// via tokens. `white-space: pre-line` is native to RN Text (\n honoured).
+
+import { StyleSheet } from 'react-native';
+import { useToken } from '../../../../../../../core/design/theme/useToken';
+import { AmityColorToken } from '../../../../../../../core/design/tokens/amity-color-tokens';
+
+export const useStyles = () => {
+  const token = useToken();
+
+  const styles = StyleSheet.create({
+    emptyState: {
+      flex: 1,
+      flexDirection: 'column',
+      alignItems: 'center',
+      justifyContent: 'center',
+      gap: 8,
+      padding: 24,
+    },
+    text: {
+      maxWidth: 252,
+      textAlign: 'center',
+      color: token(AmityColorToken.TextEmptyStateTitleDefault),
+    },
+  });
+
+  return { styles, token };
+};