@amityco/react-native-social-uikit 4.3.1-53502fc9.0 → 4.3.1

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

@@ -1,14 +1,18 @@
 // AmityCreateGroupChatPage — name/avatar/privacy for a new group (step 2 of create).
 import { SafeAreaView } from 'react-native-safe-area-context';
-import { useRoute, type RouteProp } from '@react-navigation/native';
 
 import { ChatKeyboardAvoidingView } from '../../elements/ChatKeyboardAvoidingView';
 import type { RootStackParamList } from '../../../core/routes/RouteParamList';
+import { usePageParams } from '../../hooks/usePageParams';
 import { CreateGroupChat } from '../../features/group/create';
 
-export default function AmityCreateGroupChatPage() {
-  const { params } =
-    useRoute<RouteProp<RootStackParamList, 'AmityCreateGroupChatPage'>>();
+export type AmityCreateGroupChatPageProps =
+  RootStackParamList['AmityCreateGroupChatPage'];
+
+export default function AmityCreateGroupChatPage(
+  props: Partial<AmityCreateGroupChatPageProps>
+) {
+  const params = usePageParams<'AmityCreateGroupChatPage'>(props);
 
   return (
     <SafeAreaView edges={['top', 'left', 'right']} style={{ flex: 1 }}>
@@ -18,3 +22,5 @@ export default function AmityCreateGroupChatPage() {
     </SafeAreaView>
   );
 }
+
+AmityCreateGroupChatPage.displayName = 'AmityCreateGroupChatPage';

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

@@ -1,16 +1,18 @@
 // AmityEditGroupMemberPermissionsPage — who can send messages (everyone / moderators).
 import { SafeAreaView } from 'react-native-safe-area-context';
-import { useRoute, type RouteProp } from '@react-navigation/native';
 
 import { ChatKeyboardAvoidingView } from '../../elements/ChatKeyboardAvoidingView';
 import type { RootStackParamList } from '../../../core/routes/RouteParamList';
+import { usePageParams } from '../../hooks/usePageParams';
 import { EditGroupMemberPermissions } from '../../features/group/edit-permission';
 
-export default function AmityEditGroupMemberPermissionsPage() {
-  const { params } =
-    useRoute<
-      RouteProp<RootStackParamList, 'AmityEditGroupMemberPermissionsPage'>
-    >();
+export type AmityEditGroupMemberPermissionsPageProps =
+  RootStackParamList['AmityEditGroupMemberPermissionsPage'];
+
+export default function AmityEditGroupMemberPermissionsPage(
+  props: Partial<AmityEditGroupMemberPermissionsPageProps>
+) {
+  const params = usePageParams<'AmityEditGroupMemberPermissionsPage'>(props);
 
   return (
     <SafeAreaView edges={['top', 'left', 'right']} style={{ flex: 1 }}>
@@ -20,3 +22,6 @@ export default function AmityEditGroupMemberPermissionsPage() {
     </SafeAreaView>
   );
 }
+
+AmityEditGroupMemberPermissionsPage.displayName =
+  'AmityEditGroupMemberPermissionsPage';

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

@@ -1,23 +1,20 @@
 // AmityEditGroupNotificationPage — the notification-mode radio screen
 // (default / silent / subscribe). Ported from AmityUiKitWeb
 // v4/chat/pages/EditGroupNotificationPage.
-//
-// RN adaptation: the route is not yet registered in RouteParamList (the
-// orchestrator wires it), so the channelId param is typed locally to keep this
-// file compiling independently.
 import { SafeAreaView } from 'react-native-safe-area-context';
-import { useRoute, type RouteProp } from '@react-navigation/native';
 
+import type { RootStackParamList } from '../../../core/routes/RouteParamList';
+import { usePageParams } from '../../hooks/usePageParams';
 import { ChatKeyboardAvoidingView } from '../../elements/ChatKeyboardAvoidingView';
 import { EditGroupNotification } from '../../features/group/edit-notification';
 
-type ParamList = {
-  AmityEditGroupNotificationPage: { channelId: string };
-};
+export type AmityEditGroupNotificationPageProps =
+  RootStackParamList['AmityEditGroupNotificationPage'];
 
-export default function AmityEditGroupNotificationPage() {
-  const { params } =
-    useRoute<RouteProp<ParamList, 'AmityEditGroupNotificationPage'>>();
+export default function AmityEditGroupNotificationPage(
+  props: Partial<AmityEditGroupNotificationPageProps>
+) {
+  const params = usePageParams<'AmityEditGroupNotificationPage'>(props);
 
   return (
     <SafeAreaView edges={['top', 'left', 'right']} style={{ flex: 1 }}>
@@ -27,3 +24,5 @@ export default function AmityEditGroupNotificationPage() {
     </SafeAreaView>
   );
 }
+
+AmityEditGroupNotificationPage.displayName = 'AmityEditGroupNotificationPage';

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

@@ -1,14 +1,18 @@
 // AmityEditGroupProfilePage — edit group name + avatar.
 import { SafeAreaView } from 'react-native-safe-area-context';
-import { useRoute, type RouteProp } from '@react-navigation/native';
 
 import { ChatKeyboardAvoidingView } from '../../elements/ChatKeyboardAvoidingView';
 import type { RootStackParamList } from '../../../core/routes/RouteParamList';
+import { usePageParams } from '../../hooks/usePageParams';
 import { EditGroupProfile } from '../../features/group/edit-profile';
 
-export default function AmityEditGroupProfilePage() {
-  const { params } =
-    useRoute<RouteProp<RootStackParamList, 'AmityEditGroupProfilePage'>>();
+export type AmityEditGroupProfilePageProps =
+  RootStackParamList['AmityEditGroupProfilePage'];
+
+export default function AmityEditGroupProfilePage(
+  props: Partial<AmityEditGroupProfilePageProps>
+) {
+  const params = usePageParams<'AmityEditGroupProfilePage'>(props);
 
   return (
     <SafeAreaView edges={['top', 'left', 'right']} style={{ flex: 1 }}>
@@ -18,3 +22,5 @@ export default function AmityEditGroupProfilePage() {
     </SafeAreaView>
   );
 }
+
+AmityEditGroupProfilePage.displayName = 'AmityEditGroupProfilePage';

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

@@ -1,22 +1,22 @@
 // AmityGroupChatPage — navigation destination for a group (community) conversation.
 import { SafeAreaView } from 'react-native-safe-area-context';
-import {
-  useNavigation,
-  useRoute,
-  type RouteProp,
-} from '@react-navigation/native';
+import { useNavigation } from '@react-navigation/native';
 import type { NativeStackNavigationProp } from '@react-navigation/native-stack';
 
 import { ChatKeyboardAvoidingView } from '../../elements/ChatKeyboardAvoidingView';
 import type { RootStackParamList } from '../../../core/routes/RouteParamList';
+import { usePageParams } from '../../hooks/usePageParams';
 import { GroupChat } from '../../features/group/chat';
 import { ChatSurface } from '../../hooks/useChatSurfaceHeight';
 
-export default function AmityGroupChatPage() {
+export type AmityGroupChatPageProps = RootStackParamList['AmityGroupChatPage'];
+
+export default function AmityGroupChatPage(
+  props: Partial<AmityGroupChatPageProps>
+) {
   const navigation =
     useNavigation<NativeStackNavigationProp<RootStackParamList>>();
-  const { params } =
-    useRoute<RouteProp<RootStackParamList, 'AmityGroupChatPage'>>();
+  const params = usePageParams<'AmityGroupChatPage'>(props);
 
   return (
     <SafeAreaView edges={['top', 'left', 'right']} style={{ flex: 1 }}>
@@ -36,3 +36,5 @@ export default function AmityGroupChatPage() {
     </SafeAreaView>
   );
 }
+
+AmityGroupChatPage.displayName = 'AmityGroupChatPage';

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

@@ -1,21 +1,22 @@
 // AmityGroupMemberListPage — group members list (member/moderator tabs).
 import { SafeAreaView } from 'react-native-safe-area-context';
-import {
-  useNavigation,
-  useRoute,
-  type RouteProp,
-} from '@react-navigation/native';
+import { useNavigation } from '@react-navigation/native';
 import type { NativeStackNavigationProp } from '@react-navigation/native-stack';
 
 import { ChatKeyboardAvoidingView } from '../../elements/ChatKeyboardAvoidingView';
 import type { RootStackParamList } from '../../../core/routes/RouteParamList';
+import { usePageParams } from '../../hooks/usePageParams';
 import { GroupMembers } from '../../features/group/members';
 
-export default function AmityGroupMemberListPage() {
+export type AmityGroupMemberListPageProps =
+  RootStackParamList['AmityGroupMemberListPage'];
+
+export default function AmityGroupMemberListPage(
+  props: Partial<AmityGroupMemberListPageProps>
+) {
   const navigation =
     useNavigation<NativeStackNavigationProp<RootStackParamList>>();
-  const { params } =
-    useRoute<RouteProp<RootStackParamList, 'AmityGroupMemberListPage'>>();
+  const params = usePageParams<'AmityGroupMemberListPage'>(props);
 
   return (
     <SafeAreaView edges={['top', 'left', 'right']} style={{ flex: 1 }}>
@@ -33,3 +34,5 @@ export default function AmityGroupMemberListPage() {
     </SafeAreaView>
   );
 }
+
+AmityGroupMemberListPage.displayName = 'AmityGroupMemberListPage';

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

@@ -1,22 +1,19 @@
 // AmityGroupNotificationPreferencePage — the "allow notifications" toggle screen.
 // Ported from AmityUiKitWeb v4/chat/pages/GroupNotificationPreferencePage.
-//
-// RN adaptation: the route is not yet registered in RouteParamList (the
-// orchestrator wires it), so the channelId param is typed locally to keep this
-// file compiling independently.
 import { SafeAreaView } from 'react-native-safe-area-context';
-import { useRoute, type RouteProp } from '@react-navigation/native';
 
+import type { RootStackParamList } from '../../../core/routes/RouteParamList';
+import { usePageParams } from '../../hooks/usePageParams';
 import { ChatKeyboardAvoidingView } from '../../elements/ChatKeyboardAvoidingView';
 import { NotificationPreference } from '../../features/group/notification-preference';
 
-type ParamList = {
-  AmityGroupNotificationPreferencePage: { channelId: string };
-};
+export type AmityGroupNotificationPreferencePageProps =
+  RootStackParamList['AmityGroupNotificationPreferencePage'];
 
-export default function AmityGroupNotificationPreferencePage() {
-  const { params } =
-    useRoute<RouteProp<ParamList, 'AmityGroupNotificationPreferencePage'>>();
+export default function AmityGroupNotificationPreferencePage(
+  props: Partial<AmityGroupNotificationPreferencePageProps>
+) {
+  const params = usePageParams<'AmityGroupNotificationPreferencePage'>(props);
 
   return (
     <SafeAreaView edges={['top', 'left', 'right']} style={{ flex: 1 }}>
@@ -26,3 +23,6 @@ export default function AmityGroupNotificationPreferencePage() {
     </SafeAreaView>
   );
 }
+
+AmityGroupNotificationPreferencePage.displayName =
+  'AmityGroupNotificationPreferencePage';

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

@@ -1,14 +1,18 @@
 // AmityGroupSettingPage — group settings (members, edit profile, permissions, leave).
 import { SafeAreaView } from 'react-native-safe-area-context';
-import { useRoute, type RouteProp } from '@react-navigation/native';
 
 import { ChatKeyboardAvoidingView } from '../../elements/ChatKeyboardAvoidingView';
 import type { RootStackParamList } from '../../../core/routes/RouteParamList';
+import { usePageParams } from '../../hooks/usePageParams';
 import { GroupSetting } from '../../features/group/setting';
 
-export default function AmityGroupSettingPage() {
-  const { params } =
-    useRoute<RouteProp<RootStackParamList, 'AmityGroupSettingPage'>>();
+export type AmityGroupSettingPageProps =
+  RootStackParamList['AmityGroupSettingPage'];
+
+export default function AmityGroupSettingPage(
+  props: Partial<AmityGroupSettingPageProps>
+) {
+  const params = usePageParams<'AmityGroupSettingPage'>(props);
 
   return (
     <SafeAreaView edges={['top', 'left', 'right']} style={{ flex: 1 }}>
@@ -18,3 +22,5 @@ export default function AmityGroupSettingPage() {
     </SafeAreaView>
   );
 }
+
+AmityGroupSettingPage.displayName = 'AmityGroupSettingPage';

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

@@ -20,3 +20,5 @@ export default function AmitySearchChannelPage() {
     </SafeAreaView>
   );
 }
+
+AmitySearchChannelPage.displayName = 'AmitySearchChannelPage';

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

@@ -1,20 +1,25 @@
 // AmitySelectGroupMemberPage — pick members for a new group (step 1 of create).
 import { SafeAreaView } from 'react-native-safe-area-context';
-import { useRoute, type RouteProp } from '@react-navigation/native';
 
 import { ChatKeyboardAvoidingView } from '../../elements/ChatKeyboardAvoidingView';
 import type { RootStackParamList } from '../../../core/routes/RouteParamList';
+import { usePageParams } from '../../hooks/usePageParams';
 import { SelectGroupMember } from '../../features/group/select-member';
 
-export default function AmitySelectGroupMemberPage() {
+export type AmitySelectGroupMemberPageProps = NonNullable<
+  RootStackParamList['AmitySelectGroupMemberPage']
+>;
+
+export default function AmitySelectGroupMemberPage(
+  props: Partial<AmitySelectGroupMemberPageProps>
+) {
   // Web reads the same value off `currentPage.context?.selectedGroupMember` in
   // Application.tsx and hands it to SelectGroupMember. RN's route params are the
   // equivalent carrier: `useCreateGroupChat.handleAddMember` already navigates
   // here with the members chosen so far, and dropping them meant the picker
   // reopened empty and its submit then REPLACED the create screen's list with
   // only the newly ticked users.
-  const { params } =
-    useRoute<RouteProp<RootStackParamList, 'AmitySelectGroupMemberPage'>>();
+  const params = usePageParams<'AmitySelectGroupMemberPage'>(props);
 
   return (
     <SafeAreaView edges={['top', 'left', 'right']} style={{ flex: 1 }}>
@@ -24,3 +29,5 @@ export default function AmitySelectGroupMemberPage() {
     </SafeAreaView>
   );
 }
+
+AmitySelectGroupMemberPage.displayName = 'AmitySelectGroupMemberPage';

package/src/chat/pages/index.ts

@@ -0,0 +1,28 @@
+export { default as AmityChatHomePage } from './AmityChatHomePage';
+export { default as AmityChannelCreateConversationPage } from './AmityChannelCreateConversationPage';
+export { default as AmitySelectGroupMemberPage } from './AmitySelectGroupMemberPage';
+export type { AmitySelectGroupMemberPageProps } from './AmitySelectGroupMemberPage';
+export { default as AmityCreateGroupChatPage } from './AmityCreateGroupChatPage';
+export type { AmityCreateGroupChatPageProps } from './AmityCreateGroupChatPage';
+export { default as AmityChatPage } from './AmityChatPage';
+export type { AmityChatPageProps } from './AmityChatPage';
+export { default as AmityGroupChatPage } from './AmityGroupChatPage';
+export type { AmityGroupChatPageProps } from './AmityGroupChatPage';
+export { default as AmityGroupSettingPage } from './AmityGroupSettingPage';
+export type { AmityGroupSettingPageProps } from './AmityGroupSettingPage';
+export { default as AmityEditGroupProfilePage } from './AmityEditGroupProfilePage';
+export type { AmityEditGroupProfilePageProps } from './AmityEditGroupProfilePage';
+export { default as AmityEditGroupNotificationPage } from './AmityEditGroupNotificationPage';
+export type { AmityEditGroupNotificationPageProps } from './AmityEditGroupNotificationPage';
+export { default as AmityEditGroupMemberPermissionsPage } from './AmityEditGroupMemberPermissionsPage';
+export type { AmityEditGroupMemberPermissionsPageProps } from './AmityEditGroupMemberPermissionsPage';
+export { default as AmityGroupNotificationPreferencePage } from './AmityGroupNotificationPreferencePage';
+export type { AmityGroupNotificationPreferencePageProps } from './AmityGroupNotificationPreferencePage';
+export { default as AmityGroupMemberListPage } from './AmityGroupMemberListPage';
+export type { AmityGroupMemberListPageProps } from './AmityGroupMemberListPage';
+export { default as AmityAddGroupMemberPage } from './AmityAddGroupMemberPage';
+export type { AmityAddGroupMemberPageProps } from './AmityAddGroupMemberPage';
+export { default as AmityBannedGroupMemberListPage } from './AmityBannedGroupMemberListPage';
+export type { AmityBannedGroupMemberListPageProps } from './AmityBannedGroupMemberListPage';
+export { default as AmityArchivedChatPage } from './AmityArchivedChatPage';
+export { default as AmitySearchChannelPage } from './AmitySearchChannelPage';

package/src/core/hooks/useUpload.ts

@@ -56,10 +56,9 @@ export function useUpload() {
       {
         onError: (error) => {
           // Localized, and worded from the same four keys web resolves in
-          // v4/social/hooks/useImageUpload. These were hardcoded
-          // English, so th.json never applied even though every key was already
-          // translated — and the generic body read "Please try again." where web
-          // says "Upload Not Complete".
+          // v4/social/hooks/useImageUpload. These were hardcoded English, so a
+          // locale bundle never applied — and the generic body read "Please try
+          // again." where web says "Upload Not Complete".
           if (
             error.message.includes(ERROR_CODE.INVALID_IMAGE) ||
             error.message.includes(ERROR_CODE.VIOLENCE)

package/src/core/localization/LocaleProvider.tsx

@@ -83,7 +83,7 @@ export interface LocaleProviderProps {
    * Falls back to English library defaults when no match is found.
    *
    * @example
-   *   localeMap={{ ja: jaLocale, th: thLocale }}
+   *   localeMap={{ ja: jaLocale, ko: koLocale }}
    */
   localeMap?: Record<string, LocaleBundle>;
 }
@@ -92,6 +92,21 @@ export interface LocaleProviderProps {
 // Device-locale helper
 // ---------------------------------------------------------------------------
 
+/**
+ * The device language as a BCP 47 tag (e.g. "th-TH"). React Native has no
+ * `navigator.language`, so fall back to the Intl locale, which Hermes and JSC
+ * take from the device settings.
+ */
+function getDeviceLanguage(): string | undefined {
+  const nav = (globalThis as { navigator?: { language?: string } }).navigator;
+  if (nav && typeof nav.language === 'string' && nav.language) return nav.language;
+  try {
+    return Intl.DateTimeFormat().resolvedOptions().locale || undefined;
+  } catch {
+    return undefined;
+  }
+}
+
 /**
  * Try to match the browser/device language against a caller-supplied locale map.
  * Returns the matched bundle, or undefined if no match (falls through to EN defaults).
@@ -99,9 +114,8 @@ export interface LocaleProviderProps {
 export function resolveDeviceLocale(
   localeMap: Record<string, LocaleBundle>,
 ): LocaleBundle | undefined {
-  const nav = (globalThis as { navigator?: { language?: string } }).navigator;
-  if (!nav || typeof nav.language !== 'string') return undefined;
-  const lang = nav.language ?? '';
+  const lang = getDeviceLanguage();
+  if (!lang) return undefined;
   // 1. Exact match  (e.g. "ja-JP" → localeMap["ja-JP"])
   if (localeMap[lang]) return localeMap[lang];
   // 2. Language-prefix match  (e.g. "ja-JP" → localeMap["ja"])

package/src/core/localization/defaultLocaleMap.ts

@@ -7,17 +7,9 @@
  *   import { defaultLocaleMap } from '~/v4/core/localization';
  *   <AmityUIKitProvider localization={{ localeMap: defaultLocaleMap }} ... />
  *
- * Resolution order:
- *   1. Exact match: navigator.language === "th" → Thai bundle
- *   2. Prefix match: navigator.language === "th-TH" → Thai bundle
- *   3. No match: falls through to English library defaults
- *
- * Add more bundles here as additional locale files are created.
+ * Add locale bundles here to enable automatic device-language detection.
  */
 
-import thLocaleBundle from './defaults/th';
 import type { LocaleBundle } from './resolveString';
 
-export const defaultLocaleMap: Record<string, LocaleBundle> = {
-  th: thLocaleBundle,
-};
+export const defaultLocaleMap: Record<string, LocaleBundle> = {};

package/src/core/localization/index.ts

@@ -15,7 +15,7 @@
  *   import type { LocaleBundle, FormatArg } from '~/v4/core/localization';
  *
  * Default bundles / locale map (device-language detection):
- *   import { defaultLocaleBundle, thLocaleBundle, defaultLocaleMap } from '~/v4/core/localization';
+ *   import { defaultLocaleBundle, defaultLocaleMap } from '~/v4/core/localization';
  */
 
 export {
@@ -37,7 +37,6 @@ export type { LocaleContextValue, LocaleProviderProps } from './LocaleProvider';
 export { useString } from './useString';
 
 // Default imports, then re-export under the public names — keeps the public API
-// identical while surviving either resolution of './defaults/en' | './defaults/th'.
+// identical while surviving either resolution of './defaults/en'.
 export { default as defaultLocaleBundle } from './defaults/en';
-export { default as thLocaleBundle } from './defaults/th';
 export { defaultLocaleMap } from './defaultLocaleMap';

package/src/core/providers/AmityUIKitProvider.tsx

@@ -20,7 +20,7 @@ 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';
+import { LocaleProvider, type LocaleBundle } from '../localization';
 
 export type CusTomTheme = typeof DefaultTheme;
 export interface IAmityUIkitProvider {
@@ -39,6 +39,26 @@ export interface IAmityUIkitProvider {
   socialCommunityCreationButtonVisible?: boolean;
   /** When true, hides the Explore tab on the Social Home page. Default: false */
   hideExplore?: boolean;
+  /**
+   * Localization configuration for the UIKit (same shape as the web UIKit).
+   * - `localeBundle`: locale bundle to use (key → translated string)
+   * - `overrides`: individual keys that take precedence over the locale bundle
+   * - `localeMap`: map of locale code → bundle for automatic device-language
+   *   detection. When `localeBundle` is not set, the device language is matched
+   *   against this map (exact match, then language prefix). Falls back to
+   *   English when nothing matches. Unset by default, so the UIKit renders in
+   *   English unless the host passes its own bundles.
+   *
+   * @example
+   *   localization={{ localeBundle: jaLocale }}
+   * @example
+   *   localization={{ localeMap: { ja: jaLocale, ko: koLocale } }}
+   */
+  localization?: {
+    localeBundle?: LocaleBundle;
+    overrides?: LocaleBundle;
+    localeMap?: Record<string, LocaleBundle>;
+  };
 }
 
 export interface CustomColors {
@@ -85,6 +105,7 @@ export default function AmityUiKitProvider({
   fcmToken,
   socialCommunityCreationButtonVisible = true,
   hideExplore = false,
+  localization,
 }: IAmityUIkitProvider) {
   const colorScheme = useColorScheme();
   const SHADE_PERCENTAGES = [0.25, 0.4, 0.45, 0.6];
@@ -200,7 +221,11 @@ export default function AmityUiKitProvider({
                           <AmityThemeProvider
                             mode={isDarkTheme ? 'dark' : 'light'}
                           >
-                            <LocaleProvider>
+                            <LocaleProvider
+                              initialLocaleBundle={localization?.localeBundle}
+                              initialOverrides={localization?.overrides}
+                              localeMap={localization?.localeMap}
+                            >
                               {children}
                               <BottomSheetComponent />
                               <Toast />

package/src/core/routes/AmityPageRenderer.tsx

@@ -50,6 +50,45 @@ import LivestreamPostTargetSelection from '../../social/screens/LivestreamPostTa
 import CommunityMembership from '../../social/screens/CommunityMembership';
 import CreateLivestream from '../../social/screens/CreateLivestream';
 import LivestreamPlayer from '../../social/screens/LivestreamPlayer';
+import {
+  AmityChatHomePage,
+  AmityChannelCreateConversationPage,
+  AmitySelectGroupMemberPage,
+  AmityCreateGroupChatPage,
+  AmityChatPage,
+  AmityGroupChatPage,
+  AmityGroupSettingPage,
+  AmityEditGroupProfilePage,
+  AmityEditGroupNotificationPage,
+  AmityEditGroupMemberPermissionsPage,
+  AmityGroupNotificationPreferencePage,
+  AmityGroupMemberListPage,
+  AmityAddGroupMemberPage,
+  AmityBannedGroupMemberListPage,
+  AmityArchivedChatPage,
+  AmitySearchChannelPage,
+} from '../../chat/pages';
+
+// Every chat page, so any of them can be rendered standalone and still reach
+// the others: a chat page navigates to its neighbours by route name.
+const CHAT_PAGES = {
+  AmityChatHomePage,
+  AmityChannelCreateConversationPage,
+  AmitySelectGroupMemberPage,
+  AmityCreateGroupChatPage,
+  AmityChatPage,
+  AmityGroupChatPage,
+  AmityGroupSettingPage,
+  AmityEditGroupProfilePage,
+  AmityEditGroupNotificationPage,
+  AmityEditGroupMemberPermissionsPage,
+  AmityGroupNotificationPreferencePage,
+  AmityGroupMemberListPage,
+  AmityAddGroupMemberPage,
+  AmityBannedGroupMemberListPage,
+  AmityArchivedChatPage,
+  AmitySearchChannelPage,
+} satisfies Partial<Record<keyof RootStackParamList, React.ComponentType<any>>>;
 
 interface PageRendererProps {
   children: React.JSX.Element;
@@ -58,6 +97,8 @@ export default function PageRenderer({ children }: PageRendererProps) {
   const Stack = createNativeStackNavigator<RootStackParamList>();
   const { isConnected } = useAuth();
   const theme = useTheme() as MyMD3Theme;
+  const initialRouteName: keyof RootStackParamList =
+    children.type?.displayName || children.type?.name;
 
   return (
     <NavigationIndependentTree>
@@ -78,10 +119,7 @@ export default function PageRenderer({ children }: PageRendererProps) {
                 color: theme.colors.base,
               },
             }}
-            initialRouteName={
-              children.type?.displayName ||
-              (children.type?.name as keyof RootStackParamList)
-            }
+            initialRouteName={initialRouteName}
           >
             <Stack.Screen
               name="AmityStoryTabComponent"
@@ -92,6 +130,24 @@ export default function PageRenderer({ children }: PageRendererProps) {
               children={() => children}
             />
 
+            {/* --- Chat --- */}
+            {(Object.keys(CHAT_PAGES) as (keyof typeof CHAT_PAGES)[]).map(
+              (name) => {
+                const Page: React.ComponentType<any> = CHAT_PAGES[name];
+                // The page the host rendered takes the host's props. The others
+                // are reached by navigation and read their route params.
+                return name === initialRouteName ? (
+                  <Stack.Screen
+                    key={name}
+                    name={name}
+                    children={() => <Page {...children.props} />}
+                  />
+                ) : (
+                  <Stack.Screen key={name} name={name} component={Page} />
+                );
+              }
+            )}
+
             {/* --- Social Home --- */}
             <Stack.Screen
               name="AmitySocialHomePage"