@amityco/react-native-social-uikit 4.1.1-fdf83f6b.0 → 4.2.0

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

@@ -1,7 +1,7 @@
 import { SVGProps } from 'react';
 
 const icon = (props?: SVGProps<SVGSVGElement>) => {
-  const { width = 24, height = 24, fill = '#292B32' } = props || {};
+  const { width = 24, height = 24, fill = 'currentColor' } = props || {};
 
   return `<svg width="${width}" height="${height}" viewBox="0 0 ${width} ${height}" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M16.0078 15.3789L17.1328 14.2539C17.3086 14.0781 17.625 14.2188 17.625 14.4648V19.5625C17.625 20.5117 16.8516 21.25 15.9375 21.25H3.5625C2.61328 21.25 1.875 20.5117 1.875 19.5625V7.1875C1.875 6.27344 2.61328 5.5 3.5625 5.5H13.1602C13.4062 5.5 13.5469 5.81641 13.3711 5.99219L12.2461 7.11719C12.1758 7.1875 12.1055 7.1875 12.0352 7.1875H3.5625V19.5625H15.9375V15.5898C15.9375 15.5195 15.9375 15.4492 16.0078 15.3789ZM21.4922 8.3125L12.2812 17.5234L9.08203 17.875C8.16797 17.9805 7.39453 17.207 7.5 16.293L7.85156 13.0938L17.0625 3.88281C17.8711 3.07422 19.1719 3.07422 19.9805 3.88281L21.4922 5.39453C22.3008 6.20312 22.3008 7.50391 21.4922 8.3125ZM18.0469 9.36719L16.0078 7.32812L9.46875 13.8672L9.1875 16.1875L11.5078 15.9062L18.0469 9.36719ZM20.2969 6.58984L18.7852 5.07812C18.6445 4.90234 18.3984 4.90234 18.2578 5.07812L17.2031 6.13281L19.2422 8.20703L20.332 7.11719C20.4727 6.94141 20.4727 6.73047 20.2969 6.58984Z" fill="${fill}"/>

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

@@ -1,7 +1,7 @@
 import { SVGProps } from 'react';
 
 const icon = (props?: SVGProps<SVGSVGElement>) => {
-  const { width = 24, height = 24, fill = '#292B32' } = props || {};
+  const { width = 24, height = 24, fill = 'currentColor' } = props || {};
 
   return `<svg
     width="${width}"

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

@@ -60,6 +60,81 @@ 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 verbatim from web UIKit icons/Close, for the carousel composer's
+// per-frame remove button.
+//
+// Not a swap for `closeIcon` above, which eleven other screens render — the
+// difference that matters here is that this one carries its padding INSIDE its
+// own 32-unit viewBox: the cross spans 8.4 to 23.6, so it fills about 47% of
+// the box against `closeIcon`'s near-100%. Rendered at 20 inside a 28dp disc it
+// draws a ~9dp cross with the scrim still visible around it, which is exactly
+// what web looks like. Using `closeIcon` at the same 20 filled the disc edge to
+// edge and left a bare white X floating on the photo.
+export const mediaRemoveIcon = (
+  color: string = '#FFFFFF'
+): string => `<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M18.2031 16.2861L23.2656 21.3486C23.5469 21.6299 23.5469 22.1455 23.2656 22.4268L22.0938 23.5986C21.8125 23.8799 21.2969 23.8799 21.0156 23.5986L16 18.5361L10.9375 23.5986C10.6562 23.8799 10.1406 23.8799 9.85938 23.5986L8.6875 22.4268C8.40625 22.1455 8.40625 21.6299 8.6875 21.3486L13.75 16.2861L8.6875 11.2705C8.40625 10.9893 8.40625 10.4736 8.6875 10.1924L9.85938 9.02051C10.1406 8.73926 10.6562 8.73926 10.9375 9.02051L16 14.083L21.0156 9.02051C21.2969 8.73926 21.8125 8.73926 22.0938 9.02051L23.2656 10.1924C23.5469 10.4736 23.5469 10.9893 23.2656 11.2705L18.2031 16.2861Z" 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/hooks/usePostByIds.ts

@@ -0,0 +1,33 @@
+import { useEffect, useState } from 'react';
+import { PostRepository } from '@amityco/ts-sdk-react-native';
+
+/**
+ * Resolve a list of post ids to their loaded post objects — the same approach
+ * the web UIKit uses (core/hooks/usePostByIds) to load an edited post's child
+ * media. Uses the batch `getPostByIds` API, which is properly awaited, instead
+ * of the racy per-id live-object fetch.
+ */
+export const usePostByIds = (postIds: string[]) => {
+  const [posts, setPosts] = useState<Amity.Post[]>([]);
+  // Depend on a stable string key so a fresh `[]`/array identity each render
+  // doesn't re-trigger the effect (and loop).
+  const key = (postIds ?? []).join(',');
+
+  useEffect(() => {
+    let active = true;
+    async function run() {
+      if (!key) {
+        setPosts((prev) => (prev.length ? [] : prev));
+        return;
+      }
+      const response = await PostRepository.getPostByIds(key.split(','));
+      if (active) setPosts(response.data);
+    }
+    run();
+    return () => {
+      active = false;
+    };
+  }, [key]);
+
+  return posts;
+};

package/src/core/index.tsx

@@ -1,7 +1,6 @@
 export { default as AmityUiKitProvider } from './providers/AmityUIKitProvider';
 
 export { default as AmityUiKitSocial } from './routes/AmityUIKitNavigator';
-export { default as AmityUiKitChat } from './routes/AmityChatEntry';
 
 export { default as AmityPageRenderer } from './routes/AmityPageRenderer';
 

package/src/core/legacy/file.tsx

@@ -1,117 +1,202 @@
 import { FileRepository, ContentFeedType } from '@amityco/ts-sdk-react-native';
 
+import NetInfo from '@react-native-community/netinfo';
 import { Platform } from 'react-native';
 import { appendFileToFormData } from '../utils/fileUpload';
 
+/**
+ * The rejection shape every uploader in this module throws.
+ *
+ * `LoadingImage` / `LoadingVideo` currently ignore the thrown value and show a
+ * generic toast, so the contract is deliberately loose — but keeping one shape
+ * means a caller that *does* want to branch (e.g. the `INVALID_IMAGE`
+ * moderation case) can read `code` instead of sniffing strings.
+ */
+export type UploadError = {
+  message: string;
+  details?: string;
+  code?: string;
+  originalError?: unknown;
+};
+
+/**
+ * Thrown when the SDK resolves without a payload. A 2xx with no `data` is still
+ * a failed upload as far as the caller is concerned — the callers immediately
+ * read `file[0]?.fileId`, so resolving `undefined` would only move the failure
+ * somewhere less diagnosable.
+ */
+const NO_FILE_DATA_ERROR: UploadError = {
+  message: 'Upload failed - no file data returned',
+};
+
+/**
+ * Thrown before an attempt is even made when the device has no connection.
+ *
+ * Rejecting up front is not belt-and-braces — on iOS it is the only thing that
+ * produces a failure at all. Android's networking stack rejects an offline
+ * request almost immediately, so the uploaders' `catch` ran and the frame
+ * showed its error state; NSURLSession instead sits on the request waiting for
+ * connectivity, so the promise never settled, the `catch` never ran, and the
+ * frame stayed on its spinner forever with no way to reach the failed state
+ * The spec asks for an error state per attachment that failed to upload,
+ * whatever the platform.
+ */
+const OFFLINE_ERROR: UploadError = {
+  message: 'Upload failed - no internet connection',
+  code: 'OFFLINE',
+};
+
+/**
+ * Reject immediately when there is no connection, rather than handing the
+ * request to a networking stack that may never answer.
+ *
+ * Only covers being offline as the attempt STARTS. A connection dropped
+ * mid-upload still leaves iOS waiting, because nothing here can abort a
+ * request already inside the SDK — the composer's reconnect retry is what
+ * eventually recovers that case.
+ */
+async function assertOnline(): Promise<void> {
+  const state = await NetInfo.fetch();
+  if (!state.isConnected) throw OFFLINE_ERROR;
+}
+
+/**
+ * Normalise whatever the SDK / networking layer threw into an `UploadError`.
+ *
+ * A dropped connection surfaces here as a plain `Error` ("Network request
+ * failed") carrying no Amity error code — which is exactly the reported repro:
+ * the user toggles the network off mid-upload and the request rejects.
+ */
+function toUploadError(error: any): UploadError {
+  return {
+    message: 'Upload failed',
+    details:
+      error?.message || "We couldn't complete your upload. Please try again.",
+    originalError: error,
+  };
+}
+
+/**
+ * Every uploader below is a plain `async` function with try/catch,
+ * NOT `new Promise(async (resolve, reject) => …)`.
+ *
+ * The old wrapper was actively harmful, not merely redundant. An `async`
+ * executor returns a promise that `new Promise` neither awaits nor observes, so
+ * anything the executor threw — and a mid-upload network drop makes
+ * `FileRepository.upload*` throw — settled only that orphaned promise. The
+ * outer promise stayed **pending forever**: `LoadingVideo.uploadFileToAmity`
+ * sat awaiting it, its `catch` never ran, `handleLoadEnd()` was never called,
+ * `loading` stayed `true`, and the frame kept spinning even after the
+ * connection came back, so the tappable retry overlay was unreachable.
+ *
+ * Throwing from an `async` function has no such hole: a `throw` anywhere in the
+ * body — including from code the function `await`ed — settles the promise it
+ * returned. `uploadImageFile` already had the try/catch, which is
+ * why the image path showed a failed state while the video path hung.
+ */
 export async function uploadFile(
   filePath: string,
   perCentCallback?: (percent: number) => void
 ): Promise<Amity.File<any>[]> {
-  return await new Promise(async (resolve, reject) => {
-    const formData = new FormData();
-    const parts = filePath.split('/');
-    const fileName = parts[parts.length - 1];
-    const fileType = Platform.OS === 'ios' ? 'image/jpeg' : 'image/jpg';
+  const formData = new FormData();
+  const parts = filePath.split('/');
+  const fileName = parts[parts.length - 1];
+  const fileType = Platform.OS === 'ios' ? 'image/jpeg' : 'image/jpg';
 
-    await appendFileToFormData(formData, 'files', filePath, fileName, fileType);
+  let file: Amity.File<any>[] | undefined;
 
-    const { data: file } = await FileRepository.uploadFile(
-      formData,
-      (percent) => {
-        perCentCallback && perCentCallback(percent);
-      }
-    );
-    if (file) {
-      resolve(file);
-    } else {
-      reject('Upload error');
-    }
-  });
+  await assertOnline();
+
+  try {
+    appendFileToFormData(formData, 'files', filePath, fileName, fileType);
+
+    ({ data: file } = await FileRepository.uploadFile(formData, (percent) => {
+      perCentCallback && perCentCallback(percent);
+    }));
+  } catch (error: any) {
+    throw toUploadError(error);
+  }
+
+  // Deliberately outside the try: an empty payload is not an exception to
+  // re-wrap, and throwing it in here would round-trip it through
+  // `toUploadError` and lose the specific message.
+  if (!file) throw NO_FILE_DATA_ERROR;
+
+  return file;
 }
+
 export async function uploadImageFile(
   filePath: string,
   perCentCallback?: (percent: number) => void
 ): Promise<Amity.File<'image'>[]> {
-  return await new Promise(async (resolve, reject) => {
-    try {
-      const formData = new FormData();
-      const parts = filePath.split('/');
-      const fileName = parts[parts.length - 1];
-      const fileType = Platform.OS === 'ios' ? 'image/jpeg' : 'image/jpg';
-
-      await appendFileToFormData(
-        formData,
-        'files',
-        filePath,
-        fileName,
-        fileType
-      );
-
-      const { data: file } = await FileRepository.uploadImage(
-        formData,
-        (percent) => {
-          perCentCallback && perCentCallback(percent);
-        }
-      );
-
-      if (file) {
-        resolve(file);
-      } else {
-        reject({ message: 'Upload failed - no file data returned' });
-      }
-    } catch (error: any) {
-      if (
-        error?.message?.includes('INVALID_IMAGE') ||
-        error?.message?.includes('Inappropriate')
-      ) {
-        reject({
-          message: 'Inappropriate image',
-          details: 'Please choose a different image to upload.',
-          code: 'INVALID_IMAGE',
-        });
-      } else {
-        reject({
-          message: 'Upload failed',
-          details:
-            error?.message ||
-            "We couldn't complete your upload. Please try again.",
-          originalError: error,
-        });
-      }
+  const formData = new FormData();
+  const parts = filePath.split('/');
+  const fileName = parts[parts.length - 1];
+  const fileType = Platform.OS === 'ios' ? 'image/jpeg' : 'image/jpg';
+
+  let file: Amity.File<'image'>[] | undefined;
+
+  await assertOnline();
+
+  try {
+    appendFileToFormData(formData, 'files', filePath, fileName, fileType);
+
+    ({ data: file } = await FileRepository.uploadImage(formData, (percent) => {
+      perCentCallback && perCentCallback(percent);
+    }));
+  } catch (error: any) {
+    // Moderation rejects the image server-side; that is spelled out here
+    // rather than folded into the generic "please try again" copy.
+    if (
+      error?.message?.includes('INVALID_IMAGE') ||
+      error?.message?.includes('Inappropriate')
+    ) {
+      throw {
+        message: 'Inappropriate image',
+        details: 'Please choose a different image to upload.',
+        code: 'INVALID_IMAGE',
+      } as UploadError;
     }
-  });
+
+    throw toUploadError(error);
+  }
+
+  if (!file) throw NO_FILE_DATA_ERROR;
+
+  return file;
 }
+
 export async function uploadVideoFile(
   filePath: string,
   perCentCallback?: (percent: number) => void
 ): Promise<Amity.File<any>[]> {
-  return await new Promise(async (resolve, reject) => {
-    const formData = new FormData();
-    const parts = filePath.split('/');
-    const fileName = parts[parts.length - 1];
+  const formData = new FormData();
+  const parts = filePath.split('/');
+  const fileName = parts[parts.length - 1];
 
-    await appendFileToFormData(
-      formData,
-      'files',
-      filePath,
-      fileName,
-      'video/mp4'
-    );
+  let file: Amity.File<any>[] | undefined;
+
+  await assertOnline();
+
+  try {
+    appendFileToFormData(formData, 'files', filePath, fileName, 'video/mp4');
 
-    const { data: file } = await FileRepository.uploadVideo(
+    ({ data: file } = await FileRepository.uploadVideo(
       formData,
       ContentFeedType.POST,
       (percent) => {
         perCentCallback && perCentCallback(percent);
       }
-    );
-    if (file) {
-      resolve(file);
-    } else {
-      reject('Upload error');
-    }
-  });
+    ));
+  } catch (error: any) {
+    throw toUploadError(error);
+  }
+
+  if (!file) throw NO_FILE_DATA_ERROR;
+
+  return file;
 }
+
 export async function deleteAmityFile(
   fileId: string
 ): Promise<{ success: boolean }> {

package/src/core/providers/AmityUIKitProvider.tsx

@@ -17,10 +17,7 @@ import BottomSheetComponent from '../../social/components/BottomSheetComponent/B
 import Toast from '../../social/components/Toast';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { SafeAreaProvider } from 'react-native-safe-area-context';
-import { GestureHandlerRootView } from 'react-native-gesture-handler';
 import { ErrorBoundary } from '../components/ErrorBoundary';
-import { AmityThemeProvider } from '../design/theme';
-import { LocaleProvider } from '../localization';
 
 export type CusTomTheme = typeof DefaultTheme;
 export interface IAmityUIkitProvider {
@@ -179,43 +176,35 @@ export default function AmityUiKitProvider({
 
   return (
     <ErrorBoundary>
-      <GestureHandlerRootView style={{ flex: 1 }}>
-        <SafeAreaProvider>
-          <QueryClientProvider client={queryClient}>
-            <Provider store={store} context={AmityUIKitReduxContext}>
-              <AuthContextProvider
-                userId={userId}
-                displayName={displayName || undefined}
-                apiKey={apiKey}
-                apiRegion={apiRegion}
-                apiEndpoint={apiEndpoint}
-                authToken={authToken}
-                fcmToken={fcmToken}
-              >
-                <AdEngineProvider>
-                  <ConfigProvider configs={configData}>
-                    <BehaviourProvider behaviour={behaviour}>
-                      <ExploreProvider>
-                        <PaperProvider theme={globalTheme}>
-                          <AmityThemeProvider
-                            mode={isDarkTheme ? 'dark' : 'light'}
-                          >
-                            <LocaleProvider>
-                              {children}
-                              <BottomSheetComponent />
-                              <Toast />
-                            </LocaleProvider>
-                          </AmityThemeProvider>
-                        </PaperProvider>
-                      </ExploreProvider>
-                    </BehaviourProvider>
-                  </ConfigProvider>
-                </AdEngineProvider>
-              </AuthContextProvider>
-            </Provider>
-          </QueryClientProvider>
-        </SafeAreaProvider>
-      </GestureHandlerRootView>
+      <SafeAreaProvider>
+        <QueryClientProvider client={queryClient}>
+          <Provider store={store} context={AmityUIKitReduxContext}>
+            <AuthContextProvider
+              userId={userId}
+              displayName={displayName || undefined}
+              apiKey={apiKey}
+              apiRegion={apiRegion}
+              apiEndpoint={apiEndpoint}
+              authToken={authToken}
+              fcmToken={fcmToken}
+            >
+              <AdEngineProvider>
+                <ConfigProvider configs={configData}>
+                  <BehaviourProvider behaviour={behaviour}>
+                    <ExploreProvider>
+                      <PaperProvider theme={globalTheme}>
+                        {children}
+                        <BottomSheetComponent />
+                        <Toast />
+                      </PaperProvider>
+                    </ExploreProvider>
+                  </BehaviourProvider>
+                </ConfigProvider>
+              </AdEngineProvider>
+            </AuthContextProvider>
+          </Provider>
+        </QueryClientProvider>
+      </SafeAreaProvider>
     </ErrorBoundary>
   );
 }

package/src/core/routes/AmityUIKitNavigator.tsx

@@ -7,22 +7,6 @@ import { navigationRef, onNavigationReady } from './navigation';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
 import type { RootStackParamList } from './RouteParamList';
 import useAuth from '../hooks/useAuth';
-import AmityChatHomePage from '../../chat/pages/AmityChatHomePage';
-import AmityChatPage from '../../chat/pages/AmityChatPage';
-import AmityChannelCreateConversationPage from '../../chat/pages/AmityChannelCreateConversationPage';
-import AmityGroupChatPage from '../../chat/pages/AmityGroupChatPage';
-import AmitySelectGroupMemberPage from '../../chat/pages/AmitySelectGroupMemberPage';
-import AmityCreateGroupChatPage from '../../chat/pages/AmityCreateGroupChatPage';
-import AmityAddGroupMemberPage from '../../chat/pages/AmityAddGroupMemberPage';
-import AmityGroupMemberListPage from '../../chat/pages/AmityGroupMemberListPage';
-import AmityBannedGroupMemberListPage from '../../chat/pages/AmityBannedGroupMemberListPage';
-import AmityGroupSettingPage from '../../chat/pages/AmityGroupSettingPage';
-import AmityEditGroupProfilePage from '../../chat/pages/AmityEditGroupProfilePage';
-import AmityEditGroupMemberPermissionsPage from '../../chat/pages/AmityEditGroupMemberPermissionsPage';
-import AmitySearchChannelPage from '../../chat/pages/AmitySearchChannelPage';
-import AmityArchivedChatPage from '../../chat/pages/AmityArchivedChatPage';
-import AmityGroupNotificationPreferencePage from '../../chat/pages/AmityGroupNotificationPreferencePage';
-import AmityEditGroupNotificationPage from '../../chat/pages/AmityEditGroupNotificationPage';
 import AmitySocialHomePage from '../../social/screens/SocialHomePage';
 import PostDetail from '../../social/screens/PostDetail';
 import CreatePost from '../../social/screens/CreatePost';
@@ -77,12 +61,7 @@ const Stack = createNativeStackNavigator<
   'AmitySocialUIKit'
 >();
 
-export default function AmitySocialUIKitV4Navigator({
-  initialRouteName = 'AmitySocialHomePage',
-}: {
-  /** Entry screen. Defaults to Social; AmityUiKitChat passes 'AmityChatHomePage'. */
-  initialRouteName?: keyof RootStackParamList;
-} = {}) {
+export default function AmitySocialUIKitV4Navigator() {
   const theme = useTheme<MyMD3Theme>();
   const { isGlobalBan, isVisitorUsageLimitReached } = useAuth();
   const { AmityGlobalBehaviour } = useBehaviour();
@@ -115,7 +94,6 @@ export default function AmitySocialUIKitV4Navigator({
       <NavigationContainer ref={navigationRef} onReady={onNavigationReady}>
         <Stack.Navigator
           id="AmitySocialUIKit"
-          initialRouteName={initialRouteName}
           screenOptions={{
             headerShown: false,
             headerShadowVisible: false,
@@ -130,69 +108,6 @@ export default function AmitySocialUIKitV4Navigator({
             },
           }}
         >
-          {/* --- Chat (PDT-3713) --- */}
-          <Stack.Screen
-            name="AmityChatHomePage"
-            component={AmityChatHomePage}
-          />
-          <Stack.Screen name="AmityChatPage" component={AmityChatPage} />
-          <Stack.Screen
-            name="AmityChannelCreateConversationPage"
-            component={AmityChannelCreateConversationPage}
-          />
-          <Stack.Screen
-            name="AmityGroupChatPage"
-            component={AmityGroupChatPage}
-          />
-          <Stack.Screen
-            name="AmitySelectGroupMemberPage"
-            component={AmitySelectGroupMemberPage}
-          />
-          <Stack.Screen
-            name="AmityCreateGroupChatPage"
-            component={AmityCreateGroupChatPage}
-          />
-          <Stack.Screen
-            name="AmityAddGroupMemberPage"
-            component={AmityAddGroupMemberPage}
-          />
-          <Stack.Screen
-            name="AmityGroupMemberListPage"
-            component={AmityGroupMemberListPage}
-          />
-          <Stack.Screen
-            name="AmityBannedGroupMemberListPage"
-            component={AmityBannedGroupMemberListPage}
-          />
-          <Stack.Screen
-            name="AmityGroupSettingPage"
-            component={AmityGroupSettingPage}
-          />
-          <Stack.Screen
-            name="AmityEditGroupProfilePage"
-            component={AmityEditGroupProfilePage}
-          />
-          <Stack.Screen
-            name="AmityEditGroupMemberPermissionsPage"
-            component={AmityEditGroupMemberPermissionsPage}
-          />
-          {/* --- Chat: M4 (search / archive / group notifications) --- */}
-          <Stack.Screen
-            name="AmitySearchChannelPage"
-            component={AmitySearchChannelPage}
-          />
-          <Stack.Screen
-            name="AmityArchivedChatPage"
-            component={AmityArchivedChatPage}
-          />
-          <Stack.Screen
-            name="AmityGroupNotificationPreferencePage"
-            component={AmityGroupNotificationPreferencePage}
-          />
-          <Stack.Screen
-            name="AmityEditGroupNotificationPage"
-            component={AmityEditGroupNotificationPage}
-          />
           {/* --- Social Home --- */}
           <Stack.Screen
             name="AmitySocialHomePage"