@amityco/react-native-social-uikit 4.0.2-8e4d4f3a.0 → 4.0.2-a91dab2.0

package/src/core/providers/AuthProvider.tsx

@@ -24,6 +24,8 @@ export const AuthContext = createContext<AuthContextInterface>({
   authToken: '',
   fcmToken: undefined,
   isGlobalBan: false,
+  isVisitorUsageLimitReached: false,
+  isVisitorOrBot: false,
 });
 
 export const AuthContextProvider: FC<IAmityUIkitProvider> = ({
@@ -44,6 +46,9 @@ export const AuthContextProvider: FC<IAmityUIkitProvider> = ({
     apiEndpoint: { http: apiEndpoint },
   });
   const [isGlobalBan, setIsGlobalBan] = useState(false);
+  const [isVisitorUsageLimitReached, setIsVisitorUsageLimitReached] =
+    useState(false);
+  const [isVisitorOrBot, setIsVisitorOrBot] = useState(false);
 
   const sessionHandler: Amity.SessionHandler = {
     sessionWillRenewAccessToken(renewal) {
@@ -64,29 +69,43 @@ export const AuthContextProvider: FC<IAmityUIkitProvider> = ({
     if (sessionState === 'established') {
       setIsConnected(true);
       onSdkReady();
+      setIsVisitorOrBot(Client.getCurrentUserType() !== 'signed-in');
     }
   }, [sessionState]);
 
-  const handleConnect = useCallback(async () => {
-    let loginParam;
+  useEffect(() => {
+    const unsubscribe = Client.onVisitorUsageLimitReached(() => {
+      setIsVisitorUsageLimitReached(true);
+    });
 
-    loginParam = {
-      userId: userId,
-      displayName: displayName,
+    return () => {
+      unsubscribe();
     };
-    if (authToken?.length > 0) {
-      loginParam = { ...loginParam, authToken: authToken };
-    }
+  }, []);
+
+  const handleConnect = useCallback(async () => {
     try {
-      const response = await Client.login(loginParam, sessionHandler);
-      if (!response) return;
+      if (userId) {
+        // Spec: omit displayName entirely when blank — do not substitute userId
+        let loginParam: Amity.ConnectClientParams = { userId: userId };
+        if (displayName) loginParam = { ...loginParam, displayName };
+        if (authToken?.length > 0) {
+          loginParam = { ...loginParam, authToken: authToken };
+        }
+        const response = await Client.login(loginParam, sessionHandler);
+        if (!response) return;
+      } else {
+        const response = await Client.loginAsVisitor({ sessionHandler });
+        if (!response) return;
+      }
     } catch (err) {
       if (err?.message?.includes(ERROR_CODE.GLOBAL_BAN)) {
         setIsGlobalBan(true);
       }
     }
 
-    if (fcmToken) {
+    // Visitors/bots are GET-only with no MQTT — skip push registration for them.
+    if (fcmToken && userId) {
       try {
         await Client.registerPushNotification(fcmToken);
       } catch (err) {
@@ -110,7 +129,9 @@ export const AuthContextProvider: FC<IAmityUIkitProvider> = ({
       setLoading(false);
     }
   };
+
   useEffect(() => {
+    setIsVisitorUsageLimitReached(false);
     login();
   }, [userId]);
 
@@ -138,6 +159,8 @@ export const AuthContextProvider: FC<IAmityUIkitProvider> = ({
         sessionState,
         apiRegion: apiRegion.toLowerCase(),
         isGlobalBan,
+        isVisitorUsageLimitReached,
+        isVisitorOrBot,
       }}
     >
       {children}

package/src/core/routes/AmityUIKitNavigator.tsx

@@ -1,3 +1,4 @@
+import { useEffect, useRef } from 'react';
 import {
   NavigationContainer,
   NavigationIndependentTree,
@@ -43,6 +44,8 @@ import { CommunityStoriesNotificationSettingScreen } from '../../social/screens/
 import { CommunityLivestreamsNotificationSettingScreen } from '../../social/screens/CommunityLivestreamsNotificationSetting';
 import CommunityPendingRequest from '../../social/screens/CommunityPendingRequest';
 import { GlobalBan } from '../../social/screens/GlobalBan';
+import { VisitorUsageLimit } from '../../social/screens/VisitorUsageLimit';
+import { useBehaviour } from '../../social/providers/BehaviourProvider';
 import {
   ImageViewerScreen,
   VideoPlayerScreen,
@@ -60,10 +63,32 @@ const Stack = createNativeStackNavigator<
 
 export default function AmitySocialUIKitV4Navigator() {
   const theme = useTheme<MyMD3Theme>();
-  const { isGlobalBan } = useAuth();
+  const { isGlobalBan, isVisitorUsageLimitReached } = useAuth();
+  const { AmityGlobalBehaviour } = useBehaviour();
+
+  const handleVisitorUsageLimitReached =
+    AmityGlobalBehaviour?.handleVisitorUsageLimitReached;
+
+  const hasHandledUsageLimit = useRef(false);
+
+  useEffect(() => {
+    if (!isVisitorUsageLimitReached) {
+      hasHandledUsageLimit.current = false;
+      return;
+    }
+
+    if (handleVisitorUsageLimitReached && !hasHandledUsageLimit.current) {
+      hasHandledUsageLimit.current = true;
+      handleVisitorUsageLimitReached();
+    }
+  }, [isVisitorUsageLimitReached, handleVisitorUsageLimitReached]);
 
   if (isGlobalBan) return <GlobalBan />;
 
+  if (isVisitorUsageLimitReached && !handleVisitorUsageLimitReached) {
+    return <VisitorUsageLimit />;
+  }
+
   return (
     <NavigationIndependentTree>
       <NavigationContainer ref={navigationRef} onReady={onNavigationReady}>

package/src/core/types/auth.ts

@@ -10,4 +10,6 @@ export type AuthContextInterface = {
   authToken?: string;
   fcmToken?: string;
   isGlobalBan: boolean;
+  isVisitorUsageLimitReached: boolean;
+  isVisitorOrBot: boolean;
 };

package/src/core/types/behaviour.ts

@@ -17,6 +17,12 @@ export type CommunitySettingPageContext = {
 };
 
 export interface IBehaviour {
+  AmityGlobalBehaviour?: {
+    handleVisitorUserAction?: () => void;
+    handleNonMemberAction?: () => void;
+    handleVisitorUsageLimitReached?: () => void;
+    handleVisitorUsageLimitSignIn?: () => void;
+  };
   AmitySocialHomePageBehaviour?: {
     onChooseTab?: (arg?: string) => void;
   };

package/src/social/components/PollContent/PollOption.tsx

@@ -9,6 +9,7 @@ import Button, { BUTTON_SIZE } from '../Button/Button';
 import { useNavigation } from '@react-navigation/native';
 import { NativeStackNavigationProp } from '@react-navigation/native-stack';
 import { RootStackParamList } from '../../../core/routes/RouteParamList';
+import { useInteractionBehavior } from '../../hooks/useInteractionBehavior';
 
 type PollOptionsProps = {
   post?: Amity.Post<any>;
@@ -42,10 +43,10 @@ export function PollOptions({
     useNavigation<NativeStackNavigationProp<RootStackParamList>>();
 
   const { styles } = useStyles();
+  const { handleInteraction } = useInteractionBehavior();
   const [selectedOption, setSelectedOption] = useState<Amity.PollAnswer[]>([]);
 
   const btnDisabled = selectedOption.length === 0;
-  const optionDisabled = !!disabledPoll;
 
   return (
     <View>
@@ -60,7 +61,6 @@ export function PollOptions({
         <Radio.Group<Amity.PollAnswer>
           value={selectedOption[0]}
           style={styles.optionGroup}
-          disabled={optionDisabled}
           onChange={(value) => setSelectedOption([value])}
           select={(value, option) => value.id === option.id}
         >
@@ -79,11 +79,7 @@ export function PollOptions({
                 ]}
               >
                 <Radio.Label style={styles.optionLabel}>
-                  <Typography.BodyBold
-                    style={[optionDisabled && styles.optionLabelDisabled]}
-                  >
-                    {option.data}
-                  </Typography.BodyBold>
+                  <Typography.BodyBold>{option.data}</Typography.BodyBold>
                 </Radio.Label>
                 <Radio.Icon />
               </Radio.Option>
@@ -93,7 +89,6 @@ export function PollOptions({
         <CheckBox.Group<Amity.PollAnswer>
           value={selectedOption}
           style={styles.optionGroup}
-          disabled={optionDisabled}
           onChange={(value) => setSelectedOption(value)}
           select={(value, option) =>
             !!value.find((item) => item.id === option.id)
@@ -115,11 +110,7 @@ export function PollOptions({
                 ]}
               >
                 <CheckBox.Label style={styles.optionLabel}>
-                  <Typography.BodyBold
-                    style={[optionDisabled && styles.optionLabelDisabled]}
-                  >
-                    {option.data}
-                  </Typography.BodyBold>
+                  <Typography.BodyBold>{option.data}</Typography.BodyBold>
                 </CheckBox.Label>
                 <CheckBox.Icon />
               </CheckBox.Option>
@@ -144,12 +135,15 @@ export function PollOptions({
       )}
       {!isPollClosed && !isAlreadyVoted && (
         <TouchableOpacity
-          disabled={btnDisabled || optionDisabled}
-          style={[
-            styles.voteBtn,
-            (btnDisabled || optionDisabled) && styles.voteBtnDisabled,
-          ]}
-          onPress={() => votePoll(selectedOption.map((option) => option.id))}
+          disabled={btnDisabled}
+          style={[styles.voteBtn, btnDisabled && styles.voteBtnDisabled]}
+          onPress={() =>
+            handleInteraction({
+              defaultBehavior: () =>
+                votePoll(selectedOption.map((option) => option.id)),
+              isJoined: !disabledPoll,
+            })
+          }
         >
           <Typography.BodyBold style={styles.voteBtnLabel}>
             Vote

package/src/social/components/PostMenu/index.tsx

@@ -3,7 +3,7 @@ import { Alert, View } from 'react-native';
 import { getCommunityById } from '../../../core/legacy/community';
 import { useNavigation } from '@react-navigation/native';
 import type { NativeStackNavigationProp } from '@react-navigation/native-stack';
-import { useFlagPost, isModerator } from '../../hooks';
+import { useFlagPost, isModerator, useGlobalBehavior } from '../../hooks';
 import { deletePostById } from '../../../core/legacy/feed';
 import useAuth from '../../../core/hooks/useAuth';
 import globalFeedSlice from '../../../core/stores/slices/globalfeedSlice';
@@ -30,6 +30,7 @@ type PostMenuProps = {
 
 export function PostMenu({ pageId, componentId, post }: PostMenuProps) {
   const { showToast } = useToast();
+  const { handleGlobalBehavior } = useGlobalBehavior();
   const { closePoll } = useClosePoll();
   const { client } = useAuth();
   const [communityData, setCommunityData] = useState<Amity.Community>(null);
@@ -121,7 +122,7 @@ export function PostMenu({ pageId, componentId, post }: PostMenuProps) {
           iconProps={{ xml: report() }}
           onPress={() => {
             closeBottomSheet();
-            reportPost(postId);
+            handleGlobalBehavior({ defaultBehavior: () => reportPost(postId) });
           }}
         />
       ),
@@ -136,7 +137,9 @@ export function PostMenu({ pageId, componentId, post }: PostMenuProps) {
           label={'Unreport post'}
           onPress={() => {
             closeBottomSheet();
-            unreportPost(postId);
+            handleGlobalBehavior({
+              defaultBehavior: () => unreportPost(postId),
+            });
           }}
         />
       ),

package/src/social/components/Social/CommentList/CommentList.tsx

@@ -31,6 +31,7 @@ import { useToast } from '../../../../core/stores/slices/toastSlice';
 import { lock } from '../../../../core/assets/icons';
 import { Typography } from '../../../../core/components/Typography/Typography';
 import { MAX_MENTION_USERS } from '../../../../core/constants';
+import useAuth from '../../../../core/hooks/useAuth';
 
 interface ICommentListProp {
   postId: string;
@@ -68,6 +69,8 @@ const CommentList: FC<ICommentListProp> = ({
   withAvatar,
   disabledComment,
 }) => {
+  const { isVisitorOrBot } = useAuth();
+  const hideComposer = disabledInteraction || isVisitorOrBot;
   const styles = useStyles();
   const theme = useTheme() as MyMD3Theme;
   const onNextPageRef = useRef<() => void | null>(null);
@@ -284,7 +287,7 @@ const CommentList: FC<ICommentListProp> = ({
               </TouchableOpacity>
             </View>
           )}
-          {!disabledInteraction &&
+          {!hideComposer &&
             (disabledComment ? (
               <View style={styles.disabledCommentWrap}>
                 <SvgXml

package/src/social/components/Social/CommentListItem/CommentListItem.tsx

@@ -44,6 +44,7 @@ import ReplyCommentList from '../../legacy/Social/ReplyCommentList';
 import AmityReactionListComponent from '../../../features/reaction/components/List';
 import { CommentRepository } from '@amityco/ts-sdk-react-native';
 import { useTimeDifference } from '../../../hooks/useTimeDifference';
+import { useInteractionBehavior } from '../../../hooks/useInteractionBehavior';
 import { LinkPreview } from '../../PreviewLink';
 import { Typography } from '../../../../core/components/Typography/Typography';
 import { pen, report, trash, unreport } from '../../../../core/assets/icons';
@@ -290,6 +291,20 @@ const CommentListItem = ({
     onClickReply && onClickReply(user, commentId);
   };
 
+  const { handleInteraction } = useInteractionBehavior();
+
+  const onPressLike = () =>
+    handleInteraction({
+      defaultBehavior: addReactionToComment,
+      isJoined: !disabledInteraction,
+    });
+
+  const onPressReply = () =>
+    handleInteraction({
+      defaultBehavior: onHandleReply,
+      isJoined: !disabledInteraction,
+    });
+
   const onPressCommentReaction = () => {
     setIsReactionListVisible(true);
   };
@@ -334,60 +349,55 @@ const CommentListItem = ({
               />
             )}
           </View>
-          {!disabledInteraction && (
-            <View style={styles.actionSection}>
-              <View style={styles.rowContainer}>
-                <View style={styles.timeRow}>
+          <View style={styles.actionSection}>
+            <View style={styles.rowContainer}>
+              <View style={styles.timeRow}>
+                <Typography.Caption style={styles.headerTextTime}>
+                  {timeDifference}
+                </Typography.Caption>
+                {(editedAt !== createdAt || isEditComment) && (
                   <Typography.Caption style={styles.headerTextTime}>
-                    {timeDifference}
+                    {' '}
+                    (edited)
                   </Typography.Caption>
-                  {(editedAt !== createdAt || isEditComment) && (
-                    <Typography.Caption style={styles.headerTextTime}>
-                      {' '}
-                      (edited)
-                    </Typography.Caption>
-                  )}
-                </View>
-                <TouchableOpacity
-                  onPress={() => addReactionToComment()}
-                  style={styles.likeBtn}
-                >
-                  <Typography.CaptionBold
-                    style={isLike ? styles.likedText : styles.btnText}
-                  >
-                    Like
-                  </Typography.CaptionBold>
-                </TouchableOpacity>
-                <TouchableOpacity
-                  onPress={disabledComment ? undefined : onHandleReply}
-                  style={styles.likeBtn}
-                >
-                  <Typography.CaptionBold style={styles.btnText}>
-                    Reply
-                  </Typography.CaptionBold>
-                </TouchableOpacity>
-                <TouchableOpacity onPress={openModal}>
-                  <SvgXml
-                    xml={threeDots(theme.colors.baseShade2)}
-                    width="20"
-                    height="20"
-                  />
-                </TouchableOpacity>
+                )}
               </View>
-
-              {likeReaction > 0 && (
-                <TouchableOpacity
-                  onPress={onPressCommentReaction}
-                  style={styles.likeBtn}
+              <TouchableOpacity onPress={onPressLike} style={styles.likeBtn}>
+                <Typography.CaptionBold
+                  style={isLike ? styles.likedText : styles.btnText}
                 >
-                  <Typography.Caption style={styles.btnText}>
-                    {likeReaction}
-                  </Typography.Caption>
-                  <SvgXml xml={likeCircle} width="20" height="20" />
-                </TouchableOpacity>
-              )}
+                  Like
+                </Typography.CaptionBold>
+              </TouchableOpacity>
+              <TouchableOpacity
+                onPress={disabledComment ? undefined : onPressReply}
+                style={styles.likeBtn}
+              >
+                <Typography.CaptionBold style={styles.btnText}>
+                  Reply
+                </Typography.CaptionBold>
+              </TouchableOpacity>
+              <TouchableOpacity onPress={openModal}>
+                <SvgXml
+                  xml={threeDots(theme.colors.baseShade2)}
+                  width="20"
+                  height="20"
+                />
+              </TouchableOpacity>
             </View>
-          )}
+
+            {likeReaction > 0 && (
+              <TouchableOpacity
+                onPress={onPressCommentReaction}
+                style={styles.likeBtn}
+              >
+                <Typography.Caption style={styles.btnText}>
+                  {likeReaction}
+                </Typography.Caption>
+                <SvgXml xml={likeCircle} width="20" height="20" />
+              </TouchableOpacity>
+            )}
+          </View>
 
           {previewReplyCommentList.length > 0 && !isOpenReply && (
             <ReplyCommentList
@@ -423,10 +433,10 @@ const CommentListItem = ({
               style={styles.viewMoreReplyBtn}
             >
               <SvgXml xml={expandIcon} />
-              <Typography.CaptionBold style={styles.viewMoreText}>
+              <Text style={styles.viewMoreText}>
                 View {childrenNumber}{' '}
                 {childrenNumber === 1 ? 'reply' : 'replies'}
-              </Typography.CaptionBold>
+              </Text>
             </TouchableOpacity>
           )}
 
@@ -436,9 +446,7 @@ const CommentListItem = ({
               style={styles.viewMoreReplyBtn}
             >
               <SvgXml xml={expandIcon} />
-              <Typography.CaptionBold style={styles.viewMoreText}>
-                View more replies
-              </Typography.CaptionBold>
+              <Text style={styles.viewMoreText}>View more replies</Text>
             </TouchableOpacity>
           )}
         </View>
@@ -492,7 +500,13 @@ const CommentListItem = ({
               </View>
             ) : (
               <TouchableOpacity
-                onPress={reportCommentObject}
+                onPress={() => {
+                  closeModal();
+                  handleInteraction({
+                    defaultBehavior: reportCommentObject,
+                    allowNonMember: true,
+                  });
+                }}
                 style={styles.modalRow}
               >
                 <SvgXml

package/src/social/components/Social/CommentListItem/styles.ts

@@ -71,12 +71,13 @@ export const useStyles = () => {
       paddingHorizontal: 8,
       marginTop: 12,
       flexDirection: 'row',
-      justifyContent: 'center',
       alignItems: 'center',
       alignSelf: 'flex-start',
     },
     viewMoreText: {
+      fontWeight: '600',
       color: theme.colors.secondaryShade1,
+      paddingHorizontal: 4,
     },
     commentText: {
       fontSize: 15,

package/src/social/components/legacy/Social/ReplyCommentList/index.tsx

@@ -44,6 +44,7 @@ import { useNavigation } from '@react-navigation/native';
 import { NativeStackNavigationProp } from '@react-navigation/native-stack';
 import { RootStackParamList } from '../../../../../core/routes/RouteParamList';
 import { useTimeDifference } from '../../../../hooks';
+import { useGlobalBehavior } from '../../../../hooks/useGlobalBehavior';
 import { useToast } from '../../../../../core/stores/slices/toastSlice';
 import AmityReactionListComponent from '../../../../features/reaction/components/List';
 
@@ -155,6 +156,12 @@ export default function ReplyCommentList({
       await addCommentReaction(commentId, 'like');
     }
   };
+
+  const { handleGlobalBehavior } = useGlobalBehavior();
+
+  const onPressLike = () =>
+    handleGlobalBehavior({ defaultBehavior: addReactionToComment });
+
   const deletePostObject = () => {
     Alert.alert('Delete reply', `This reply will be permanently deleted.`, [
       {
@@ -169,6 +176,7 @@ export default function ReplyCommentList({
     ]);
     setIsVisible(false);
   };
+
   const reportCommentObject = async () => {
     if (isReportByMe) {
       const unReportPost = await unReportTargetById('comment', commentId);
@@ -267,10 +275,7 @@ export default function ReplyCommentList({
                   </Typography.Caption>
                 )}
               </View>
-              <TouchableOpacity
-                onPress={() => addReactionToComment()}
-                style={styles.likeBtn}
-              >
+              <TouchableOpacity onPress={onPressLike} style={styles.likeBtn}>
                 <Typography.CaptionBold
                   style={isLike ? styles.likedText : styles.btnText}
                 >
@@ -359,7 +364,12 @@ export default function ReplyCommentList({
               </View>
             ) : (
               <TouchableOpacity
-                onPress={reportCommentObject}
+                onPress={() => {
+                  closeModal();
+                  handleGlobalBehavior({
+                    defaultBehavior: reportCommentObject,
+                  });
+                }}
                 style={styles.modalRow}
               >
                 <SvgXml

package/src/social/elements/CommunityCreatePostButton/CommunityCreatePostButton.tsx

@@ -16,9 +16,15 @@ function CommunityCreatePostButton({
   ...props
 }: CommunityCreatePostButtonProps) {
   const elementId = ElementID.community_create_post_button;
-  const { themeStyles } = useAmityElement({ pageId, componentId, elementId });
+  const { themeStyles, isExcluded } = useAmityElement({
+    pageId,
+    componentId,
+    elementId,
+  });
   const styles = useStyles(themeStyles);
 
+  if (isExcluded) return null;
+
   return (
     <TouchableOpacity
       hitSlop={0.8}

package/src/social/elements/CommunityJoinButtonElement/CommunityJoinButtonElement.tsx

@@ -1,7 +1,11 @@
 import { FC, memo } from 'react';
 import { TouchableOpacityProps } from 'react-native';
 import { ComponentID, ElementID, PageID } from '../../enums/enumUIKitID';
-import { useAmityElement, useJoinCommunity } from '../../hooks';
+import {
+  useAmityElement,
+  useGlobalBehavior,
+  useJoinCommunity,
+} from '../../hooks';
 import { Button, BUTTON_SIZE } from '../../components/Button/Button';
 import { plus } from '../../../core/assets/icons';
 import { useCustomRankingGlobalFeed } from '../../hooks/useCustomRankingGlobalFeed';
@@ -36,9 +40,13 @@ const CommunityJoinButton: FC<CommunityJoinButtonType> = ({
     },
   });
 
+  const { handleGlobalBehavior } = useGlobalBehavior();
+
   const handleJoinCommunity = () => {
     if (!communityId) return;
-    joinCommunity(communityId);
+    handleGlobalBehavior({
+      defaultBehavior: () => joinCommunity(communityId),
+    });
   };
 
   if (isExcluded) return null;

package/src/social/features/comment/components/PostComment/CommentListItem/CommentListItem.tsx

@@ -43,7 +43,7 @@ import { useTheme } from 'react-native-paper';
 import type { MyMD3Theme } from '../../../../../../core/providers/AmityUIKitProvider';
 import ReplyCommentList from '../ReplyCommentList/index';
 import { CommentRepository } from '@amityco/ts-sdk-react-native';
-import { useTimeDifference } from '../../../../../hooks';
+import { useGlobalBehavior, useTimeDifference } from '../../../../../hooks';
 import ModeratorBadgeElement from '../../../../../elements/ModeratorBadgeElement/ModeratorBadgeElement';
 import { BrandBadge } from '../../../../../elements/BrandBadge';
 import { ComponentID, PageID } from '../../../../../enums';
@@ -315,6 +315,14 @@ const CommentListItem = ({
     onClickReply && onClickReply(user, commentId);
   };
 
+  const { handleGlobalBehavior } = useGlobalBehavior();
+
+  const onPressLike = () =>
+    handleGlobalBehavior({ defaultBehavior: addReactionToComment });
+
+  const onPressReply = () =>
+    handleGlobalBehavior({ defaultBehavior: onHandleReply });
+
   const onPressCommentReaction = () => {
     onNavigate && onNavigate();
     setIsReactionListVisible(true);
@@ -399,18 +407,12 @@ const CommentListItem = ({
                   )}
                 </View>
 
-                <TouchableOpacity
-                  onPress={() => addReactionToComment()}
-                  style={styles.likeBtn}
-                >
+                <TouchableOpacity onPress={onPressLike} style={styles.likeBtn}>
                   <Text style={isLike ? styles.likedText : styles.btnText}>
                     {!isLike ? 'Like' : 'Liked'}
                   </Text>
                 </TouchableOpacity>
-                <TouchableOpacity
-                  onPress={onHandleReply}
-                  style={styles.likeBtn}
-                >
+                <TouchableOpacity onPress={onPressReply} style={styles.likeBtn}>
                   <Text style={styles.btnText}>Reply</Text>
                 </TouchableOpacity>
                 <TouchableOpacity onPress={openModal} style={styles.threeDots}>
@@ -532,7 +534,12 @@ const CommentListItem = ({
               </View>
             ) : (
               <TouchableOpacity
-                onPress={reportCommentObject}
+                onPress={() => {
+                  closeModal();
+                  handleGlobalBehavior({
+                    defaultBehavior: reportCommentObject,
+                  });
+                }}
                 style={styles.modalRow}
               >
                 <SvgXml