@amityco/react-native-social-uikit 4.1.1-e85011d9.0 → 4.1.1-fb84f89a.0

package/src/chat/pages/AmitySearchChannelPage/index.tsx

@@ -0,0 +1,19 @@
+// AmitySearchChannelPage — the navigation-destination wrapper for chat search,
+// ported from AmityUiKitWeb v4/chat/pages/SearchChannelPage.
+// Mounts SearchChannel inside a SafeAreaView; the SearchChannel Header owns the
+// "Cancel" action that pops back to the chat home.
+//
+// RN adaptation: web wraps the page in `useAmityPage`'s theme/accessibility
+// container; the RN pages use a plain SafeAreaView (mirrors AmityGroupMemberListPage).
+
+import { SafeAreaView } from 'react-native-safe-area-context';
+
+import { SearchChannel } from '../../features/search';
+
+export default function AmitySearchChannelPage() {
+  return (
+    <SafeAreaView style={{ flex: 1 }}>
+      <SearchChannel />
+    </SafeAreaView>
+  );
+}

package/src/chat/pages/AmitySelectGroupMemberPage/index.tsx

@@ -0,0 +1,12 @@
+// AmitySelectGroupMemberPage — pick members for a new group (step 1 of create).
+import { SafeAreaView } from 'react-native-safe-area-context';
+
+import { SelectGroupMember } from '../../features/group/select-member';
+
+export default function AmitySelectGroupMemberPage() {
+  return (
+    <SafeAreaView edges={['top', 'left', 'right']} style={{ flex: 1 }}>
+      <SelectGroupMember />
+    </SafeAreaView>
+  );
+}

package/src/chat/utils/groupMessagesByDate.ts

@@ -0,0 +1,67 @@
+// groupMessagesByDate — ported from AmityUiKitWeb v4/chat/utils/groupMessagesByDate.
+// Interleaves a date-separator item before each new calendar day's messages, so the
+// MessageList can render "Mon, 21 Jul" dividers between days. Input must be in
+// chronological (oldest → newest) order; the list reverses the result for its
+// inverted FlatList. Web read navigator.language; RN uses the runtime default locale
+// via Intl (Hermes-supported), matching utils/timestamp.
+
+export type ChatItem =
+  | { kind: 'date'; id: string; label: string }
+  | { kind: 'message'; id: string; message: Amity.Message };
+
+function sameCalendarDay(a: Date, b: Date): boolean {
+  return (
+    a.getFullYear() === b.getFullYear() &&
+    a.getMonth() === b.getMonth() &&
+    a.getDate() === b.getDate()
+  );
+}
+
+function formatDateLabel(date: Date): string {
+  const year = date.getFullYear();
+  const currentYear = new Date().getFullYear();
+  const weekday = new Intl.DateTimeFormat(undefined, {
+    weekday: 'short',
+  }).format(date);
+  const day = new Intl.DateTimeFormat(undefined, { day: '2-digit' }).format(
+    date
+  );
+  const month = new Intl.DateTimeFormat(undefined, { month: 'short' }).format(
+    date
+  );
+  const datePart =
+    year === currentYear ? `${day} ${month}` : `${day} ${month} ${year}`;
+  return `${weekday}, ${datePart}`;
+}
+
+/** messages MUST be chronological (oldest → newest). */
+export function groupMessagesByDate(messages: Amity.Message[]): ChatItem[] {
+  const items: ChatItem[] = [];
+  let lastDate: Date | null = null;
+
+  for (const message of messages) {
+    const createdAt = message.createdAt ? new Date(message.createdAt) : null;
+    if (!createdAt) continue;
+
+    if (!lastDate || !sameCalendarDay(lastDate, createdAt)) {
+      items.push({
+        kind: 'date',
+        id: `date-${createdAt.toISOString().slice(0, 10)}`,
+        label: formatDateLabel(createdAt),
+      });
+    }
+
+    items.push({
+      kind: 'message',
+      id:
+        message.messageId ??
+        (message as { uniqueId?: string }).uniqueId ??
+        String(items.length),
+      message,
+    });
+
+    lastDate = createdAt;
+  }
+
+  return items;
+}

package/src/chat/utils/highlightMatch.tsx

@@ -0,0 +1,40 @@
+// highlightMatch — faithful port of AmityUiKitWeb chat/utils/highlightMatch.
+// Splits `text` around case-insensitive occurrences of `query`, wrapping each
+// match in a nested <Text> styled with the highlight colour (web wrapped matches
+// in a <span className=…>). Returns the raw string when the query is shorter than
+// SEARCH_MIN_QUERY_LENGTH, matching web.
+
+import type { ReactNode } from 'react';
+import { Text, type TextStyle } from 'react-native';
+import { SEARCH_MIN_QUERY_LENGTH } from '../constants/search';
+
+export function highlightMatch(
+  text: string,
+  query: string,
+  highlightStyle: TextStyle
+): ReactNode {
+  if (text.length === 0) return text;
+  const trimmed = query.trim();
+  if (trimmed.length < SEARCH_MIN_QUERY_LENGTH) return text;
+
+  const lowerText = text.toLowerCase();
+  const lowerQuery = trimmed.toLowerCase();
+
+  const parts: ReactNode[] = [];
+  let cursor = 0;
+  let matchAt = lowerText.indexOf(lowerQuery, cursor);
+
+  while (matchAt !== -1) {
+    if (matchAt > cursor) parts.push(text.slice(cursor, matchAt));
+    parts.push(
+      <Text key={`m-${matchAt}`} style={highlightStyle}>
+        {text.slice(matchAt, matchAt + trimmed.length)}
+      </Text>
+    );
+    cursor = matchAt + trimmed.length;
+    matchAt = lowerText.indexOf(lowerQuery, cursor);
+  }
+
+  if (cursor < text.length) parts.push(text.slice(cursor));
+  return parts.length > 0 ? parts : text;
+}

package/src/chat/utils/previewLink.ts

@@ -0,0 +1,37 @@
+// previewLink — faithful port of AmityUiKitWeb chat/utils/previewLink.ts.
+// extractFirstPreviewUrl is ported VERBATIM (same linkifyjs `find`, same
+// http→https upgrade) so RN previews the same URLs web does — including bare
+// `www.`/domain URLs and URLs followed by punctuation, which a naive
+// /https?:\/\/\S+/ regex silently misses or over-captures.
+//
+// getHostName: web uses `new URL(url).hostname`, but RN's URL implementation
+// does not reliably expose `.hostname`, so we strip the host with a regex
+// (behaviour-equivalent for display). The SDK metadata already returns `domain`
+// directly; this is only a fallback.
+
+import { find } from 'linkifyjs';
+
+export function extractFirstPreviewUrl(text: string): string | null {
+  if (!text) return null;
+
+  const urls = find(text, 'url');
+  if (urls.length === 0) return null;
+
+  const { value, href } = urls[0];
+
+  // linkifyjs defaults bare `www.foo.com` to `http://www.foo.com`; we want https.
+  if (!/^https?:\/\//i.test(value) && href.startsWith('http://')) {
+    return `https://${href.slice('http://'.length)}`;
+  }
+
+  return href;
+}
+
+export function getHostName(url: string): string {
+  return (
+    url
+      .replace(/^https?:\/\//i, '')
+      .replace(/^www\./i, '')
+      .split(/[/?#]/)[0] ?? ''
+  );
+}

package/src/chat/utils/timestamp.ts

@@ -0,0 +1,54 @@
+// Timestamp util — ported from AmityUiKitWeb v4/chat/utils/timestamp.
+// Formats a channel's last-activity timestamp as a compact relative string
+// ("Now", "5m", "3h", "2d") falling back to a short date ("07 Jul" / "07 Jul 2024").
+//
+// Web adaptations: `navigator.language` (browser-only) is dropped — RN uses the
+// runtime default locale via `Intl.DateTimeFormat(undefined, ...)` (supported by
+// Hermes). The localized suffixes/labels resolve through the same
+// `resolveString` API as web.
+
+import dayjs from 'dayjs';
+import { resolveString } from '../../core/localization';
+
+function formatShortDate(date: Date, withYear: boolean): string {
+  const day = new Intl.DateTimeFormat(undefined, { day: '2-digit' }).format(
+    date
+  );
+  const month = new Intl.DateTimeFormat(undefined, { month: 'short' }).format(
+    date
+  );
+  return withYear ? `${day} ${month} ${date.getFullYear()}` : `${day} ${month}`;
+}
+
+// formatMessageTime — ported from AmityUiKitWeb v4/chat/utils/formatMessageTime.
+// A single message's time as 24-hour HH:MM (shown beside each bubble).
+export function formatMessageTime(input: string | Date | number): string {
+  const d = input instanceof Date ? input : new Date(input);
+  const hh = d.getHours().toString().padStart(2, '0');
+  const mm = d.getMinutes().toString().padStart(2, '0');
+  return `${hh}:${mm}`;
+}
+
+export function formatTimestamp(input: string | Date): string {
+  const now = dayjs();
+  const time = dayjs(input);
+  const diffInSeconds = now.diff(time, 'second');
+  const diffInMinutes = now.diff(time, 'minute');
+  const diffInHours = now.diff(time, 'hour');
+  const diffInDays = now.diff(time, 'day');
+
+  if (diffInSeconds < 60) return resolveString('amity_chat_timestamp_now');
+  if (diffInMinutes < 60)
+    return `${diffInMinutes}${resolveString(
+      'amity_common_time_time_minutes_suffix'
+    )}`;
+  if (diffInHours < 24)
+    return `${diffInHours}${resolveString(
+      'amity_common_time_time_hours_suffix'
+    )}`;
+  if (diffInDays < 7)
+    return `${diffInDays}${resolveString(
+      'amity_common_time_time_days_suffix'
+    )}`;
+  return formatShortDate(time.toDate(), !now.isSame(time, 'year'));
+}

package/src/core/assets/icons/emptyCommunity2.tsx

@@ -0,0 +1,46 @@
+// emptyCommunity2 — ported 1:1 from AmityUiKitWeb
+// src/v4/core/design/illustrations/EmptyCommunity2 (Light + Dark). The chat-home
+// "no conversation yet" illustration: a 160×160 circle backdrop behind two list
+// cards (avatar + title/description bars). Web bakes theme-specific colours (not
+// tokens), so this asset lives under core/assets/icons (outside the tokens-only
+// no-hex scope) and returns an SVG string for SvgXml, matching the sibling
+// `emptyCommunity` asset. Pass `dark` to pick the theme variant.
+
+type Palette = {
+  circle: string;
+  card: string;
+  stroke: string;
+  bar: string;
+};
+
+// Web Light() / Dark() fills.
+const LIGHT: Palette = {
+  circle: '#EBEBEB',
+  card: '#FFFFFF',
+  stroke: '#D9D9D9',
+  bar: '#A8A8A8',
+};
+const DARK: Palette = {
+  circle: '#595959',
+  card: '#2E2E2E',
+  stroke: '#2E2E2E',
+  bar: '#949494',
+};
+
+export const emptyCommunity2 = (dark = false): string => {
+  const c = dark ? DARK : LIGHT;
+  return `<svg width="160" height="160" viewBox="0 0 160 160" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <g clip-path="url(#ec2_clip)">
+    <path d="M70 150C108.66 150 140 118.66 140 80C140 41.3401 108.66 10 70 10C31.3401 10 0 41.3401 0 80C0 118.66 31.3401 150 70 150Z" fill="${c.circle}"/>
+    <path d="M20.0034 89.5857H155.001C157.416 89.5857 159.374 91.543 159.374 93.9578V118.958C159.373 121.372 157.416 123.33 155.001 123.33H20.0034C17.5888 123.33 15.6316 121.372 15.6313 118.958V93.9578C15.6313 91.543 17.5887 89.5857 20.0034 89.5857Z" fill="${c.card}" stroke="${c.stroke}" stroke-width="1.25529"/>
+    <path opacity="0.3" d="M78.5128 96.9578H52.5131C50.8563 96.9578 49.5132 98.3009 49.5132 99.9577C49.5132 101.615 50.8563 102.958 52.5131 102.958H78.5128C80.1696 102.958 81.5128 101.615 81.5128 99.9577C81.5128 98.3009 80.1696 96.9578 78.5128 96.9578Z" fill="${c.bar}"/>
+    <path opacity="0.15" d="M96.5127 109.958H52.5133C50.8564 109.958 49.5133 111.301 49.5133 112.958C49.5133 114.615 50.8564 115.958 52.5133 115.958H96.5127C98.1695 115.958 99.5126 114.615 99.5126 112.958C99.5126 111.301 98.1695 109.958 96.5127 109.958Z" fill="${c.bar}"/>
+    <path d="M32.6069 114.458C37.0252 114.458 40.6069 110.876 40.6069 106.458C40.6069 102.039 37.0252 98.4575 32.6069 98.4575C28.1887 98.4575 24.6069 102.039 24.6069 106.458C24.6069 110.876 28.1887 114.458 32.6069 114.458Z" fill="${c.bar}"/>
+    <path d="M5 44.6279H139.998C142.413 44.6279 144.37 46.5853 144.37 49V74C144.37 76.4146 142.413 78.3721 139.998 78.3721H5C2.58538 78.3721 0.628143 76.4146 0.62793 74V49C0.62793 46.5853 2.58525 44.6279 5 44.6279Z" fill="${c.card}" stroke="${c.stroke}" stroke-width="1.25529"/>
+    <path opacity="0.3" d="M63.5094 52H37.5097C35.8529 52 34.5098 53.3431 34.5098 55C34.5098 56.6568 35.8529 57.9999 37.5097 57.9999H63.5094C65.1662 57.9999 66.5093 56.6568 66.5093 55C66.5093 53.3431 65.1662 52 63.5094 52Z" fill="${c.bar}"/>
+    <path opacity="0.15" d="M81.5093 65H37.5098C35.853 65 34.5099 66.3431 34.5099 68C34.5099 69.6568 35.853 70.9999 37.5098 70.9999H81.5093C83.1661 70.9999 84.5092 69.6568 84.5092 68C84.5092 66.3431 83.1661 65 81.5093 65Z" fill="${c.bar}"/>
+    <path d="M17.6035 69.4998C22.0218 69.4998 25.6035 65.918 25.6035 61.4998C25.6035 57.0815 22.0218 53.4998 17.6035 53.4998C13.1852 53.4998 9.60352 57.0815 9.60352 61.4998C9.60352 65.918 13.1852 69.4998 17.6035 69.4998Z" fill="${c.bar}"/>
+  </g>
+  <defs><clipPath id="ec2_clip"><rect width="160" height="160" fill="white"/></clipPath></defs>
+</svg>`;
+};

package/src/core/assets/icons/xml.ts

@@ -60,66 +60,6 @@ export const closeIcon = (
 ): string => `<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M7.65234 6.25L11.4492 2.48828C11.6602 2.27734 11.6602 1.89062 11.4492 1.67969L10.5703 0.800781C10.3594 0.589844 9.97266 0.589844 9.76172 0.800781L6 4.59766L2.20312 0.800781C1.99219 0.589844 1.60547 0.589844 1.39453 0.800781L0.515625 1.67969C0.304688 1.89062 0.304688 2.27734 0.515625 2.48828L4.3125 6.25L0.515625 10.0469C0.304688 10.2578 0.304688 10.6445 0.515625 10.8555L1.39453 11.7344C1.60547 11.9453 1.99219 11.9453 2.20312 11.7344L6 7.9375L9.76172 11.7344C9.97266 11.9453 10.3594 11.9453 10.5703 11.7344L11.4492 10.8555C11.6602 10.6445 11.6602 10.2578 11.4492 10.0469L7.65234 6.25Z" fill="${color}"/>
 </svg>`;
-// Ported from web UIKit icons/MutedFilled (speaker + waves) — shown when audio
-// is ON (unmuted). Used by the carousel full-screen media viewer.
-export const soundOnIcon = (
-  color: string = '#FFFFFF'
-): string => `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M11.1211 5.78125C11.6484 5.25391 12.5625 5.60547 12.5625 6.37891V18.1562C12.5625 18.9297 11.6484 19.2812 11.1211 18.7539L7.99219 15.625H4.40625C3.91406 15.625 3.5625 15.2734 3.5625 14.7812V9.71875C3.5625 9.26172 3.91406 8.875 4.40625 8.875H7.99219L11.1211 5.78125ZM20.4375 12.25C20.4375 14.5 19.2773 16.5391 17.4141 17.7695C16.9922 18.0156 16.4648 17.875 16.2539 17.4883C16.0078 17.1016 16.1133 16.5742 16.5 16.3281C17.9062 15.4492 18.75 13.9023 18.75 12.25C18.75 10.6328 17.9062 9.08594 16.5 8.20703C16.1133 7.96094 16.0078 7.43359 16.2539 7.04688C16.5 6.625 17.0273 6.51953 17.4141 6.76562C19.2773 7.99609 20.4375 10.0352 20.4375 12.25ZM15.4453 9.57812C16.4297 10.1055 17.0625 11.1602 17.0625 12.25C17.0625 13.375 16.4297 14.4297 15.4453 14.957C15.0234 15.2031 14.5312 15.0625 14.2852 14.6406C14.0742 14.2188 14.2148 13.7266 14.6367 13.4805C15.0586 13.2344 15.375 12.7773 15.375 12.25C15.375 11.7578 15.0586 11.3008 14.6367 11.0547C14.2148 10.8086 14.0742 10.3164 14.2852 9.89453C14.5312 9.47266 15.0234 9.33203 15.4453 9.57812Z" fill="${color}"/>
-</svg>`;
-// Ported from web UIKit icons/UnMuted (speaker with slash) — shown when audio
-// is OFF (muted).
-export const soundOffIcon = (
-  color: string = '#FFFFFF'
-): string => `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M23.0039 19.3867C23.25 19.5625 23.3203 19.9141 23.1094 20.1602L22.4414 21.0391C22.2305 21.2852 21.8789 21.3555 21.6328 21.1445L0.960938 5.14844C0.714844 4.97266 0.644531 4.62109 0.855469 4.375L1.55859 3.49609C1.73438 3.25 2.08594 3.17969 2.33203 3.39062L7.67578 7.50391L9.43359 5.78125C9.96094 5.25391 10.875 5.60547 10.875 6.37891V9.96484L13.6523 12.1445C13.6172 11.6875 13.3359 11.2656 12.9492 11.0547C12.5273 10.8086 12.3867 10.3164 12.5977 9.89453C12.8438 9.47266 13.3359 9.33203 13.7578 9.57812C14.7422 10.1055 15.375 11.1602 15.375 12.25C15.375 12.6367 15.2695 12.9531 15.1641 13.3047L16.5352 14.3594C16.8516 13.7266 17.0625 13.0234 17.0625 12.25C17.0625 10.6328 16.2188 9.08594 14.8125 8.20703C14.4258 7.96094 14.3203 7.43359 14.5664 7.04688C14.8125 6.66016 15.3398 6.51953 15.7266 6.76562C17.5898 7.96094 18.75 10.0352 18.75 12.25C18.75 13.4102 18.4336 14.4648 17.9062 15.4141L19.2422 16.4688C19.9805 15.2031 20.4023 13.7617 20.4023 12.2852C20.4023 9.50781 19.0312 6.90625 16.6758 5.39453C16.2891 5.14844 16.1836 4.62109 16.4297 4.19922C16.7109 3.8125 17.2383 3.70703 17.625 3.95312C20.4375 5.81641 22.125 8.91016 22.125 12.25C22.125 14.1484 21.5625 15.9414 20.5781 17.4883L23.0039 19.3867ZM1.875 9.71875C1.875 9.4375 2.01562 9.19141 2.26172 9.01562L10.875 15.6602V18.1562C10.875 18.9297 9.96094 19.2812 9.43359 18.7539L6.30469 15.625H2.71875C2.22656 15.625 1.875 15.2734 1.875 14.7812V9.71875Z" fill="${color}"/>
-</svg>`;
-// Ported from web UIKit icons/VideoControl — the play overlay on video frames
-// (50% black disc + white triangle). Replaces the generic playBtn in carousels.
-export const videoControlIcon: string = `<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
-<circle cx="20" cy="20" r="20" fill="black" fill-opacity="0.5"/>
-<g clip-path="url(#clip0_212_1181)">
-<path d="M16 13V27L27 20L16 13Z" fill="white"/>
-</g>
-<defs>
-<clipPath id="clip0_212_1181">
-<rect width="24" height="24" fill="white" transform="translate(8 8)"/>
-</clipPath>
-</defs>
-</svg>`;
-// Ported from web UIKit icons/BrokenImage — shown on a media frame that fails
-// to load. Defaults to base-shade2.
-export const brokenImageIcon = (
-  color: string = '#898E9E'
-): string => `<svg width="29" height="29" viewBox="0 0 29 29" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M26.8655 25.3718L1.64863 5.63684C1.35345 5.42599 1.26912 5.00431 1.52213 4.70913L1.94381 4.16093C2.19683 3.90792 2.61851 3.82358 2.91369 4.0766L28.1306 23.8115C28.3836 24.0224 28.4679 24.4441 28.2149 24.7392L27.7932 25.2453C27.5402 25.5404 27.1185 25.6248 26.8655 25.3718Z" fill="${color}"/>
-<path d="M6.11895 10.8249V21.422C6.11895 21.5907 6.20329 21.675 6.37196 21.675H20.021L22.6144 23.6991H6.11895C4.9804 23.6991 4.09442 22.8135 4.09442 21.675V9.53041C4.09442 9.43874 4.10085 9.34826 4.11287 9.25939L6.11895 10.8249Z" fill="${color}"/>
-<path d="M23.6611 7.50631C24.7574 7.50644 25.6852 8.4341 25.6852 9.53041V21.675C25.6852 21.7472 25.6806 21.8184 25.6734 21.8885L23.6611 20.3133V9.78342C23.6611 9.65699 23.5345 9.53056 23.4081 9.53041H9.88251L7.29616 7.50631H23.6611Z" fill="${color}"/>
-<path d="M9.78763 15.9822C9.99846 15.7715 10.2937 15.7714 10.5045 15.9822L12.1912 17.6268L13.3496 16.468L17.4272 19.6509H8.14305V17.6268L9.78763 15.9822Z" fill="${color}"/>
-<path d="M17.2093 12.6087C17.4201 12.398 17.7154 12.3979 17.9262 12.6087L21.637 16.2774V18.7293L15.7194 14.0982L17.2093 12.6087Z" fill="${color}"/>
-<path d="M10.5142 14.2555C10.2301 14.4677 9.87584 14.5906 9.49245 14.5907C8.52257 14.5907 7.8057 13.8738 7.8057 12.9039C7.8057 12.6695 7.8512 12.4458 7.93528 12.2424L10.5142 14.2555Z" fill="${color}"/>
-</svg>`;
-// Ported from web UIKit icons/Clear (ClearIcon) — the circular close button
-// used in the full-screen media viewers.
-export const clearIcon = (
-  color: string = '#FFFFFF'
-): string => `<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M8.82715 17.3906C13.4238 17.3906 17.2119 13.5938 17.2119 9.00586C17.2119 4.40918 13.415 0.612305 8.82715 0.612305C4.23047 0.612305 0.442383 4.40918 0.442383 9.00586C0.442383 13.5938 4.23926 17.3906 8.82715 17.3906ZM5.88281 12.5479C5.54883 12.5479 5.28516 12.2842 5.28516 11.9502C5.28516 11.792 5.34668 11.6514 5.46973 11.5283L7.9834 9.01465L5.46973 6.49219C5.34668 6.37793 5.28516 6.22852 5.28516 6.07031C5.28516 5.74512 5.54883 5.49023 5.88281 5.49023C6.0498 5.49023 6.19043 5.54297 6.2959 5.66602L8.82715 8.17969L11.3584 5.65723C11.4902 5.52539 11.6221 5.47266 11.7803 5.47266C12.1055 5.47266 12.3691 5.73633 12.3691 6.06152C12.3691 6.22852 12.3164 6.36035 12.1934 6.4834L9.6709 9.01465L12.1846 11.5283C12.3076 11.6514 12.3691 11.7832 12.3691 11.9502C12.3691 12.2842 12.1055 12.5479 11.7627 12.5479C11.5957 12.5479 11.4551 12.4863 11.332 12.3721L8.82715 9.84961L6.32227 12.3721C6.19922 12.4863 6.0498 12.5479 5.88281 12.5479Z" fill="${color}"/>
-</svg>`;
-// Ported from web UIKit icons/Play — solid triangle, used in the full-screen
-// video player control bar (play/pause toggle).
-export const playControlIcon = (
-  color: string = '#FFFFFF'
-): string => `<svg width="24" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M19.531 10.809a1.71 1.71 0 010 2.918L7.156 21.039c-1.125.668-2.531-.14-2.531-1.477V4.938c0-1.44 1.512-2.039 2.531-1.44l12.375 7.312z" fill="${color}"/>
-</svg>`;
-// Ported from web UIKit icons/Pause — two bars, used in the full-screen video
-// player control bar.
-export const pauseControlIcon = (
-  color: string = '#FFFFFF'
-): string => `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M9.1875 20.0898H5.8125C4.86328 20.0898 4.125 19.3516 4.125 18.4023V6.02734C4.125 5.11328 4.86328 4.33984 5.8125 4.33984H9.1875C10.1016 4.33984 10.875 5.11328 10.875 6.02734V18.4023C10.875 19.3516 10.1016 20.0898 9.1875 20.0898ZM19.875 18.4023C19.875 19.3516 19.1016 20.0898 18.1875 20.0898H14.8125C13.8633 20.0898 13.125 19.3516 13.125 18.4023V6.02734C13.125 5.11328 13.8633 4.33984 14.8125 4.33984H18.1875C19.1016 4.33984 19.875 5.11328 19.875 6.02734V18.4023Z" fill="${color}"/>
-</svg>`;
 export const cameraIcon: string = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M19.5 19.5H4.5C4.10218 19.5 3.72064 19.342 3.43934 19.0607C3.15804 18.7794 3 18.3978 3 18V7.5C3 7.10218 3.15804 6.72064 3.43934 6.43934C3.72064 6.15804 4.10218 6 4.5 6H7.49945L8.99945 3.75H14.9995L16.4995 6H19.5C19.8978 6 20.2794 6.15804 20.5607 6.43934C20.842 6.72064 21 7.10218 21 7.5V18C21 18.3978 20.842 18.7794 20.5607 19.0607C20.2794 19.342 19.8978 19.5 19.5 19.5Z" stroke="#292B32" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/>
 <path d="M12 15.75C13.864 15.75 15.375 14.239 15.375 12.375C15.375 10.511 13.864 9 12 9C10.136 9 8.625 10.511 8.625 12.375C8.625 14.239 10.136 15.75 12 15.75Z" stroke="#292B32" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/>

package/src/core/design/atoms/Avatar/Avatar.tsx

@@ -0,0 +1,93 @@
+// Avatar atom — ported from AmityUiKitWeb core/design/atoms/Avatar.
+// Profile avatar: image / initials / user-icon fallback, rounded or squared,
+// 8 intrinsic sizes (SoT avatarIcon.avatar.sizes), optional profile border ring,
+// indicator badge slot and label. Web hover edit-photo affordance is web-only
+// (no touch-hover, no matching RN token) and is intentionally omitted.
+
+// 1. React / RN imports
+import { type ReactNode } from 'react';
+import { View, Text, Image, Pressable } from 'react-native';
+
+// 2. Internal imports
+import { AmityIcon } from '../../icons';
+import { useStyles } from './styles';
+
+// 3. Types
+export type AvatarVariant = 'image' | 'icon' | 'text';
+export type AvatarShape = 'rounded' | 'squared';
+export type AvatarSize = 16 | 24 | 28 | 32 | 40 | 56 | 64 | 120;
+export type AvatarState = 'default' | 'skeleton';
+export type AvatarBorderWidth = 0 | 1 | 2 | 3 | 4;
+
+export type AvatarProps = {
+  variant?: AvatarVariant;
+  imageUrl?: string;
+  initials?: string;
+  shape?: AvatarShape;
+  size?: AvatarSize;
+  state?: AvatarState;
+  borderWidth?: AvatarBorderWidth;
+  indicator?: ReactNode;
+  label?: string;
+  onPress?: () => void;
+};
+
+// 4. Named function component
+export function Avatar({
+  variant = 'icon',
+  imageUrl,
+  initials,
+  shape = 'rounded',
+  size = 40,
+  state = 'default',
+  borderWidth = 0,
+  indicator,
+  label,
+  onPress,
+}: AvatarProps) {
+  const { styles, glyphSize, glyphColor } = useStyles(
+    size,
+    shape,
+    state,
+    borderWidth
+  );
+
+  let content: ReactNode = null;
+  if (state !== 'skeleton') {
+    if (variant === 'image' && imageUrl) {
+      content = (
+        <Image
+          source={{ uri: imageUrl }}
+          style={styles.image}
+          resizeMode="cover"
+        />
+      );
+    } else if (variant === 'text' && initials) {
+      content = <Text style={styles.initials}>{initials}</Text>;
+    } else {
+      // PDT-3912 (web b5df56286): the fallback glyph is the SOLID user icon
+      // (User.Regular → User.Solid in web's core Avatar).
+      content = (
+        <AmityIcon name="user-s" size={glyphSize} tokenColor={glyphColor} />
+      );
+    }
+  }
+
+  const frame = <View style={styles.frame}>{content}</View>;
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.frameWrapper}>
+        {onPress ? (
+          <Pressable onPress={onPress} accessibilityRole="button">
+            {frame}
+          </Pressable>
+        ) : (
+          frame
+        )}
+        {indicator ? <View style={styles.indicator}>{indicator}</View> : null}
+      </View>
+      {label ? <Text style={styles.label}>{label}</Text> : null}
+    </View>
+  );
+}

package/src/core/design/atoms/Avatar/index.ts

@@ -0,0 +1,9 @@
+export { Avatar } from './Avatar';
+export type {
+  AvatarProps,
+  AvatarVariant,
+  AvatarShape,
+  AvatarSize,
+  AvatarState,
+  AvatarBorderWidth,
+} from './Avatar';

package/src/core/design/atoms/Avatar/styles.ts

@@ -0,0 +1,109 @@
+import { StyleSheet } from 'react-native';
+import { useToken, type ColorTokenRef } from '../../theme/useToken';
+import { AmityColorToken } from '../../tokens/amity-color-tokens';
+import type { AvatarShape, AvatarSize, AvatarState } from './Avatar';
+
+// Frame box per intrinsic size — SoT geometry.json avatarIcon.avatar.sizes
+// = [16, 24, 28, 32, 40, 56, 64, 120]. Literal width/height so the geometry
+// gate can assert `width` is one of the SoT sizes.
+const FRAME: Record<AvatarSize, { width: number; height: number }> = {
+  16: { width: 16, height: 16 },
+  24: { width: 24, height: 24 },
+  28: { width: 28, height: 28 },
+  32: { width: 32, height: 32 },
+  40: { width: 40, height: 40 },
+  56: { width: 56, height: 56 },
+  64: { width: 64, height: 64 },
+  120: { width: 120, height: 120 },
+};
+
+// Squared corner radius per size bucket (web Avatar.module.css).
+const SQUARED_RADIUS: Record<AvatarSize, number> = {
+  16: 4,
+  24: 4,
+  28: 4,
+  32: 4,
+  40: 8,
+  56: 16,
+  64: 16,
+  120: 24,
+};
+
+// Fallback user-icon glyph size per avatar size (web Avatar.module.css).
+const GLYPH_SIZE: Record<AvatarSize, number> = {
+  16: 12,
+  24: 16,
+  28: 18,
+  32: 20,
+  40: 24,
+  56: 32,
+  64: 32,
+  120: 64,
+};
+
+// Initials font size per avatar size (web Avatar.module.css).
+const INITIALS_SIZE: Record<AvatarSize, number> = {
+  16: 10,
+  24: 10,
+  28: 10,
+  32: 16,
+  40: 16,
+  56: 24,
+  64: 24,
+  120: 48,
+};
+
+export const useStyles = (
+  size: AvatarSize,
+  shape: AvatarShape,
+  state: AvatarState,
+  borderWidth: number
+) => {
+  const token = useToken();
+  const frame = FRAME[size];
+  const borderRadius = shape === 'rounded' ? size / 2 : SQUARED_RADIUS[size];
+  const backgroundColor =
+    state === 'skeleton'
+      ? token(AmityColorToken.SurfaceSkeletonEffectDefault)
+      : token(AmityColorToken.SurfaceAvatarProfileDefault);
+
+  const styles = StyleSheet.create({
+    container: { alignItems: 'center', gap: 4 },
+    frameWrapper: { position: 'relative', alignSelf: 'flex-start' },
+    frame: {
+      width: frame.width,
+      height: frame.height,
+      borderRadius,
+      alignItems: 'center',
+      justifyContent: 'center',
+      overflow: 'hidden',
+      backgroundColor,
+      borderWidth,
+      borderColor: token(AmityColorToken.BorderAvatarProfileDefault),
+    },
+    image: { width: '100%', height: '100%' },
+    initials: {
+      fontSize: INITIALS_SIZE[size],
+      fontWeight: '600',
+      textTransform: 'uppercase',
+      color: token(AmityColorToken.TextAvatarAtomicGeneral),
+    },
+    indicator: {
+      position: 'absolute',
+      right: 0,
+      bottom: 0,
+      borderRadius: 9999,
+      borderWidth: 3,
+      borderColor: token(AmityColorToken.BorderAvatarIndicatorDefault),
+    },
+    label: {
+      fontSize: 13,
+      textAlign: 'center',
+      color: token(AmityColorToken.TextAvatarLabelDefault),
+    },
+  });
+
+  const glyphColor: ColorTokenRef = AmityColorToken.IconAvatarDefault;
+
+  return { styles, glyphSize: GLYPH_SIZE[size], glyphColor };
+};