@amityco/react-native-social-uikit 4.0.0-dc7783d.0 → 4.0.0-e6c5bc7b.0

package/src/svg/svg-xml-list.ts

@@ -396,7 +396,7 @@ export const editThumbnailIcon = (
 export const livestreamIcon = (
   color: string = '#292B32'
 ) => `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M8.41406 8.80469L8.02734 8.41797C7.92188 8.3125 7.78125 8.24219 7.64062 8.24219C7.46484 8.24219 7.28906 8.3125 7.18359 8.45312C6.30469 9.47266 5.8125 10.8086 5.8125 12.25C5.8125 13.7266 6.30469 15.0625 7.18359 16.082C7.28906 16.2227 7.46484 16.293 7.64062 16.293C7.78125 16.293 7.92188 16.2227 8.02734 16.1172L8.41406 15.7305C8.51953 15.625 8.58984 15.5195 8.58984 15.3438C8.58984 15.2383 8.55469 15.0977 8.48438 15.0273C7.85156 14.2539 7.5 13.3047 7.5 12.2852C7.5 11.2305 7.85156 10.2812 8.48438 9.50781C8.55469 9.4375 8.58984 9.29688 8.58984 9.19141C8.58984 9.01562 8.51953 8.91016 8.41406 8.80469ZM5.63672 6.0625L5.25 5.67578C5.14453 5.57031 5.00391 5.53516 4.82812 5.53516C4.65234 5.53516 4.51172 5.60547 4.40625 5.71094C2.75391 7.50391 1.875 9.82422 1.875 12.25C1.875 14.7109 2.75391 16.9961 4.40625 18.8242C4.51172 18.9297 4.65234 19.0352 4.82812 19.0352C5.00391 19.0352 5.14453 18.9648 5.25 18.8594L5.63672 18.4727C5.84766 18.2617 5.84766 17.9453 5.63672 17.6992C4.33594 16.2578 3.5625 14.3594 3.5625 12.2852C3.5625 10.1758 4.33594 8.27734 5.63672 6.83594C5.84766 6.58984 5.84766 6.27344 5.63672 6.0625ZM19.5586 5.71094C19.4531 5.60547 19.3125 5.5 19.1367 5.5C18.9609 5.5 18.8203 5.57031 18.75 5.67578L18.3281 6.0625C18.1172 6.27344 18.1172 6.58984 18.3281 6.83594C19.6289 8.27734 20.4023 10.1758 20.4023 12.25C20.4023 14.3594 19.6289 16.2578 18.3281 17.6992C18.1172 17.9453 18.1172 18.2617 18.3281 18.4727L18.75 18.8594C18.8203 18.9648 18.9609 19 19.1367 19C19.3125 19 19.4531 18.9297 19.5586 18.8242C21.2109 16.9961 22.125 14.7109 22.125 12.25C22.125 9.82422 21.2109 7.50391 19.5586 5.71094ZM12 10.2812C10.9102 10.2812 10.0312 11.1953 10.0312 12.25C10.0312 13.3398 10.9102 14.2188 12 14.2188C13.0547 14.2188 13.9688 13.3398 13.9688 12.25C13.9688 11.1953 13.0547 10.2812 12 10.2812ZM15.9375 8.41797L15.5508 8.80469C15.4453 8.91016 15.375 9.01562 15.375 9.19141C15.375 9.29688 15.4102 9.4375 15.4805 9.50781C16.1133 10.2812 16.4648 11.2305 16.4648 12.25C16.4648 13.3047 16.1133 14.2539 15.4805 15.0273C15.4102 15.0977 15.375 15.2383 15.375 15.3438C15.375 15.5195 15.4453 15.625 15.5508 15.7305L15.9375 16.1172C16.043 16.2227 16.1836 16.293 16.3242 16.293C16.5 16.293 16.6758 16.2227 16.7812 16.082C17.6602 15.0625 18.1523 13.7266 18.1523 12.2852C18.1523 10.8086 17.6602 9.47266 16.7812 8.45312C16.6758 8.3125 16.5 8.24219 16.3242 8.24219C16.1836 8.24219 16.043 8.3125 15.9375 8.41797Z" fill=${color}/>
+<path d="M8.41406 8.80469C8.51953 8.91016 8.58984 9.01562 8.58984 9.19141C8.58984 9.29688 8.55469 9.4375 8.48438 9.50781C7.85156 10.2812 7.5 11.2305 7.5 12.2852C7.5 13.3047 7.85156 14.2539 8.48438 15.0273C8.55469 15.0977 8.58984 15.2383 8.58984 15.3438C8.58984 15.5195 8.51953 15.625 8.41406 15.7305L8.02734 16.1172C7.92188 16.2227 7.78125 16.293 7.64062 16.293C7.46484 16.293 7.28906 16.2227 7.18359 16.082C6.30469 15.0625 5.8125 13.7266 5.8125 12.25C5.8125 10.8086 6.30469 9.47266 7.18359 8.45312C7.28906 8.3125 7.46484 8.24219 7.64062 8.24219C7.78125 8.24219 7.92188 8.3125 8.02734 8.41797L8.41406 8.80469ZM5.63672 6.0625C5.84766 6.27344 5.84766 6.58984 5.63672 6.83594C4.33594 8.27734 3.5625 10.1758 3.5625 12.2852C3.5625 14.3594 4.33594 16.2578 5.63672 17.6992C5.84766 17.9453 5.84766 18.2617 5.63672 18.4727L5.25 18.8594C5.14453 18.9648 5.00391 19.0352 4.82812 19.0352C4.65234 19.0352 4.51172 18.9297 4.40625 18.8242C2.75391 16.9961 1.875 14.7109 1.875 12.25C1.875 9.82422 2.75391 7.50391 4.40625 5.71094C4.51172 5.60547 4.65234 5.53516 4.82812 5.53516C5.00391 5.53516 5.14453 5.57031 5.25 5.67578L5.63672 6.0625ZM19.5586 5.71094C21.2109 7.50391 22.125 9.82422 22.125 12.25C22.125 14.7109 21.2109 16.9961 19.5586 18.8242C19.4531 18.9297 19.3125 19 19.1367 19C18.9609 19 18.8203 18.9648 18.75 18.8594L18.3281 18.4727C18.1172 18.2617 18.1172 17.9453 18.3281 17.6992C19.6289 16.2578 20.4023 14.3594 20.4023 12.25C20.4023 10.1758 19.6289 8.27734 18.3281 6.83594C18.1172 6.58984 18.1172 6.27344 18.3281 6.0625L18.75 5.67578C18.8203 5.57031 18.9609 5.5 19.1367 5.5C19.3125 5.5 19.4531 5.60547 19.5586 5.71094ZM12 10.2812C13.0547 10.2812 13.9688 11.1953 13.9688 12.25C13.9688 13.3398 13.0547 14.2188 12 14.2188C10.9102 14.2188 10.0312 13.3398 10.0312 12.25C10.0312 11.1953 10.9102 10.2812 12 10.2812ZM15.9375 8.41797C16.043 8.3125 16.1836 8.24219 16.3242 8.24219C16.5 8.24219 16.6758 8.3125 16.7812 8.45312C17.6602 9.47266 18.1523 10.8086 18.1523 12.2852C18.1523 13.7266 17.6602 15.0625 16.7812 16.082C16.6758 16.2227 16.5 16.293 16.3242 16.293C16.1836 16.293 16.043 16.2227 15.9375 16.1172L15.5508 15.7305C15.4453 15.625 15.375 15.5195 15.375 15.3438C15.375 15.2383 15.4102 15.0977 15.4805 15.0273C16.1133 14.2539 16.4648 13.3047 16.4648 12.25C16.4648 11.2305 16.1133 10.2812 15.4805 9.50781C15.4102 9.4375 15.375 9.29688 15.375 9.19141C15.375 9.01562 15.4453 8.91016 15.5508 8.80469L15.9375 8.41797Z" fill=${color}/>
 </svg>
 `;
 
@@ -429,3 +429,9 @@ export const infoIcon = (
 ): string => `<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M8 2.25006C4.25 2.25006 1.25 5.28131 1.25 9.00006C1.25 12.7501 4.25 15.7501 8 15.7501C11.7188 15.7501 14.75 12.7501 14.75 9.00006C14.75 5.28131 11.6875 2.25006 8 2.25006ZM8 1.25006C12.25 1.25006 15.75 4.75006 15.75 9.00006C15.75 13.2813 12.25 16.7501 8 16.7501C3.71875 16.7501 0.25 13.2813 0.25 9.00006C0.25 4.75006 3.71875 1.25006 8 1.25006ZM6.875 12.0001H7.25V8.25006H6.875C6.65625 8.25006 6.5 8.09381 6.5 7.87506V7.62506C6.5 7.43756 6.65625 7.25006 6.875 7.25006H8.375C8.5625 7.25006 8.75 7.43756 8.75 7.62506V12.0001H9.125C9.3125 12.0001 9.5 12.1876 9.5 12.3751V12.6251C9.5 12.8438 9.3125 13.0001 9.125 13.0001H6.875C6.65625 13.0001 6.5 12.8438 6.5 12.6251V12.3751C6.5 12.1876 6.65625 12.0001 6.875 12.0001ZM8 4.50006C8.53125 4.50006 9 4.96881 9 5.50006C9 6.06256 8.53125 6.50006 8 6.50006C7.4375 6.50006 7 6.06256 7 5.50006C7 4.96881 7.4375 4.50006 8 4.50006Z" fill="${color}"/>
 </svg>`;
+export const errorIcon = (
+  color: string = '#fff'
+): string => `<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="8" cy="8" r="7.25" fill="#FA4D30" stroke="#fff" strokeWidth="1.5"></circle>
+<path d="M9.25 10.75C9.25 11.453 8.687 12 8 12c-.703 0-1.25-.547-1.25-1.25 0-.688.547-1.25 1.25-1.25.688 0 1.25.563 1.25 1.25zM6.89 4.406A.378.378 0 017.267 4h1.453c.219 0 .39.188.375.406l-.203 4.25A.387.387 0 018.516 9H7.469a.387.387 0 01-.375-.344l-.203-4.25z" fill="${color}"/>
+</svg>`;

package/src/types/auth.interface.ts

@@ -9,4 +9,5 @@ export type AuthContextInterface = {
   apiRegion: string;
   authToken?: string;
   fcmToken?: string;
+  isGlobalBan: boolean;
 };

package/src/types/user.interface.ts

@@ -11,4 +11,5 @@ export interface UserInterface {
   userId: string;
   displayName: string;
   avatarFileId: string;
+  avatarCustomUrl?: string;
 }

package/src/util/postTypeChecker.ts

@@ -8,7 +8,7 @@ export const isTextPost = (
 
 export const isStreamPost = (
   post?: Amity.Post | null
-): post is Amity.Post<'liveStream'> => {
+): post is Amity.Post<'room'> => {
   return !!(
     post &&
     post.data &&

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

@@ -209,8 +209,8 @@ const AmityCommunityFeedComponent = forwardRef<
         isPinnedPost(item)
           ? item.post.postId
           : isAmityAd(item)
-            ? item.adId.toString() + index
-            : item.postId.toString() + '_' + index
+          ? item.adId.toString() + index
+          : item.postId.toString() + '_' + index
       }
       extraData={itemWithAds}
     />

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

@@ -28,107 +28,107 @@ const AmityCommunityProfileTabComponent: FC<
   currentTab,
   onTabChange,
 }) => {
-    const elementId = ElementID.community_profile_tab;
+  const elementId = ElementID.community_profile_tab;
 
-    const { themeStyles, accessibilityId } = useAmityElement({
-      pageId,
-      componentId,
-      elementId,
-    });
+  const { themeStyles, accessibilityId } = useAmityElement({
+    pageId,
+    componentId,
+    elementId,
+  });
 
-    const styles = StyleSheet.create({
-      container: {
-        backgroundColor: themeStyles?.colors.background,
-        flexDirection: 'row',
-        width: '100%',
-        paddingHorizontal: 16,
-        justifyContent: 'space-between',
-        borderBottomColor: themeStyles?.colors.baseShade4,
-        borderBottomWidth: 1,
-      },
-    });
+  const styles = StyleSheet.create({
+    container: {
+      backgroundColor: themeStyles?.colors.background,
+      flexDirection: 'row',
+      width: '100%',
+      paddingHorizontal: 16,
+      justifyContent: 'space-between',
+      borderBottomColor: themeStyles?.colors.baseShade4,
+      borderBottomWidth: 1,
+    },
+  });
 
-    const getActiveColor = useCallback(
-      (isActive: boolean) => {
-        return isActive
-          ? themeStyles?.colors.base
-          : themeStyles?.colors.baseShade2;
-      },
-      [themeStyles]
-    );
+  const getActiveColor = useCallback(
+    (isActive: boolean) => {
+      return isActive
+        ? themeStyles?.colors.base
+        : themeStyles?.colors.baseShade2;
+    },
+    [themeStyles]
+  );
 
-    return (
-      <View
-        style={styles.container}
-        testID={accessibilityId}
-        accessibilityLabel={accessibilityId}
+  return (
+    <View
+      style={styles.container}
+      testID={accessibilityId}
+      accessibilityLabel={accessibilityId}
+    >
+      <Pressable
+        onPress={() => onTabChange(CommunityProfileTab.community_feed)}
       >
-        <Pressable
-          onPress={() => onTabChange(CommunityProfileTab.community_feed)}
-        >
-          <IconTab
-            themeStyles={themeStyles}
-            icon={
-              <SvgXml
-                xml={feed(
-                  getActiveColor(
-                    currentTab === CommunityProfileTab.community_feed
-                  )
-                )}
-              />
-            }
-            isActive={currentTab === CommunityProfileTab.community_feed}
-          />
-        </Pressable>
-        <Pressable onPress={() => onTabChange(CommunityProfileTab.community_pin)}>
-          <IconTab
-            themeStyles={themeStyles}
-            icon={
-              <SvgXml
-                xml={pin(
-                  getActiveColor(currentTab === CommunityProfileTab.community_pin)
-                )}
-              />
-            }
-            isActive={currentTab === CommunityProfileTab.community_pin}
-          />
-        </Pressable>
-        <Pressable
-          onPress={() => onTabChange(CommunityProfileTab.community_image_feed)}
-        >
-          <IconTab
-            themeStyles={themeStyles}
-            icon={
-              <SvgXml
-                xml={image(
-                  getActiveColor(
-                    currentTab === CommunityProfileTab.community_image_feed
-                  )
-                )}
-              />
-            }
-            isActive={currentTab === CommunityProfileTab.community_image_feed}
-          />
-        </Pressable>
-        <Pressable
-          onPress={() => onTabChange(CommunityProfileTab.community_video_feed)}
-        >
-          <IconTab
-            themeStyles={themeStyles}
-            icon={
-              <SvgXml
-                xml={video(
-                  getActiveColor(
-                    currentTab === CommunityProfileTab.community_video_feed
-                  )
-                )}
-              />
-            }
-            isActive={currentTab === CommunityProfileTab.community_video_feed}
-          />
-        </Pressable>
-      </View>
-    );
-  };
+        <IconTab
+          themeStyles={themeStyles}
+          icon={
+            <SvgXml
+              xml={feed(
+                getActiveColor(
+                  currentTab === CommunityProfileTab.community_feed
+                )
+              )}
+            />
+          }
+          isActive={currentTab === CommunityProfileTab.community_feed}
+        />
+      </Pressable>
+      <Pressable onPress={() => onTabChange(CommunityProfileTab.community_pin)}>
+        <IconTab
+          themeStyles={themeStyles}
+          icon={
+            <SvgXml
+              xml={pin(
+                getActiveColor(currentTab === CommunityProfileTab.community_pin)
+              )}
+            />
+          }
+          isActive={currentTab === CommunityProfileTab.community_pin}
+        />
+      </Pressable>
+      <Pressable
+        onPress={() => onTabChange(CommunityProfileTab.community_image_feed)}
+      >
+        <IconTab
+          themeStyles={themeStyles}
+          icon={
+            <SvgXml
+              xml={image(
+                getActiveColor(
+                  currentTab === CommunityProfileTab.community_image_feed
+                )
+              )}
+            />
+          }
+          isActive={currentTab === CommunityProfileTab.community_image_feed}
+        />
+      </Pressable>
+      <Pressable
+        onPress={() => onTabChange(CommunityProfileTab.community_video_feed)}
+      >
+        <IconTab
+          themeStyles={themeStyles}
+          icon={
+            <SvgXml
+              xml={video(
+                getActiveColor(
+                  currentTab === CommunityProfileTab.community_video_feed
+                )
+              )}
+            />
+          }
+          isActive={currentTab === CommunityProfileTab.community_video_feed}
+        />
+      </Pressable>
+    </View>
+  );
+};
 
 export default memo(AmityCommunityProfileTabComponent);

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

@@ -1,13 +1,14 @@
 import React, { useCallback, memo } from 'react';
 import { StyleSheet, View } from 'react-native';
-import { ComponentID, ElementID, PageID } from '../../../enum/enumUIKitID';
+import { ComponentID, PageID } from '../../../enum/enumUIKitID';
 import { useAmityComponent, useStoryPermission } from '../../../hook';
 import { useBehaviour } from '../../../providers/BehaviourProvider';
 import { useNavigation } from '@react-navigation/native';
 import { StackNavigationProp } from '@react-navigation/stack';
 import { RootStackParamList } from '../../../../v4/routes/RouteParamList';
-import ButtonWithIconElement from '../../Elements/ButtonWithIconElement/ButtonWithIconElement';
 import { AmityPostTargetSelectionPageType } from '../../../enum';
+import { livestream, poll, post, story } from '../../../../v4/assets/icons';
+import MenuAction from '../../../../v4/elements/MenuAction';
 
 interface AmityCreatePostMenuComponentProps {
   pageId?: PageID;
@@ -32,6 +33,13 @@ const AmityCreatePostMenuComponent = ({
       backgroundColor: themeStyles.colors.background,
       borderRadius: 12,
     },
+    menu: {
+      gap: 12,
+      paddingVertical: 12,
+      paddingHorizontal: 16,
+      flexDirection: 'row',
+      alignItems: 'center',
+    },
   });
 
   const onPressCreatePost = useCallback(
@@ -62,14 +70,14 @@ const AmityCreatePostMenuComponent = ({
           navigation.navigate('PollTargetSelection');
         },
 
-        // [AmityPostTargetSelectionPageType.livestream]: () => {
-        //   if (
-        //     AmityCreatePostMenuComponentBehavior.goToSelectLivestreamPostTargetPage
-        //   ) {
-        //     AmityCreatePostMenuComponentBehavior.goToSelectLivestreamPostTargetPage();
-        //   }
-        //   navigation.navigate('LivestreamPostTargetSelection');
-        // },
+        [AmityPostTargetSelectionPageType.livestream]: () => {
+          if (
+            AmityCreatePostMenuComponentBehavior.goToSelectLivestreamPostTargetPage
+          ) {
+            AmityCreatePostMenuComponentBehavior.goToSelectLivestreamPostTargetPage();
+          }
+          navigation.navigate('LivestreamPostTargetSelection');
+        },
       };
       postTypeHandlers[postType]?.();
     },
@@ -78,36 +86,44 @@ const AmityCreatePostMenuComponent = ({
 
   return (
     <View style={styles.container}>
-      <ButtonWithIconElement
-        pageId={pageId}
-        componentId={componentId}
-        elementId={ElementID.create_post_button}
-        onClick={() => onPressCreatePost(AmityPostTargetSelectionPageType.post)}
+      <MenuAction
+        onPress={() => onPressCreatePost(AmityPostTargetSelectionPageType.post)}
+        style={styles.menu}
+        label="Post"
+        iconProps={{
+          xml: post(),
+        }}
       />
       {hasStoryPermission && (
-        <ButtonWithIconElement
-          pageId={pageId}
-          componentId={componentId}
-          elementId={ElementID.create_story_button}
-          onClick={() =>
+        <MenuAction
+          style={styles.menu}
+          label="Story"
+          iconProps={{
+            xml: story(),
+          }}
+          onPress={() =>
             onPressCreatePost(AmityPostTargetSelectionPageType.story)
           }
         />
       )}
-      <ButtonWithIconElement
-        pageId={pageId}
-        componentId={componentId}
-        elementId={ElementID.create_poll_button}
-        onClick={() => onPressCreatePost(AmityPostTargetSelectionPageType.poll)}
+      <MenuAction
+        style={styles.menu}
+        label="Poll"
+        iconProps={{
+          xml: poll(),
+        }}
+        onPress={() => onPressCreatePost(AmityPostTargetSelectionPageType.poll)}
       />
-      {/* <ButtonWithIconElement
-        pageId={pageId}
-        componentId={componentId}
-        elementId={ElementID.create_livestream_button}
-        onClick={() =>
+      <MenuAction
+        style={styles.menu}
+        label="Livestream"
+        iconProps={{
+          xml: livestream(),
+        }}
+        onPress={() =>
           onPressCreatePost(AmityPostTargetSelectionPageType.livestream)
         }
-      /> */}
+      />
     </View>
   );
 };

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

@@ -1,5 +1,5 @@
 import React, { FC, memo, useCallback, useRef, useState } from 'react';
-import { FlatList } from 'react-native';
+import { FlatList, View } from 'react-native';
 
 import { RefreshControl } from 'react-native';
 import AmityPostContentComponent from '../AmityPostContentComponent/AmityPostContentComponent';
@@ -20,6 +20,7 @@ import Divider from '../../../component/Divider';
 type AmityGlobalFeedComponentType = {
   pageId?: PageID;
   isShowStoryTab?: boolean;
+  GlobalFeedHeaderComponent?: React.ReactElement;
 };
 
 export const globalFeedPageLimit = 20;
@@ -27,6 +28,7 @@ export const globalFeedPageLimit = 20;
 const AmityGlobalFeedComponent: FC<AmityGlobalFeedComponentType> = ({
   pageId,
   isShowStoryTab = true,
+  GlobalFeedHeaderComponent,
 }) => {
   const { itemWithAds, refresh, loading, onNextPage } =
     useCustomRankingGlobalFeed();
@@ -100,12 +102,15 @@ const AmityGlobalFeedComponent: FC<AmityGlobalFeedComponentType> = ({
       }
       keyboardShouldPersistTaps="handled"
       ListHeaderComponent={
-        !refreshing &&
-        !loading &&
-        isShowStoryTab && (
-          <AmityStoryTabComponent
-            type={AmityStoryTabComponentEnum.globalFeed}
-          />
+        !refreshing && !loading && isShowStoryTab ? (
+          <View>
+            {GlobalFeedHeaderComponent}
+            <AmityStoryTabComponent
+              type={AmityStoryTabComponentEnum.globalFeed}
+            />
+          </View>
+        ) : (
+          GlobalFeedHeaderComponent
         )
       }
       viewabilityConfig={{ viewAreaCoveragePercentThreshold: 60 }}

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

@@ -15,13 +15,11 @@ import { deleteCommentById } from '../../../../providers/Social/comment-sdk';
 import { ComponentID, PageID } from '../../../enum';
 import { useAmityComponent } from '../../../hook';
 import ContentLoader, { Circle, Rect } from 'react-content-loader/native';
-import uiSlice from '../../../../redux/slices/uiSlice';
 import { isAmityAd } from '../../../hook/useCustomRankingGlobalFeed';
 import CommentAdComponent from '../../../component/CommentAdComponent/CommentAdComponent';
 import { usePaginatorApi } from '../../../hook/usePaginator';
 import { useCommentAdImpression } from '../../../hook/useCommentAdImpression';
 import { useStyles } from './styles';
-import { useUIKitDispatch } from '../../../../redux/store';
 
 export interface IComment {
   commentId: string;
@@ -69,8 +67,6 @@ const AmityPostCommentComponent: FC<AmityPostCommentComponentType> = ({
     componentId,
   });
   const styles = useStyles();
-  const dispatch = useUIKitDispatch();
-  const { showToastMessage } = uiSlice.actions;
   const onNextPageRef = useRef<() => void | null>(null);
   const [commentList, setCommentList] = useState<IComment[]>([]);
   const [isLoading, setIsLoading] = useState(true);
@@ -95,11 +91,7 @@ const AmityPostCommentComponent: FC<AmityPostCommentComponentType> = ({
         referenceType: postType,
         limit: commentListLimit,
       },
-      async ({ error, loading, data, hasNextPage, onNextPage }) => {
-        if (error) {
-          dispatch(showToastMessage({ toastMessage: "Couldn't load comment" }));
-          return;
-        }
+      async ({ loading, data, hasNextPage, onNextPage }) => {
         if (!loading) {
           data && data.length > 0 && (await queryComment(data));
           onNextPageRef.current = hasNextPage ? onNextPage : null;
@@ -113,7 +105,7 @@ const AmityPostCommentComponent: FC<AmityPostCommentComponentType> = ({
       setCommentList([]);
       unsubComment();
     };
-  }, [dispatch, postId, postType, showToastMessage]);
+  }, [postId, postType]);
 
   const queryComment = async (comments: Amity.InternalComment[]) => {
     const formattedCommentList = await Promise.all(
@@ -124,7 +116,8 @@ const AmityPostCommentComponent: FC<AmityPostCommentComponentType> = ({
         formattedUserObject = {
           userId: userObject.data.userId,
           displayName: userObject.data.displayName,
-          avatarFileId: userObject.data.avatarFileId,
+          avatarFileId: userObject.data?.avatarFileId,
+          avatarCustomUrl: userObject.data?.avatarCustomUrl,
         };
 
         return {

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

@@ -48,6 +48,9 @@ import { LinkPreview } from '../../../../component/PreviewLink/LinkPreview';
 import AmityReactionListComponent from '../../AmityReactionListComponent/AmityReactionListComponent';
 import uiSlice from '../../../../../redux/slices/uiSlice';
 import { useUIKitDispatch } from '../../../../../redux/store';
+import { useNavigation } from '@react-navigation/native';
+import { NativeStackNavigationProp } from '@react-navigation/native-stack';
+import { RootStackParamList } from '../../../../routes/RouteParamList';
 
 export interface IComment {
   commentId: string;
@@ -129,6 +132,8 @@ const CommentListItem = ({
   const [isEditComment, setIsEditComment] = useState<boolean>(false);
   const slideAnimation = useRef(new Animated.Value(0)).current;
   const [isReactionListVisible, setIsReactionListVisible] = useState(false);
+  const navigation =
+    useNavigation<NativeStackNavigationProp<RootStackParamList>>();
 
   useEffect(() => {
     getReplyComments();
@@ -175,6 +180,7 @@ const CommentListItem = ({
             userId: userObject.data.userId,
             displayName: userObject.data.displayName,
             avatarFileId: userObject.data.avatarFileId,
+            avatarCustomUrl: userObject.data?.avatarCustomUrl,
           };
 
           return {
@@ -317,21 +323,41 @@ const CommentListItem = ({
   return (
     <View key={commentId} style={styles.commentWrap}>
       <View style={styles.headerSection}>
-        {user?.avatarFileId ? (
-          <Image
-            style={styles.avatar}
-            source={{
-              uri: `https://api.${apiRegion}.amity.co/api/v3/files/${user?.avatarFileId}/download`,
-            }}
-          />
-        ) : (
-          <View style={styles.avatar}>
-            <SvgXml xml={personXml} width="20" height="16" />
-          </View>
-        )}
+        <TouchableOpacity
+          onPress={() => {
+            user?.userId &&
+              navigation.navigate('UserProfile', {
+                userId: user?.userId || '',
+              });
+          }}
+        >
+          {user?.avatarFileId ? (
+            <Image
+              style={styles.avatar}
+              source={{
+                uri: user?.avatarCustomUrl
+                  ? user?.avatarCustomUrl
+                  : `https://api.${apiRegion}.amity.co/api/v3/files/${user?.avatarFileId}/download`,
+              }}
+            />
+          ) : (
+            <View style={styles.avatar}>
+              <SvgXml xml={personXml} width="20" height="16" />
+            </View>
+          )}
+        </TouchableOpacity>
         <View style={styles.rightSection}>
           <View style={styles.commentBubble}>
-            <Text style={styles.headerText}>{user?.displayName}</Text>
+            <TouchableOpacity
+              onPress={() => {
+                user?.userId &&
+                  navigation.navigate('UserProfile', {
+                    userId: user?.userId || '',
+                  });
+              }}
+            >
+              <Text style={styles.headerText}>{user?.displayName}</Text>
+            </TouchableOpacity>
             {targetType === 'community' && targetId && (
               <View style={{ marginVertical: 6 }}>
                 <ModeratorBadgeElement
@@ -410,7 +436,6 @@ const CommentListItem = ({
                 previewReplyCommentList[previewReplyCommentList.length - 1]
               }
               onDelete={onDelete}
-              onHandleReply={onHandleReply}
             />
           )}
           {isOpenReply && replyCommentList?.length > 0 && (
@@ -421,7 +446,6 @@ const CommentListItem = ({
                   commentId={item.commentId}
                   commentDetail={item}
                   onDelete={onDelete}
-                  onHandleReply={onHandleReply}
                 />
               )}
               keyExtractor={(item) => item.commentId}

package/src/v4/PublicApi/Components/AmityPostCommentComponent/CommentListItem/styles.ts

@@ -91,16 +91,17 @@ export const useStyles = () => {
     rowContainer: {
       flexDirection: 'row',
       alignItems: 'center',
+      gap: 8,
     },
     likedText: {
       color: theme.colors.primary,
-      fontSize: 14,
+      fontSize: 13,
       fontWeight: '600',
       marginLeft: 1,
     },
     btnText: {
       color: theme.colors.baseShade2,
-      fontSize: 14,
+      fontSize: 13,
       fontWeight: '600',
     },
     threeDots: {