@amityco/react-native-social-uikit 4.0.0 → 4.0.1-2786c805.0

package/lib/typescript/social/screens/VisitorUsageLimit/VisitorUsageLimit.d.ts

@@ -0,0 +1,2 @@
+export declare function VisitorUsageLimit(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=VisitorUsageLimit.d.ts.map

package/lib/typescript/social/screens/VisitorUsageLimit/VisitorUsageLimit.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"VisitorUsageLimit.d.ts","sourceRoot":"","sources":["../../../../../src/social/screens/VisitorUsageLimit/VisitorUsageLimit.tsx"],"names":[],"mappings":"AAaA,wBAAgB,iBAAiB,4CAmEhC"}

package/lib/typescript/social/screens/VisitorUsageLimit/index.d.ts

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

package/lib/typescript/social/screens/VisitorUsageLimit/index.d.ts.map

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

package/lib/typescript/social/screens/VisitorUsageLimit/styles.d.ts

@@ -0,0 +1,40 @@
+import type { MyMD3Theme } from '../../../core/providers/AmityUIKitProvider';
+export declare const useStyles: () => {
+    styles: {
+        container: {
+            flex: number;
+            backgroundColor: string;
+        };
+        contentContainer: {
+            flex: number;
+            alignItems: "center";
+            paddingHorizontal: number;
+            flexDirection: "column";
+            justifyContent: "center";
+        };
+        icon: {
+            marginBottom: number;
+        };
+        title: {
+            maxWidth: number;
+            textAlign: "center";
+            color: string;
+        };
+        subtitle: {
+            maxWidth: number;
+            textAlign: "center";
+            color: string;
+        };
+        signInButton: {
+            marginTop: number;
+            borderRadius: number;
+            paddingVertical: number;
+            paddingHorizontal: number;
+        };
+        signInText: {
+            color: string;
+        };
+    };
+    theme: MyMD3Theme;
+};
+//# sourceMappingURL=styles.d.ts.map

package/lib/typescript/social/screens/VisitorUsageLimit/styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../../src/social/screens/VisitorUsageLimit/styles.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,4CAA4C,CAAC;AAE7E,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwCrB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@amityco/react-native-social-uikit",
-  "version": "4.0.0",
+  "version": "4.0.1-2786c805.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.18.1-72bd324a.0",
+    "@amityco/ts-sdk-react-native": "7.22.1-f15e84ea.0",
     "@babel/plugin-transform-export-namespace-from": "^7.27.1",
     "@commitlint/config-conventional": "^17.0.2",
     "@evilmartians/lefthook": "^1.2.2",
@@ -119,7 +119,7 @@
     "@types/react": "^19.1.0"
   },
   "peerDependencies": {
-    "@amityco/ts-sdk-react-native": "7.18.1-72bd324a.0",
+    "@amityco/ts-sdk-react-native": "7.22.1-f15e84ea.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/core/assets/icons/index.ts

@@ -34,6 +34,7 @@ export { default as pause } from './pause';
 export { default as resume } from './resume';
 export { default as terminated } from './terminated';
 export { default as warning } from './warning';
+export { default as visitorLimit } from './visitorLimit';
 export { default as ban } from './ban';
 export { default as arrowLeft } from './arrowLeft';
 export { default as poll } from './poll';

package/src/core/assets/icons/visitorLimit.tsx

@@ -0,0 +1,19 @@
+export const icon = () => `<svg
+  width="100%"
+  height="100%"
+  viewBox="0 0 60 40"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    d="M57.5 0C58.8542 0 60 1.14583 60 2.5V37.5C60 38.9583 58.8542 40 57.5 40H5C2.1875 40 0 37.8125 0 35V5.83333C0 4.47917 1.04167 3.33333 2.5 3.33333H6.66667V2.5C6.66667 1.14583 7.70833 0 9.16667 0H57.5ZM3.33333 35C3.33333 35.9375 4.0625 36.6667 5 36.6667C5.83333 36.6667 6.66667 35.9375 6.66667 35V6.66667H3.33333V35ZM56.6667 36.6667V3.33333H10V35V35.1042C10 35.5208 9.79167 36.25 9.6875 36.6667H56.6667Z"
+    fill="currentColor"
+  />
+  <path
+    d="M36.0494 25.4322C36.0494 26.8211 34.9383 27.9013 33.5803 27.9013C32.1914 27.9013 31.1111 26.8211 31.1111 25.4322C31.1111 24.0742 32.1914 22.9631 33.5803 22.9631C34.9383 22.9631 36.0494 24.0742 36.0494 25.4322ZM31.3889 12.9013C31.358 12.4692 31.6975 12.0989 32.1296 12.0989H35C35.4321 12.0989 35.7716 12.4692 35.7407 12.9013L35.3395 21.2964C35.3086 21.6668 34.9691 21.9754 34.5988 21.9754H32.5309C32.1605 21.9754 31.821 21.6668 31.7901 21.2964L31.3889 12.9013Z"
+    fill="currentColor"
+  />
+</svg>
+`;
+
+export default icon;

package/src/core/constants/index.ts

@@ -88,11 +88,23 @@ export const ERROR_CODE = {
   ONLY_ONE_MODERATOR: '400317',
   ONLY_ONE_MEMBER: '400318',
   GLOBAL_BAN: '400312',
+  VISITOR_USAGE_LIMIT_EXCEEDED: '400323',
   INVALID_IMAGE:
     'Amity SDK (500000): Image uploading failed: Request has invalid image format',
   DISPLAY_NAME_UPDATE: '400301',
 };
 
+export const VISITOR_USAGE_LIMIT_MESSAGE = {
+  TITLE: "You've reached your daily limit.",
+  SUBTITLE: 'Create an account or sign in to keep exploring the community.',
+  SIGN_IN: 'Sign in',
+  TOAST: 'Create an account or sign in to continue.',
+};
+
+// Web parity: amity_social_label_create_account_or_sign_in
+export const VISITOR_USER_ACTION_TOAST =
+  'Create an account or sign in to continue.';
+
 export const COMMENT_ERROR_MESSAGE = {
   BLOCKED_WORD:
     'Your comment contains inappropriate word. Please review and delete it.',

package/src/core/hooks/useAuth.ts

@@ -14,6 +14,8 @@ const useAuth = (): AuthContextInterface => {
     sessionState,
     apiRegion,
     isGlobalBan,
+    isVisitorUsageLimitReached,
+    isVisitorOrBot,
   } = useContext(AuthContext);
 
   return {
@@ -26,6 +28,8 @@ const useAuth = (): AuthContextInterface => {
     sessionState,
     apiRegion,
     isGlobalBan,
+    isVisitorUsageLimitReached,
+    isVisitorOrBot,
   };
 };
 

package/src/core/providers/AmityUIKitProvider.tsx

@@ -21,7 +21,8 @@ import { ErrorBoundary } from '../components/ErrorBoundary';
 
 export type CusTomTheme = typeof DefaultTheme;
 export interface IAmityUIkitProvider {
-  userId: string;
+  /** Omit to connect as a visitor (read-only session). */
+  userId?: string;
   displayName?: string;
   apiKey: string;
   apiRegion?: string;

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,47 @@ export const AuthContextProvider: FC<IAmityUIkitProvider> = ({
     if (sessionState === 'established') {
       setIsConnected(true);
       onSdkReady();
+      // Same check as the Web UIKit's isVisitorOrBot in SDKProvider
+      setIsVisitorOrBot(Client.getCurrentUserType() !== 'signed-in');
     }
   }, [sessionState]);
 
-  const handleConnect = useCallback(async () => {
-    let loginParam;
+  useEffect(() => {
+    // SDK emits this (throttled, 2s window) when a visitor/bot session gets
+    // error 400323 — daily usage limit exceeded. The session stays alive, so
+    // this is tracked separately from isGlobalBan. In-memory only: the flag
+    // resets when the provider remounts or the user signs in with a userId.
+    return Client.onVisitorUsageLimitReached(() => {
+      setIsVisitorUsageLimitReached(true);
+    });
+  }, []);
 
-    loginParam = {
-      userId: userId,
-      displayName: displayName,
-    };
-    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) {
+        let loginParam: Amity.ConnectClientParams = {
+          userId: userId,
+          displayName: displayName,
+        };
+        if (authToken?.length > 0) {
+          loginParam = { ...loginParam, authToken: authToken };
+        }
+        const response = await Client.login(loginParam, sessionHandler);
+        if (!response) return;
+      } else {
+        // No userId — connect as a visitor (read-only session, same
+        // convention as the Web UIKit's registerDevice without userId)
+        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) {
@@ -111,6 +134,7 @@ export const AuthContextProvider: FC<IAmityUIkitProvider> = ({
     }
   };
   useEffect(() => {
+    setIsVisitorUsageLimitReached(false);
     login();
   }, [userId]);
 
@@ -138,6 +162,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,34 @@ 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;
+    }
+    // Customer override replaces the default full-page swap; guard so rapid
+    // repeat events trigger a single navigation.
+    if (handleVisitorUsageLimitReached && !hasHandledUsageLimit.current) {
+      hasHandledUsageLimit.current = true;
+      handleVisitorUsageLimitReached();
+    }
+  }, [isVisitorUsageLimitReached, handleVisitorUsageLimitReached]);
 
   if (isGlobalBan) return <GlobalBan />;
 
+  // Default usage-limit handling: replace the whole navigation tree with the
+  // dead-end error page so back-navigation cannot escape it.
+  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,24 @@ export type CommunitySettingPageContext = {
 };
 
 export interface IBehaviour {
+  AmityGlobalBehaviour?: {
+    /**
+     * Called when a visitor attempts a restricted action (comment, react,
+     * follow, join…). Default shows a toast; override to open a sign-in flow.
+     */
+    handleVisitorUserAction?: () => void;
+    /**
+     * Called when a visitor session exceeds its daily usage limit (error
+     * 400323). Providing this skips the default full-page
+     * <VisitorUsageLimit /> swap so a custom error page can be shown instead.
+     */
+    handleVisitorUsageLimitReached?: () => void;
+    /**
+     * Called when "Sign in" is pressed on the usage-limit error page.
+     * Default shows a toast; override to navigate to a sign-in flow.
+     */
+    handleVisitorUsageLimitSignIn?: () => void;
+  };
   AmitySocialHomePageBehaviour?: {
     onChooseTab?: (arg?: string) => void;
   };

package/src/index.tsx

@@ -75,6 +75,7 @@ import {
   AmityEditUserProfilePage,
   AmityUserRelationshipPage,
   AmityBlockedUsersPage,
+  VisitorUsageLimit,
 } from './social';
 
 // Polyfill for BackHandler compatibility with older libraries like react-native-modalbox
@@ -106,6 +107,7 @@ export {
   AmityUiKitProvider,
   ErrorBoundary,
   AmityUiKitSocial,
+  VisitorUsageLimit,
   AmityStoryTabComponent,
   AmityStoryTabComponentEnum,
   AmityCreateStoryPage,

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,9 @@ const CommentList: FC<ICommentListProp> = ({
   withAvatar,
   disabledComment,
 }) => {
+  // Web parity: visitors never see the comment composer
+  const { isVisitorOrBot } = useAuth();
+  const hideComposer = disabledInteraction || isVisitorOrBot;
   const styles = useStyles();
   const theme = useTheme() as MyMD3Theme;
   const onNextPageRef = useRef<() => void | null>(null);
@@ -284,7 +288,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 { useGlobalBehavior } from '../../../hooks/useGlobalBehavior';
 import { LinkPreview } from '../../PreviewLink';
 import { Typography } from '../../../../core/components/Typography/Typography';
 import { pen, report, trash, unreport } from '../../../../core/assets/icons';
@@ -290,6 +291,13 @@ const CommentListItem = ({
     onClickReply && onClickReply(user, commentId);
   };
 
+  // Web parity: visitors see Like/Reply but taps show the sign-in toast
+  const { handleGlobalBehavior, isVisitorOrBot } = useGlobalBehavior();
+  const onPressLike = () =>
+    handleGlobalBehavior({ defaultBehavior: addReactionToComment });
+  const onPressReply = () =>
+    handleGlobalBehavior({ defaultBehavior: onHandleReply });
+
   const onPressCommentReaction = () => {
     setIsReactionListVisible(true);
   };
@@ -348,10 +356,7 @@ const CommentListItem = ({
                     </Typography.Caption>
                   )}
                 </View>
-                <TouchableOpacity
-                  onPress={() => addReactionToComment()}
-                  style={styles.likeBtn}
-                >
+                <TouchableOpacity onPress={onPressLike} style={styles.likeBtn}>
                   <Typography.CaptionBold
                     style={isLike ? styles.likedText : styles.btnText}
                   >
@@ -359,20 +364,22 @@ const CommentListItem = ({
                   </Typography.CaptionBold>
                 </TouchableOpacity>
                 <TouchableOpacity
-                  onPress={disabledComment ? undefined : onHandleReply}
+                  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>
+                {!isVisitorOrBot && (
+                  <TouchableOpacity onPress={openModal}>
+                    <SvgXml
+                      xml={threeDots(theme.colors.baseShade2)}
+                      width="20"
+                      height="20"
+                    />
+                  </TouchableOpacity>
+                )}
               </View>
 
               {likeReaction > 0 && (

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');
     }
   };
+
+  // Web parity: visitors see Like but taps show the sign-in toast
+  const { handleGlobalBehavior, isVisitorOrBot } = useGlobalBehavior();
+  const onPressLike = () =>
+    handleGlobalBehavior({ defaultBehavior: addReactionToComment });
+
   const deletePostObject = () => {
     Alert.alert('Delete reply', `This reply will be permanently deleted.`, [
       {
@@ -267,10 +274,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}
                 >
@@ -278,13 +282,15 @@ export default function ReplyCommentList({
                 </Typography.CaptionBold>
               </TouchableOpacity>
 
-              <TouchableOpacity onPress={openModal} style={styles.threeDots}>
-                <SvgXml
-                  xml={threeDots(theme.colors.base)}
-                  width="20"
-                  height="16"
-                />
-              </TouchableOpacity>
+              {!isVisitorOrBot && (
+                <TouchableOpacity onPress={openModal} style={styles.threeDots}>
+                  <SvgXml
+                    xml={threeDots(theme.colors.base)}
+                    width="20"
+                    height="16"
+                  />
+                </TouchableOpacity>
+              )}
             </View>
             {likeReaction > 0 && (
               <TouchableOpacity

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,13 @@ const CommentListItem = ({
     onClickReply && onClickReply(user, commentId);
   };
 
+  // Web parity: visitors see Like/Reply but taps show the sign-in toast
+  const { handleGlobalBehavior, isVisitorOrBot } = useGlobalBehavior();
+  const onPressLike = () =>
+    handleGlobalBehavior({ defaultBehavior: addReactionToComment });
+  const onPressReply = () =>
+    handleGlobalBehavior({ defaultBehavior: onHandleReply });
+
   const onPressCommentReaction = () => {
     onNavigate && onNavigate();
     setIsReactionListVisible(true);
@@ -399,27 +406,26 @@ 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}>
-                  <SvgXml
-                    xml={threeDots(theme.colors.base)}
-                    width="20"
-                    height="16"
-                  />
-                </TouchableOpacity>
+                {!isVisitorOrBot && (
+                  <TouchableOpacity
+                    onPress={openModal}
+                    style={styles.threeDots}
+                  >
+                    <SvgXml
+                      xml={threeDots(theme.colors.base)}
+                      width="20"
+                      height="16"
+                    />
+                  </TouchableOpacity>
+                )}
               </View>
 
               {likeReaction > 0 && (

package/src/social/features/comment/components/PostComment/ReplyCommentList/index.tsx

@@ -27,6 +27,7 @@ import {
 import { Pressable } from 'react-native';
 import useAuth from '../../../../../../core/hooks/useAuth';
 import { useTimeDifference } from '../../../../../hooks/useTimeDifference';
+import { useGlobalBehavior } from '../../../../../hooks/useGlobalBehavior';
 import {
   isReportTarget,
   reportTargetById,
@@ -144,6 +145,12 @@ const ReplyCommentList = ({
       await addCommentReaction(commentId, 'like');
     }
   };
+
+  // Web parity: visitors see Like but taps show the sign-in toast
+  const { handleGlobalBehavior, isVisitorOrBot } = useGlobalBehavior();
+  const onPressLike = () =>
+    handleGlobalBehavior({ defaultBehavior: addReactionToComment });
+
   const deleteReplyComment = () => {
     Alert.alert('Delete reply', 'This reply will be permanently deleted.', [
       {
@@ -292,21 +299,20 @@ const ReplyCommentList = ({
                 )}
               </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={openModal} style={styles.threeDots}>
-                <SvgXml
-                  xml={threeDots(theme.colors.base)}
-                  width="20"
-                  height="16"
-                />
-              </TouchableOpacity>
+              {!isVisitorOrBot && (
+                <TouchableOpacity onPress={openModal} style={styles.threeDots}>
+                  <SvgXml
+                    xml={threeDots(theme.colors.base)}
+                    width="20"
+                    height="16"
+                  />
+                </TouchableOpacity>
+              )}
             </View>
 
             {likeReaction > 0 && (