@amityco/react-native-social-uikit 4.0.0-RC18 → 4.0.0-RC19

package/lib/typescript/src/v4/features/feed/components/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../../src/v4/features/feed/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAC"}

package/lib/typescript/src/v4/features/feed/elements/CommunityCategory/CommunityCategory.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { ComponentID, PageID } from '../../../../enum';
+type CommunityCategoryProps = {
+    categoryName: string;
+    style?: object;
+    maxWidth?: number | string;
+    pageId?: PageID;
+    componentId?: ComponentID;
+};
+export declare function CommunityCategory({ categoryName, style, maxWidth, pageId, componentId, }: CommunityCategoryProps): React.JSX.Element;
+export {};
+//# sourceMappingURL=CommunityCategory.d.ts.map

package/lib/typescript/src/v4/features/feed/elements/CommunityCategory/CommunityCategory.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CommunityCategory.d.ts","sourceRoot":"","sources":["../../../../../../../../src/v4/features/feed/elements/CommunityCategory/CommunityCategory.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAAE,WAAW,EAAa,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAElE,KAAK,sBAAsB,GAAG;IAC5B,YAAY,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC3B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,WAAW,CAAC;CAC3B,CAAC;AAEF,wBAAgB,iBAAiB,CAAC,EAChC,YAAY,EACZ,KAAK,EACL,QAAQ,EACR,MAAM,EACN,WAAW,GACZ,EAAE,sBAAsB,qBAwBxB"}

package/lib/typescript/src/v4/features/feed/elements/CommunityCategory/index.d.ts

@@ -0,0 +1,2 @@
+export { CommunityCategory } from './CommunityCategory';
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/src/v4/features/feed/elements/CommunityCategory/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../../../src/v4/features/feed/elements/CommunityCategory/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC"}

package/lib/typescript/src/v4/features/feed/elements/CommunityCategory/styles.d.ts

@@ -0,0 +1,17 @@
+import { MyMD3Theme } from 'src/providers/amity-ui-kit-provider';
+export declare const useStyles: () => {
+    styles: {
+        chipContainer: {
+            backgroundColor: string;
+            paddingHorizontal: number;
+            borderRadius: number;
+        };
+        chipText: {
+            fontSize: number;
+            lineHeight: number;
+            color: string;
+        };
+    };
+    theme: MyMD3Theme;
+};
+//# sourceMappingURL=styles.d.ts.map

package/lib/typescript/src/v4/features/feed/elements/CommunityCategory/styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../../../../../src/v4/features/feed/elements/CommunityCategory/styles.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,UAAU,EAAE,MAAM,qCAAqC,CAAC;AAEjE,eAAO,MAAM,SAAS;;;;;;;;;;;;;;CAerB,CAAC"}

package/lib/typescript/src/v4/features/feed/elements/index.d.ts

@@ -0,0 +1,2 @@
+export * from './CommunityCategory';
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/src/v4/features/feed/elements/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../../src/v4/features/feed/elements/index.ts"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAC"}

package/lib/typescript/src/v4/hook/useCustomRankingGlobalFeed.d.ts

@@ -1,10 +1,15 @@
 import { IComment } from '../../components/Social/CommentList';
 export declare const isAmityAd: (item: Amity.Post<any> | Amity.Ad | IComment) => item is Amity.Ad;
-export declare const useCustomRankingGlobalFeed: () => {
+type UseCustomRankingGlobalFeed = {
+    enabled?: boolean;
+};
+export declare const useCustomRankingGlobalFeed: ({ enabled, }?: UseCustomRankingGlobalFeed) => {
     loading: boolean;
     refresh: () => void;
     itemWithAds: (Amity.Post<any> | Amity.Ad)[];
     onNextPage: () => void | null;
     error: boolean;
+    globalFeedPosts: any;
 };
+export {};
 //# sourceMappingURL=useCustomRankingGlobalFeed.d.ts.map

package/lib/typescript/src/v4/hook/useCustomRankingGlobalFeed.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useCustomRankingGlobalFeed.d.ts","sourceRoot":"","sources":["../../../../../src/v4/hook/useCustomRankingGlobalFeed.ts"],"names":[],"mappings":"AAUA,OAAO,EAAE,QAAQ,EAAE,MAAM,qCAAqC,CAAC;AAG/D,eAAO,MAAM,SAAS,GACpB,MAAM,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,KAAK,CAAC,EAAE,GAAG,QAAQ,KAC1C,IAAI,IAAI,KAAK,CAAC,EAEhB,CAAC;AAEF,eAAO,MAAM,0BAA0B;;;;sBAIF,IAAI,GAAG,IAAI;;CA6F/C,CAAC"}
+{"version":3,"file":"useCustomRankingGlobalFeed.d.ts","sourceRoot":"","sources":["../../../../../src/v4/hook/useCustomRankingGlobalFeed.ts"],"names":[],"mappings":"AAcA,OAAO,EAAE,QAAQ,EAAE,MAAM,qCAAqC,CAAC;AAG/D,eAAO,MAAM,SAAS,GACpB,MAAM,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,KAAK,CAAC,EAAE,GAAG,QAAQ,KAC1C,IAAI,IAAI,KAAK,CAAC,EAEhB,CAAC;AAEF,KAAK,0BAA0B,GAAG;IAChC,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAEF,eAAO,MAAM,0BAA0B,GAAI,eAExC,0BAA+B;;;;sBAIG,IAAI,GAAG,IAAI;;;CAmF/C,CAAC"}

package/lib/typescript/src/v4/hook/usePaginator.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"usePaginator.d.ts","sourceRoot":"","sources":["../../../../../src/v4/hook/usePaginator.ts"],"names":[],"mappings":"AAUA,eAAO,MAAM,gBAAgB,GAAI,CAAC,EAAE,gFAMjC;IACD,SAAS,EAAE,KAAK,CAAC,WAAW,CAAC;IAC7B,QAAQ,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,MAAM,CAAC;IAC/B,4BAA4B,EAAE,CAAC,OAAO,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC,CAAC;CACnE;oCA2MwC,CAAC,EAAE,KAAG,KAAK,CAAC,CAAC,GAAG,KAAK,CAAC,EAAE,CAAC;;;CAmBjE,CAAC;AAEF,eAAO,MAAM,eAAe,GAAI,CAAC,EAAE,QAAQ;IACzC,KAAK,EAAE,CAAC,EAAE,CAAC;IACX,SAAS,EAAE,KAAK,CAAC,WAAW,CAAC;IAC7B,QAAQ,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,MAAM,CAAC;IAC/B,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;;;CAoCA,CAAC"}
+{"version":3,"file":"usePaginator.d.ts","sourceRoot":"","sources":["../../../../../src/v4/hook/usePaginator.ts"],"names":[],"mappings":"AASA,eAAO,MAAM,gBAAgB,GAAI,CAAC,EAAE,gFAMjC;IACD,SAAS,EAAE,KAAK,CAAC,WAAW,CAAC;IAC7B,QAAQ,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,MAAM,CAAC;IAC/B,4BAA4B,EAAE,CAAC,OAAO,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC,CAAC;CACnE;oCA0MwC,CAAC,EAAE,KAAG,KAAK,CAAC,CAAC,GAAG,KAAK,CAAC,EAAE,CAAC;;;CAmBjE,CAAC;AAEF,eAAO,MAAM,eAAe,GAAI,CAAC,EAAE,QAAQ;IACzC,KAAK,EAAE,CAAC,EAAE,CAAC;IACX,SAAS,EAAE,KAAK,CAAC,WAAW,CAAC;IAC7B,QAAQ,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,MAAM,CAAC;IAC/B,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;;;CAmCA,CAAC"}

package/lib/typescript/src/v4/routes/AmitySocialUIKitV4Navigator.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AmitySocialUIKitV4Navigator.d.ts","sourceRoot":"","sources":["../../../../../src/v4/routes/AmitySocialUIKitV4Navigator.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAgE/B,MAAM,CAAC,OAAO,UAAU,2BAA2B,sBA8SlD"}
+{"version":3,"file":"AmitySocialUIKitV4Navigator.d.ts","sourceRoot":"","sources":["../../../../../src/v4/routes/AmitySocialUIKitV4Navigator.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAgE/B,MAAM,CAAC,OAAO,UAAU,2BAA2B,sBA+SlD"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@amityco/react-native-social-uikit",
-  "version": "4.0.0-RC18",
+  "version": "4.0.0-RC19",
   "description": "Social UIKit",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",
@@ -57,7 +57,7 @@
     "registry": "https://registry.npmjs.org/"
   },
   "devDependencies": {
-    "@amityco/ts-sdk-react-native": "^7.15.0",
+    "@amityco/ts-sdk-react-native": "^7.15.1",
     "@babel/plugin-transform-export-namespace-from": "^7.27.1",
     "@commitlint/config-conventional": "^17.0.2",
     "@evilmartians/lefthook": "^1.2.2",
@@ -116,7 +116,7 @@
     "@types/react": "18.2.37"
   },
   "peerDependencies": {
-    "@amityco/ts-sdk-react-native": "^7.15.0",
+    "@amityco/ts-sdk-react-native": "^7.15.1",
     "@livekit/react-native": "^2.9.6",
     "@livekit/react-native-webrtc": "^137.0.2",
     "@react-native-async-storage/async-storage": "^1.19.3",

package/src/snippet/AmityGlobalFeedComponent.tsx

@@ -25,6 +25,11 @@ import config from '../../uikit.config.json';
     },
   }}
 >
-  <AmityGlobalFeedComponent />
+  <AmityGlobalFeedComponent
+    itemWithAds={[]}
+    refresh={() => Promise.resolve()}
+    loading={false}
+    onNextPage={() => null}
+  />
 </AmityUiKitProvider>;
 /* end_sample_code */

package/src/v4/PublicApi/Components/AmityCommunityHeaderComponent/AmityCommunityHeaderComponent.tsx

@@ -11,7 +11,6 @@ import CommunityCover from '../../../elements/CommunityCover/CommunityCover';
 import CommunityPrivateBadge from '../../../elements/CommunityPrivateBadge/CommunityPrivateBadge';
 import CommunityName from '../../../elements/CommunityName/CommunityName';
 import CommunityVerifyBadge from '../../../elements/CommunityVerifyBadge/CommunityVerifyBadge';
-import CommunityCategory from '../../../elements/CommunityCatetory/CommunityCategory';
 import CommunityDescription from '../../../elements/CommunityDescription/CommunityDescription';
 import CommunityInfo from '../../../elements/CommunityInfo/CommunityInfo';
 import CommunityJoinButtonElement from '../../../elements/CommunityJoinButtonElement/CommunityJoinButtonElement';
@@ -24,6 +23,7 @@ import { useNavigation } from '@react-navigation/native';
 import { NativeStackNavigationProp } from '@react-navigation/native-stack';
 import { RootStackParamList } from '../../../../v4/routes/RouteParamList';
 import { Client } from '@amityco/ts-sdk-react-native';
+import { CommunityCategories } from '../../../../v4/features/feed/components';
 
 export interface AmityCommunityHeaderRef {
   height: number;
@@ -135,10 +135,10 @@ const AmityCommunityHeaderComponent: FC<AmityCommunityHeaderComponentProps> = ({
               <CommunityVerifyBadge pageId={pageId} componentId={componentId} />
             )}
           </View>
-          <CommunityCategory
+          <CommunityCategories
             pageId={pageId}
             componentId={componentId}
-            categoryIds={community.categoryIds}
+            categories={community.categories}
             allVisible={true}
             style={styles.categoryWrap}
           />

package/src/v4/PublicApi/Components/AmityGlobalFeedComponent/AmityGlobalFeedComponent.tsx

@@ -10,10 +10,7 @@ import AmityStoryTabComponent from '../AmityStoryTabComponent/AmityStoryTabCompo
 import { AmityStoryTabComponentEnum } from '../../types';
 import { usePostImpression } from '../../../../v4/hook/usePostImpression';
 import { useStyle } from './styles';
-import {
-  isAmityAd,
-  useCustomRankingGlobalFeed,
-} from '../../../hook/useCustomRankingGlobalFeed';
+import { isAmityAd } from '../../../hook/useCustomRankingGlobalFeed';
 import PostAdComponent from '../../../component/PostAdComponent/PostAdComponent';
 import Divider from '../../../component/Divider';
 
@@ -21,6 +18,10 @@ type AmityGlobalFeedComponentType = {
   pageId?: PageID;
   isShowStoryTab?: boolean;
   GlobalFeedHeaderComponent?: React.ReactElement;
+  itemWithAds: (Amity.Post | Amity.Ad)[] | undefined;
+  refresh: () => void;
+  loading: boolean;
+  onNextPage: (() => void) | null;
 };
 
 export const globalFeedPageLimit = 20;
@@ -29,9 +30,11 @@ const AmityGlobalFeedComponent: FC<AmityGlobalFeedComponentType> = ({
   pageId,
   isShowStoryTab = true,
   GlobalFeedHeaderComponent,
+  itemWithAds,
+  refresh,
+  loading,
+  onNextPage,
 }) => {
-  const { itemWithAds, refresh, loading, onNextPage } =
-    useCustomRankingGlobalFeed();
   const componentId = ComponentID.global_feed_component;
   const { isExcluded, themeStyles, accessibilityId } = useAmityComponent({
     pageId,

package/src/v4/PublicApi/Components/AmityNewsFeedComponent/AmityNewsFeedComponent.tsx

@@ -5,23 +5,42 @@ import AmityGlobalFeedComponent from '../AmityGlobalFeedComponent/AmityGlobalFee
 import { useStyles } from './styles';
 import Divider from '../../../component/Divider';
 import { useAmityComponent } from '../../../hook';
+import { useCustomRankingGlobalFeed } from '../../../hook/useCustomRankingGlobalFeed';
+import NewsFeedLoadingComponent from '../../../component/NewsFeedLoadingComponent/NewsFeedLoadingComponent';
+import AmityEmptyNewsFeedComponent from '../AmityEmptyNewsFeedComponent/AmityEmptyNewsFeedComponent';
 
 type AmityNewsFeedComponentType = {
   pageId?: PageID;
+  onPressExploreCommunity?: () => void;
 };
 
 const AmityNewsFeedComponent: FC<AmityNewsFeedComponentType> = ({
   pageId = PageID.WildCardPage,
+  onPressExploreCommunity,
 }) => {
+  const styles = useStyles();
   const componentId = ComponentID.newsfeed_component;
   const { themeStyles, accessibilityId, isExcluded } = useAmityComponent({
     pageId,
     componentId,
   });
 
-  const styles = useStyles();
+  const { itemWithAds, refresh, globalFeedPosts, loading, onNextPage } =
+    useCustomRankingGlobalFeed();
+
   if (isExcluded) return null;
 
+  if (loading || (globalFeedPosts?.length > 0 && !itemWithAds?.length))
+    return <NewsFeedLoadingComponent />;
+
+  if (!loading && !globalFeedPosts?.length)
+    return (
+      <AmityEmptyNewsFeedComponent
+        pageId={pageId}
+        onPressExploreCommunity={onPressExploreCommunity}
+      />
+    );
+
   return (
     <View
       style={styles.container}
@@ -29,7 +48,13 @@ const AmityNewsFeedComponent: FC<AmityNewsFeedComponentType> = ({
       accessibilityLabel={accessibilityId}
     >
       <Divider themeStyles={themeStyles} />
-      <AmityGlobalFeedComponent pageId={pageId} />
+      <AmityGlobalFeedComponent
+        pageId={pageId}
+        itemWithAds={itemWithAds}
+        refresh={refresh}
+        loading={loading}
+        onNextPage={onNextPage}
+      />
     </View>
   );
 };

package/src/v4/PublicApi/Components/AmityPostCommentComponent/AmityPostCommentComponent.tsx

@@ -8,7 +8,6 @@ import React, {
   useCallback,
 } from 'react';
 import { UserInterface, IMentionPosition } from '../../../../types';
-import { getAmityUser } from '../../../../providers/user-provider';
 import { CommentRepository } from '@amityco/ts-sdk-react-native';
 import CommentListItem from './CommentListItem/CommentListItem';
 import { deleteCommentById } from '../../../../providers/Social/comment-sdk';
@@ -91,9 +90,9 @@ const AmityPostCommentComponent: FC<AmityPostCommentComponentType> = ({
         referenceType: postType,
         limit: commentListLimit,
       },
-      async ({ loading, data, hasNextPage, onNextPage }) => {
+      ({ loading, data, hasNextPage, onNextPage }) => {
         if (!loading) {
-          data && data.length > 0 && (await queryComment(data));
+          queryComment(data);
           onNextPageRef.current = hasNextPage ? onNextPage : null;
           setTimeout(() => {
             setIsLoading(false);
@@ -102,43 +101,37 @@ const AmityPostCommentComponent: FC<AmityPostCommentComponentType> = ({
       }
     );
     return () => {
-      setCommentList([]);
       unsubComment();
     };
   }, [postId, postType]);
 
-  const queryComment = async (comments: Amity.InternalComment[]) => {
-    const formattedCommentList = await Promise.all(
-      comments.map(async (item: Amity.Comment) => {
-        const { userObject } = await getAmityUser(item.userId);
-        let formattedUserObject: UserInterface;
-
-        formattedUserObject = {
-          userId: userObject.data.userId,
-          displayName: userObject.data.displayName,
-          avatarFileId: userObject.data?.avatarFileId,
-          avatarCustomUrl: userObject.data?.avatarCustomUrl,
-        };
-
-        return {
-          targetType: item.targetType,
-          targetId: item.targetId,
-          commentId: item.commentId,
-          data: item.data as Record<string, any>,
-          dataType: item?.dataType || 'text',
-          myReactions: item.myReactions as string[],
-          reactions: item.reactions as Record<string, number>,
-          user: formattedUserObject as UserInterface,
-          updatedAt: item.updatedAt,
-          editedAt: item.editedAt,
-          createdAt: item.createdAt,
-          childrenComment: item.children,
-          childrenNumber: item.childrenNumber,
-          referenceId: item.referenceId,
-          mentionPosition: item?.metadata?.mentioned ?? [],
-        };
-      })
-    );
+  const queryComment = (comments: Amity.InternalComment[]) => {
+    const formattedCommentList = comments.map((item: Amity.Comment) => {
+      const formattedUserObject = {
+        userId: item.creator?.userId,
+        displayName: item.creator?.displayName,
+        avatarFileId: item.creator?.avatarFileId,
+        avatarCustomUrl: item.creator?.avatarCustomUrl,
+      };
+
+      return {
+        targetType: item.targetType,
+        targetId: item.targetId,
+        commentId: item.commentId,
+        data: item.data as Record<string, any>,
+        dataType: item?.dataType || 'text',
+        myReactions: item.myReactions as string[],
+        reactions: item.reactions as Record<string, number>,
+        user: formattedUserObject as UserInterface,
+        updatedAt: item.updatedAt,
+        editedAt: item.editedAt,
+        createdAt: item.createdAt,
+        childrenComment: item.children,
+        childrenNumber: item.childrenNumber,
+        referenceId: item.referenceId,
+        mentionPosition: item?.metadata?.mentioned ?? [],
+      };
+    });
     setCommentList([...formattedCommentList]);
   };
 

package/src/v4/PublicApi/Components/AmityPostEngagementActionsComponent/Components/DetailStyle.tsx

@@ -121,8 +121,8 @@ const DetailStyle: FC<AmityPostEngagementActionsSubComponentType> = ({
           </Text>
         )}
         <Text style={styles.commentCountText}>
-          {formatNumber(postData?.commentsCount)}{' '}
-          {renderCommentText(postData?.commentsCount)}
+          {formatNumber(postData?.localCommentCount)}{' '}
+          {renderCommentText(postData?.localCommentCount)}
         </Text>
       </View>
       <View style={[styles.actionSection, styles.detailActionSection]}>

package/src/v4/PublicApi/Components/AmityPostEngagementActionsComponent/Components/FeedStyle.tsx

@@ -129,7 +129,7 @@ const FeedStyle: FC<AmityPostEngagementActionsSubComponentType> = ({
             height={20}
             resizeMode="contain"
           />
-          <Text style={styles.btnText}>{postData?.commentsCount}</Text>
+          <Text style={styles.btnText}>{postData?.localCommentCount}</Text>
         </TouchableOpacity>
       </View>
       <View style={styles.commentBtn} />

package/src/v4/PublicApi/Components/AmityRecommenedCommunityComponent/RecommenedCommunityItems/RecommenedCommunityItems.tsx

@@ -1,7 +1,6 @@
-import React, { useEffect } from 'react';
+import React from 'react';
 import { Image, View } from 'react-native';
-import { ComponentID, ImageSizeState, PageID } from '../../../../enum';
-import { useFile } from '../../../../hook';
+import { ComponentID, PageID } from '../../../../enum';
 import { useStyles } from './styles';
 
 import CommunityJoinedButton from '../../../../elements/CommunityJoinedButtonElement/CommunityJoinedButtonElement';
@@ -10,9 +9,10 @@ import { SvgXml } from 'react-native-svg';
 import { community as communityIcon } from '../../../../assets/icons';
 import CommunityPrivateBadge from '../../../../elements/CommunityPrivateBadge/CommunityPrivateBadge';
 import CommunityOfficialBadge from '../../../../elements/CommunityOfficialBadge/CommunityOfficialBadge';
-import CommunityCategory from '../../../../elements/CommunityCatetory/CommunityCategory';
 import CommunityMemeberCount from '../../../../elements/CommunityMemeberCount/CommunityMemeberCount';
 import CommunityDisplayname from '../../../../elements/CommunityDisplayname/CommunityDisplayname';
+import { getFileUrlWithSize } from '../../../../utils';
+import { CommunityCategories } from '../../../../../v4/features/feed/components';
 
 type RecommendedCommunityItemProps = {
   pageId?: PageID;
@@ -22,31 +22,15 @@ type RecommendedCommunityItemProps = {
 export const RecommendedCommunityItem: React.FC<
   RecommendedCommunityItemProps
 > = ({ community, pageId = PageID.WildCardPage }) => {
-  const { getImage } = useFile();
   const componentId = ComponentID.recommended_communities;
   const styles = useStyles();
-  const [imageUrl, setImageUrl] = React.useState<string | undefined>(undefined);
-
-  useEffect(() => {
-    const fetchImage = async () => {
-      if (!community.avatarFileId) return;
-
-      const url = await getImage({
-        fileId: community.avatarFileId,
-        imageSize: ImageSizeState.large,
-      });
-
-      setImageUrl(url);
-    };
-    fetchImage();
-  }, [community.avatarFileId, getImage]);
 
   return (
     <View style={styles.container}>
-      {community.avatarFileId && imageUrl ? (
+      {community.avatar?.fileUrl ? (
         <Image
           style={styles.image}
-          source={{ uri: imageUrl }}
+          source={{ uri: getFileUrlWithSize(community.avatar?.fileUrl) }}
           resizeMode="cover"
         />
       ) : (
@@ -72,8 +56,8 @@ export const RecommendedCommunityItem: React.FC<
         </View>
         <View style={styles.detailBottomWrap}>
           <View style={styles.detailBottomWrapLeft}>
-            <CommunityCategory
-              categoryIds={community.categoryIds}
+            <CommunityCategories
+              categories={community.categories}
               pageId={pageId}
               componentId={componentId}
             />

package/src/v4/PublicApi/Pages/AmityCommunityProfilePage/AmityCommunityProfilePage.tsx

@@ -69,6 +69,9 @@ const AmityCommunityProfilePage: React.FC<ICommunityProfilePage> = ({
 
   const animatedOpacity = useRef(new Animated.Value(0)).current;
   const animatedTranslateY = useRef(new Animated.Value(15)).current;
+  const stickyHeaderAnimation = useRef<Animated.CompositeAnimation | null>(
+    null
+  );
 
   const scrollY = useRef(new Animated.Value(0)).current;
   const feedRef = useRef<AmityCommunityFeedRef>(null);
@@ -94,7 +97,7 @@ const AmityCommunityProfilePage: React.FC<ICommunityProfilePage> = ({
       animatedTranslateY.setValue(15);
 
       // Run entrance animation
-      Animated.parallel([
+      stickyHeaderAnimation.current = Animated.parallel([
         Animated.timing(animatedOpacity, {
           toValue: 1,
           duration: 200,
@@ -106,8 +109,12 @@ const AmityCommunityProfilePage: React.FC<ICommunityProfilePage> = ({
           easing: Easing.out(Easing.ease),
           useNativeDriver: true,
         }),
-      ]).start();
+      ]);
+      stickyHeaderAnimation.current.start();
     }
+    return () => {
+      stickyHeaderAnimation.current?.stop();
+    };
   }, [isScrolledPastHeader, animatedOpacity, animatedTranslateY]);
 
   const handleLoadMore = useCallback(() => {

package/src/v4/PublicApi/Pages/AmitySocialHomePage/AmitySocialHomePage.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { useCallback, useState } from 'react';
-import { LogBox, SafeAreaView, StyleSheet } from 'react-native';
+import { useCallback, useRef, useState } from 'react';
+import { SafeAreaView, StyleSheet, View } from 'react-native';
 import CustomSocialTab from '../../../../v4/component/CustomSocialTab/CustomSocialTab';
 import { useUiKitConfig } from '../../../../v4/hook';
 import {
@@ -12,15 +12,11 @@ import {
 import { useTheme } from 'react-native-paper';
 import { useBehaviour } from '../../../../v4/providers/BehaviourProvider';
 import AmitySocialHomeTopNavigationComponent from '../../../../v4/PublicApi/Components/AmitySocialHomeTopNavigationComponent/AmitySocialHomeTopNavigationComponent';
-import AmityEmptyNewsFeedComponent from '../../../../v4/PublicApi/Components/AmityEmptyNewsFeedComponent/AmityEmptyNewsFeedComponent';
 import AmityMyCommunitiesComponent from '../../../../v4/PublicApi/Components/AmityMyCommunitiesComponent/AmityMyCommunitiesComponent';
 import AmityNewsFeedComponent from '../../../../v4/PublicApi/Components/AmityNewsFeedComponent/AmityNewsFeedComponent';
 import AmityExploreComponent from '../../../../v4/PublicApi/Components/AmityExploreComponent/AmityExploreComponent';
-import NewsFeedLoadingComponent from '../../../../v4/component/NewsFeedLoadingComponent/NewsFeedLoadingComponent';
-import { useCustomRankingGlobalFeed } from '../../../../v4/hook/useCustomRankingGlobalFeed';
 import { MyMD3Theme } from '../../../../providers/amity-ui-kit-provider';
 
-LogBox.ignoreAllLogs(true);
 const AmitySocialHomePage = () => {
   const theme = useTheme() as MyMD3Theme;
   const styles = StyleSheet.create({
@@ -31,8 +27,6 @@ const AmitySocialHomePage = () => {
   });
 
   const { AmitySocialHomePageBehaviour } = useBehaviour();
-  const { itemWithAds: globalFeedPosts, loading } =
-    useCustomRankingGlobalFeed();
 
   const [newsFeedTab] = useUiKitConfig({
     page: PageID.social_home_page,
@@ -56,11 +50,13 @@ const AmitySocialHomePage = () => {
   }) as string[];
 
   const [activeTab, setActiveTab] = useState<string>(newsFeedTab);
+  const visitedTabs = useRef<Set<string>>(new Set([newsFeedTab]));
 
   const onTabChange = useCallback(
     (tabName: string) => {
       if (AmitySocialHomePageBehaviour.onChooseTab)
         return AmitySocialHomePageBehaviour.onChooseTab(tabName);
+      visitedTabs.current.add(tabName);
       setActiveTab(tabName);
     },
     [AmitySocialHomePageBehaviour]
@@ -70,30 +66,10 @@ const AmitySocialHomePage = () => {
     onTabChange(exploreTab);
   }, [exploreTab, onTabChange]);
 
-  const renderNewsFeed = () => {
-    if (loading) return <NewsFeedLoadingComponent />;
-    if (activeTab === exploreTab)
-      return <AmityExploreComponent pageId={PageID.social_home_page} />;
-
-    if (activeTab === newsFeedTab) {
-      if (!loading && globalFeedPosts?.length === 0)
-        return (
-          <AmityEmptyNewsFeedComponent
-            pageId={PageID.social_home_page}
-            onPressExploreCommunity={onPressExploreCommunity}
-          />
-        );
-      return <AmityNewsFeedComponent pageId={PageID.social_home_page} />;
-    }
-    if (activeTab === myCommunitiesTab)
-      return (
-        <AmityMyCommunitiesComponent
-          pageId={PageID.social_home_page}
-          componentId={ComponentID.my_communities}
-        />
-      );
-    return null;
-  };
+  const tabStyle = (tab: string) => ({
+    flex: 1,
+    display: activeTab === tab ? ('flex' as const) : ('none' as const),
+  });
 
   return (
     <SafeAreaView
@@ -108,7 +84,25 @@ const AmitySocialHomePage = () => {
         onTabChange={onTabChange}
         activeTab={activeTab}
       />
-      {renderNewsFeed()}
+      <View style={tabStyle(newsFeedTab)}>
+        <AmityNewsFeedComponent
+          pageId={PageID.social_home_page}
+          onPressExploreCommunity={onPressExploreCommunity}
+        />
+      </View>
+      {visitedTabs.current.has(exploreTab) && (
+        <View style={tabStyle(exploreTab)}>
+          <AmityExploreComponent pageId={PageID.social_home_page} />
+        </View>
+      )}
+      {visitedTabs.current.has(myCommunitiesTab) && (
+        <View style={tabStyle(myCommunitiesTab)}>
+          <AmityMyCommunitiesComponent
+            pageId={PageID.social_home_page}
+            componentId={ComponentID.my_communities}
+          />
+        </View>
+      )}
     </SafeAreaView>
   );
 };

package/src/v4/component/CommunityRowItem/CommunityRowItem.tsx

@@ -6,11 +6,11 @@ import { View } from 'react-native';
 import CommunityJoinedButtonElement from '../../elements/CommunityJoinedButtonElement/CommunityJoinedButtonElement';
 import CommunityJoinButtonElement from '../../elements/CommunityJoinButtonElement/CommunityJoinButtonElement';
 import CommunityDisplayname from '../../elements/CommunityDisplayname/CommunityDisplayname';
-import CommunityCategory from '../../elements/CommunityCatetory/CommunityCategory';
 import CommunityMemeberCount from '../../elements/CommunityMemeberCount/CommunityMemeberCount';
 import { useStyles } from './styles';
 import CommunityPrivateBadge from '../../elements/CommunityPrivateBadge/CommunityPrivateBadge';
 import CommunityOfficialBadge from '../../elements/CommunityOfficialBadge/CommunityOfficialBadge';
+import { CommunityCategories } from '../../../v4/features/feed/components';
 
 type CommunityRowItemProps = {
   pageId?: PageID;
@@ -34,7 +34,7 @@ const CommunityRowItem: FC<CommunityRowItemProps> = ({
       <CommunityRowImage
         pageId={pageId}
         componentId={componentId}
-        fileId={community.avatarFileId}
+        fileUrl={community.avatar?.fileUrl}
         label={label}
       />
       <View style={styles.detailWrap}>
@@ -54,8 +54,8 @@ const CommunityRowItem: FC<CommunityRowItemProps> = ({
         </View>
         <View style={styles.detailBottomWrap}>
           <View style={styles.detailBottomWrapLeft}>
-            <CommunityCategory
-              categoryIds={community.categoryIds}
+            <CommunityCategories
+              categories={community.categories}
               pageId={pageId}
               componentId={componentId}
             />