@amityco/react-native-social-uikit 4.0.0-e24bae8.0 → 4.0.0-e3111902.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@amityco/react-native-social-uikit",
-  "version": "4.0.0-e24bae8.0",
+  "version": "4.0.0-e3111902.0",
   "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.17.0",
     "@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.17.0",
     "@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

@@ -41,6 +41,7 @@ import { RouteProp, useNavigation, useRoute } from '@react-navigation/native';
 import { useTheme } from 'react-native-paper';
 import { MyMD3Theme } from '../../../../providers/amity-ui-kit-provider';
 import AmityCommunityPinnedPostComponent from '../../../../v4/PublicApi/Components/AmityCommunityPinnedPostComponent/AmityCommunityPinnedPostComponent';
+import { usePostPermission } from '../../../../v4/hook/usePostPermission';
 
 type ICommunityProfilePage = {
   defaultCommunityId?: string;
@@ -68,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);
@@ -93,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,
@@ -105,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(() => {
@@ -273,6 +281,8 @@ function CommunityProfileActions({ pageId, communityId, styles }) {
 
   const hasStoryPermission = useStoryPermission(communityId);
 
+  const hasPostPermission = usePostPermission({ community });
+
   const openBottomSheet = () => setIsBottomSheetVisible(true);
 
   const closeBottomSheet = () => setIsBottomSheetVisible(false);
@@ -350,7 +360,7 @@ function CommunityProfileActions({ pageId, communityId, styles }) {
     });
   };
 
-  if (!community?.isJoined) return null;
+  if (!hasPostPermission) return null;
 
   return (
     <Fragment>

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

@@ -8,6 +8,7 @@ import {
 } from 'react-native';
 import React, { FC, useCallback, useState, useEffect, memo } from 'react';
 import Video from 'react-native-video';
+import LinearGradient from 'react-native-linear-gradient';
 import {
   leftLongArrow,
   rightLongArrow,
@@ -200,6 +201,10 @@ const AmityDraftStoryPage: FC<IAmityDraftStoryPage> = ({
             style={[styles.image, isFullScreen && styles.aspect_ratio]}
           />
         )}
+        <LinearGradient
+          style={styles.gradientOverlay}
+          colors={['transparent', 'rgba(0,0,0,0.8)']}
+        />
       </View>
       {hyperlink?.length > 0 && (
         <TouchableOpacity

package/src/v4/PublicApi/Pages/AmityDraftStoryPage/styles.ts

@@ -31,10 +31,8 @@ export const useStyles = () => {
       borderRadius: 50,
     },
     imageContainer: {
-      maxHeight: height * 0.8,
-      height: width * (16 / 9),
+      flex: 1,
       width: width,
-      borderRadius: 20,
       backgroundColor: theme.colors.baseShade4,
       justifyContent: 'center',
       overflow: 'hidden',
@@ -42,15 +40,24 @@ export const useStyles = () => {
     aspect_ratio: {
       width: '100%',
       height: '100%',
+      resizeMode: 'cover',
     },
     image: {
       width: '100%',
-      height: '60%',
+      height: '100%',
+      resizeMode: 'contain',
+    },
+    gradientOverlay: {
+      position: 'absolute',
+      bottom: 0,
+      left: 0,
+      right: 0,
+      height: 160,
     },
     shareStoryBtn: {
-      marginTop: 16,
-      marginRight: 8,
-      alignSelf: 'flex-end',
+      position: 'absolute',
+      bottom: 24,
+      right: 16,
       flexDirection: 'row',
       justifyContent: 'center',
       alignItems: 'center',

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/PublicApi/Pages/AmityViewStoryPage/Components/AmityViewStoryItem.tsx

@@ -595,6 +595,7 @@ const AmityViewStoryItem: FC<IAmityViewStoryItem> = ({
             <CommentList
               postId={currentStory?.storyId}
               postType="story"
+              disabledComment={!communityData?.allowCommentInStory}
               disabledInteraction={!communityData?.isJoined}
               onNavigate={onClose}
             />

package/src/v4/assets/icons/lock.tsx

@@ -1,9 +1,10 @@
-export const icon = (
-  color: string = '#292B32'
-) => `<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M10 14.1562C9.625 14.1562 9.34375 13.875 9.34375 13.5V12C9.34375 11.6484 9.625 11.3438 10 11.3438C10.3516 11.3438 10.6562 11.6484 10.6562 12V13.5C10.6562 13.875 10.3516 14.1562 10 14.1562ZM15.25 10.125V15.375C15.25 16.0078 14.7344 16.5 14.125 16.5H5.875C5.24219 16.5 4.75 16.0078 4.75 15.375V10.125C4.75 9.51562 5.24219 9 5.875 9H6.625V7.875C6.625 6.02344 8.125 4.5 10 4.5C11.875 4.52344 13.375 6.04688 13.375 7.92188V9H14.125C14.7344 9 15.25 9.51562 15.25 10.125ZM7.75 9H12.25V7.875C12.25 6.65625 11.2188 5.625 10 5.625C8.75781 5.625 7.75 6.65625 7.75 7.875V9ZM14.125 10.125H5.875V15.375H14.125V10.125Z" fill="${color}"/>
-</svg>
-
+export const icon =
+  () => `<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" fill="none" viewBox="0 0 20 20">
+      <path
+        fill="currentColor"
+        d="M15.5 8c.813 0 1.5.688 1.5 1.5v7a1.5 1.5 0 01-1.5 1.5h-11A1.48 1.48 0 013 16.5v-7A1.5 1.5 0 014.5 8h1V6.5C5.5 4.031 7.5 2 10 2c2.5.031 4.5 2.063 4.5 4.563V8h1zM7 6.5V8h6V6.5c0-1.625-1.375-3-3-3-1.656 0-3 1.375-3 3zm8.5 10v-7h-11v7h11z"
+      ></path>
+    </svg>
 `;
 
 export default icon;

package/src/v4/component/Avatar/Avatar.tsx

@@ -54,12 +54,15 @@ function Avatar({ uri, imageProps, iconProps, userAvatarProps }: AvatarProps) {
         {...imageProps}
         onError={() => setImageError(true)}
       />
+      {userAvatarProps?.roles && isModerator(userAvatarProps?.roles) && (
+        <ModeratorBadge style={styles.moderatorBadge} />
+      )}
     </TouchableOpacity>
   ) : iconProps ? (
     <SvgXml {...iconProps} />
   ) : (
     <TouchableOpacity
-      style={[styles.defaultUserAvatar, userAvatarProps.style]}
+      style={[styles.defaultUserAvatar, userAvatarProps?.style]}
       activeOpacity={0.7}
       onPress={() => {
         if (userAvatarProps?.shouldRedirectToUserProfile) {
@@ -72,7 +75,7 @@ function Avatar({ uri, imageProps, iconProps, userAvatarProps }: AvatarProps) {
       <Typography.Body style={styles.firstChar}>
         {userAvatarProps.userName?.trim()?.charAt(0).toUpperCase()}
       </Typography.Body>
-      {userAvatarProps.roles && isModerator(userAvatarProps.roles) && (
+      {userAvatarProps?.roles && isModerator(userAvatarProps.roles) && (
         <ModeratorBadge style={styles.moderatorBadge} />
       )}
     </TouchableOpacity>